Heading

The main title or heading with levels (H1 to H6) to show hierarchy and structure for the page and sections.

This Looks Important 

_bookshop_name: primitives/heading
text: This Looks Important
level: h2

Properties

text string

The text content of the heading.

level enum | default: h2

The heading level.

Accepted values:
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

size enum

The font size of the text.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
  • 6xl

align enum | default: start

The alignment of the text.

Accepted values:
  • start
  • center
  • end

iconName enum

The name of the icon to display.

iconPosition enum | default: before

The position of the icon relative to the text.

Accepted values:
  • before
  • after

Examples

Levels

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading
This is a h6 heading 
- _bookshop_name: primitives/heading
  text: This is a h1 heading
  level: h1
- _bookshop_name: primitives/heading
  text: This is a h2 heading
  level: h2
- _bookshop_name: primitives/heading
  text: This is a h3 heading
  level: h3
- _bookshop_name: primitives/heading
  text: This is a h4 heading
  level: h4
- _bookshop_name: primitives/heading
  text: This is a h5 heading
  level: h5
- _bookshop_name: primitives/heading
  text: This is a h6 heading
  level: h6

Sizes

This is a xs h1 heading

This is a sm h1 heading

This is a md h1 heading

This is a lg h1 heading

This is a xl h1 heading

This is a 2xl h1 heading

This is a 3xl h1 heading

This is a 4xl h1 heading

This is a 5xl h1 heading

This is a 6xl h1 heading 

- _bookshop_name: primitives/heading
  text: This is a xs h1 heading
  level: h1
  size: xs
- _bookshop_name: primitives/heading
  text: This is a sm h1 heading
  level: h1
  size: sm
- _bookshop_name: primitives/heading
  text: This is a md h1 heading
  level: h1
  size: md
- _bookshop_name: primitives/heading
  text: This is a lg h1 heading
  level: h1
  size: lg
- _bookshop_name: primitives/heading
  text: This is a xl h1 heading
  level: h1
  size: xl
- _bookshop_name: primitives/heading
  text: This is a 2xl h1 heading
  level: h1
  size: 2xl
- _bookshop_name: primitives/heading
  text: This is a 3xl h1 heading
  level: h1
  size: 3xl
- _bookshop_name: primitives/heading
  text: This is a 4xl h1 heading
  level: h1
  size: 4xl
- _bookshop_name: primitives/heading
  text: This is a 5xl h1 heading
  level: h1
  size: 5xl
- _bookshop_name: primitives/heading
  text: This is a 6xl h1 heading
  level: h1
  size: 6xl

Align

Start aligned

Center aligned

End aligned 

- _bookshop_name: primitives/heading
  text: Start aligned
  level: h3
  align: start
- _bookshop_name: primitives/heading
  text: Center aligned
  level: h3
  align: center
- _bookshop_name: primitives/heading
  text: End aligned
  level: h3
  align: end

Icons

Unlock your potential

Everything you need 

- _bookshop_name: primitives/heading
  text: Unlock your potential
  level: h3
  iconName: briefcase
- _bookshop_name: primitives/heading
  text: Everything you need
  level: h3
  iconName: arrow-up-right
  iconPosition: after