Heading

The main title or heading with levels (H1 to H6) to show hierarchy and structure for the page and sections.
---
block:
  _bookshop_name: elements/heading
  inline_markdown: Main Heading Component
  level: h2
  options:
    size: null
    weight: null
    case: null
    decoration: null
    margin:
      top: null
      bottom: null
    align: start
  icon:
    alt: null
    name: null
    options:
      color: null
      background: null
      position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

inline_markdownstring

The text content of the heading.

levelenum

The heading level.

h1
h2
h3
h4
h5
h6

iconobject

Adds an icon to the heading.

namestring

The name of the icon.

altstring

A text description of the icon.

optionsobject

Configuration options for the Divider

colorenum

The color of the icon.

font-color
red
orange
yellow
green
cyan
blue
purple
pink

backgroundcheckbox

Whether to have a background.

positionstring

Where to position the icon.

before Shows the icon before the label.
after Shows the icon after the label.

optionsobject

Configuration options for the Divider

sizeenum

The font size of the text.

xs
s
m
l
xl
2xl
3xl
4xl
5xl
6xl

weightenum

The font weight.

normal Normal font weight
bold Bold font weight

caseenum

The text case.

normal Exactly as its input
upper Uppercase text
lower Lowercase text
capitalize Capitalized text

alignenum

The text alignment.

start Aligns text to the start
center Centers the text
end Aligns text to the end

decorationenum

Text decoration style.

none No decoration on text
glow Applies a glow effect to the text
italic Italicizes the text
underline Underlines the text
alt-color Uses an alternative color for the heading

marginobject

The margin around the text.

topenum

The top margin size.

none
xs
s
m
l
xl
2xl

bottomenum

The bottom margin size.

none
xs
s
m
l
xl
2xl

Examples

Alignment

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: Start aligned
    level: h3
    options:
      size: null
      weight: null
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: start
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: Center aligned
    level: h3
    options:
      size: null
      weight: null
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: center
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: End aligned
    level: h3
    options:
      size: null
      weight: null
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: end
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Levels

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: This is a h1
    level: h1
    size: null
    weight: null
    case: null
    decoration: null
    align: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a h2
    level: h2
    size: null
    weight: null
    case: null
    decoration: null
    align: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a h3
    level: h3
    size: null
    weight: null
    case: null
    decoration: null
    align: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a h4
    level: h4
    size: null
    weight: null
    case: null
    decoration: null
    align: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a h5
    level: h5
    size: null
    weight: null
    case: null
    decoration: null
    align: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a h6
    level: h6
    size: null
    weight: null
    case: null
    decoration: null
    align: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Case

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: This is a uppercase heading
    level: h3
    options:
      size: null
      weight: null
      case: upper
      decoration: null
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a lowercase heading
    level: h3
    options:
      size: null
      weight: null
      case: lower
      decoration: null
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a capitalized heading
    level: h3
    options:
      size: null
      weight: null
      case: capitalize
      decoration: null
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Emphasis

---
block:
  _bookshop_name: elements/heading
  inline_markdown: We can _emphasis_ text
  level: h1
  options:
    size: null
    weight: null
    case: null
    decoration: null
    margin:
      top: null
      bottom: null
    align: null
  icon:
    alt: null
    name: null
    options:
      color: null
      background: null
      position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Icons

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: Unlock your potential
    level: h3
    options:
      size: null
      weight: null
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: center
    icon:
      alt: null
      name: briefcase
      options:
        color: blue
        background: muted
        position: before
  - _bookshop_name: elements/heading
    inline_markdown: Everything you need
    level: h3
    options:
      size: null
      weight: null
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: start
    icon:
      alt: null
      name: arrow-up-right
      options:
        color: font-color
        background: false
        position: after
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Font Styles

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: This is normal
    level: h2
    options:
      size: null
      weight: normal
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is bold
    level: h2
    options:
      size: null
      weight: bold
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is underlined
    level: h2
    options:
      size: null
      weight: bold
      case: null
      decoration: underline
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is italic
    level: h2
    options:
      size: null
      weight: bold
      case: null
      decoration: italic
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is alt-color
    level: h2
    options:
      size: null
      weight: bold
      case: null
      decoration: alt-color
      margin:
        top: null
        bottom: null
      align: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Glow

---
blocks:
  - _bookshop_name: layouts/section
    label: null
    link: null
    content_blocks:
      - _bookshop_name: elements/heading
        inline_markdown: Heading with glow
        level: h1
        options:
          size: null
          weight: null
          case: null
          decoration: glow
          margin:
            top: null
            bottom: null
          align: null
        icon:
          alt: null
          name: null
          options:
            color: null
            background: null
            position: null
    options:
      max_content_width: null
      margin:
        top: null
        bottom: null
      shape:
        type: null
        size: null
        reverse: false
      padding:
        vertical: m
        horizontal: m
      background:
        scheme: null
        shadow: null
        transforms:
          scale: null
          translate_x: null
          translate_y: null
          blur: null
          opacity: null
        color: highlight
        image:
          src: null
          alt: null
          options:
            opacity: null
            rounded: null
            horizontal_position: null
            vertical_position: null
            above_background: null
            repeat: false
            fixed: null
            fit: cover
      border:
        width: null
        color: null
        type: null
      gap: null
      reverse: null
      alignment:
        horizontal: center
        vertical: top
  - _bookshop_name: layouts/section
    label: null
    link: null
    content_blocks:
      - _bookshop_name: elements/heading
        inline_markdown: Glow on opposite
        level: h1
        options:
          size: null
          weight: null
          case: null
          decoration: glow
          margin:
            top: null
            bottom: null
          align: null
        icon:
          alt: null
          name: null
          options:
            color: null
            background: null
            position: null
    options:
      max_content_width: null
      margin:
        top: null
        bottom: null
      shape:
        type: null
        size: null
        reverse: false
      padding:
        vertical: m
        horizontal: m
      background:
        scheme: opposite
        shadow: null
        transforms:
          scale: null
          translate_x: null
          translate_y: null
          blur: null
          opacity: null
        color: highlight
        image:
          src: null
          alt: null
          options:
            opacity: null
            rounded: null
            horizontal_position: null
            vertical_position: null
            above_background: null
            repeat: false
            fixed: null
            fit: cover
      border:
        width: null
        color: null
        type: null
      gap: null
      reverse: null
      alignment:
        horizontal: center
        vertical: top
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Margins

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: XL Bottom Margin
    level: h3
    options:
      size: null
      weight: null
      align: null
      case: null
      decoration: null
      margin:
        top: none
        bottom: xl
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: No Margin
    level: h3
    options:
      size: null
      weight: bold
      align: null
      case: null
      decoration: null
      margin:
        top: none
        bottom: none
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: M Bottom Margin
    level: h3
    options:
      size: null
      weight: bold
      align: null
      case: null
      decoration: null
      margin:
        top: none
        bottom: m
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
  - _bookshop_name: elements/heading
    inline_markdown: Another heading
    level: h3
    options:
      size: null
      weight: bold
      align: null
      case: null
      decoration: null
      margin:
        top: null
        bottom: null
    icon:
      alt: null
      name: null
      options:
        color: null
        background: null
        position: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}