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
  size: null
  weight: null
  align: start
  case: null
  decoration: null
  margin:
    top: null
    bottom: null
  icon:
    alt: null
    name: null
    color: null
    background: null
    position: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

levelenum

The heading level.

h1
h2
h3
h4
h5
h6

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

iconobject

Adds an icon to the heading.

namestring

The name of the icon.

altstring

A text description of the icon.

colorenum

The color of the icon.

font-color
red
orange
yellow
green
cyan
blue
purple
pink

backgroundboolean

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.

Examples

Alignment

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

Levels

---
blocks:
  - 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
      color: null
      background: null
      position: null
  - 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
      color: null
      background: null
      position: null
  - 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
      color: null
      background: null
      position: null
  - 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
      color: null
      background: null
      position: null
  - 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
      color: null
      background: null
      position: null
  - 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
      color: null
      background: null
      position: null
---
{% for block in blocks %}
  {% bookshop "elements/heading" bind: block %}
{% endfor %}

Case

---
blocks:
  - _bookshop_name: elements/heading
    inline_markdown: This is a uppercase heading
    level: h3
    size: null
    weight: null
    decoration: null
    align: null
    case: upper
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      color: null
      background: null
      position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a lowercase heading
    level: h3
    size: null
    weight: null
    decoration: null
    align: null
    case: lower
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      color: null
      background: null
      position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is a capitalized heading
    level: h3
    size: null
    weight: null
    decoration: null
    align: null
    case: capitalize
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      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
  size: null
  weight: null
  decoration: null
  align: null
  case: null
  margin:
    top: null
    bottom: null
  icon:
    alt: null
    name: null
    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
    size: null
    weight: null
    decoration: null
    align: center
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: briefcase
      color: blue
      background: muted
      position: before
  - _bookshop_name: elements/heading
    inline_markdown: Everything you need
    level: h3
    size: null
    weight: null
    decoration: null
    align: start
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: arrow-up-right
      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
    size: null
    weight: normal
    decoration: null
    align: null
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      color: null
      background: null
      position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is bold
    level: h2
    size: null
    weight: bold
    decoration: null
    align: null
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      color: null
      background: null
      position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is underlined
    level: h2
    size: null
    weight: bold
    decoration: underline
    align: null
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      color: null
      background: null
      position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is italic
    level: h2
    size: null
    weight: bold
    decoration: italic
    align: null
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      color: null
      background: null
      position: null
  - _bookshop_name: elements/heading
    inline_markdown: This is alt-color
    level: h2
    size: null
    weight: bold
    decoration: alt-color
    align: null
    case: null
    margin:
      top: null
      bottom: null
    icon:
      alt: null
      name: null
      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
    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
        scale_x: null
        scale_y: null
        rotate: null
        skew_x: null
        skew_y: null
        translate_x: null
        translate_y: null
        blur: null
        opacity: null
      color: highlight
      image:
        src: null
        alt: null
        style:
          opacity: null
          rounded: null
        background:
          horizontal_position: null
          vertical_position: null
          repeat: false
          fixed: null
    border:
      border_width: null
      border_type: null
      border_color: null
    content_blocks:
      - _bookshop_name: elements/heading
        inline_markdown: Heading with glow
        level: h1
        size: null
        weight: null
        case: null
        decoration: glow
        align: null
        margin:
          top: null
          bottom: null
        icon:
          alt: null
          name: null
          color: null
          background: null
          position: null
  - _bookshop_name: layouts/section
    label: 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
        scale_x: null
        scale_y: null
        rotate: null
        skew_x: null
        skew_y: null
        translate_x: null
        translate_y: null
        blur: null
        opacity: null
      color: highlight
      image:
        src: null
        alt: null
        style:
          opacity: null
          rounded: null
        background:
          horizontal_position: null
          vertical_position: null
          repeat: false
          fixed: null
    border:
      border_width: null
      border_type: null
      border_color: null
    content_blocks:
      - _bookshop_name: elements/heading
        inline_markdown: Glow on opposite
        level: h1
        size: null
        weight: null
        case: null
        decoration: glow
        align: null
        margin:
          top: null
          bottom: null
        icon:
          alt: null
          name: null
          color: null
          background: null
          position: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Margins

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