Paragraph

Displays blocks of text for content sections with options for alignment and spacing.
---
block:
  _bookshop_name: elements/paragraph
  inline_markdown: This is a block of text with **bold** and *italic* text.
  options:
    align: null
    size: null
    decoration: null
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

inline_markdownstring

Content for the paragraph

optionsobject

Configuration options for the Paragraph

sizeenum

The font size of the text.

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

decorationenum

Text decoration style.

none
glow

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

alignenum

The text alignment.

start
center
end

Examples

Alignment

---
blocks:
  - _bookshop_name: elements/paragraph
    inline_markdown: Start
    options:
      align: start
      size: null
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: Center
    options:
      align: center
      size: null
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: End
    options:
      align: end
      size: null
      decoration: null
      margin:
        top: null
        bottom: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}

Sizes

---
blocks:
  - _bookshop_name: elements/paragraph
    inline_markdown: 2XL
    options:
      align: null
      size: 2xl
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: XL
    options:
      align: null
      size: xl
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: Large
    options:
      align: null
      size: l
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: Medium
    glow: null
    options:
      align: null
      size: m
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: Small
    glow: null
    options:
      align: null
      size: s
      decoration: null
      margin:
        top: null
        bottom: null
  - _bookshop_name: elements/paragraph
    inline_markdown: XS
    glow: null
    options:
      align: null
      size: xs
      decoration: null
      margin:
        top: null
        bottom: 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/paragraph
        inline_markdown: Glow on paragraph.
        options:
          align: null
          size: null
          decoration: glow
          margin:
            top: null
            bottom: null
    options:
      max_content_width: null
      margin:
        top: null
        bottom: null
      shape:
        type: null
        size: null
        reverse: null
      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: 1
            rounded: null
            horizontal_position: end
            vertical_position: center
            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/paragraph
        inline_markdown: Glow on opposite.
        options:
          align: null
          size: null
          decoration: glow
          margin:
            top: null
            bottom: 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
        color: highlight
        transforms:
          scale: null
          translate_x: null
          translate_y: null
          blur: null
          opacity: null
        image:
          src: null
          alt: null
          options:
            opacity: 1
            rounded: null
            horizontal_position: end
            vertical_position: center
            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 %}

Margin

---
blocks:
  - _bookshop_name: elements/paragraph
    inline_markdown: 2XL bottom margin
    options:
      align: null
      size: null
      decoration: null
      margin:
        top: null
        bottom: 2xl
  - _bookshop_name: elements/paragraph
    inline_markdown: No Margin
    options:
      align: null
      size: null
      decoration: null
      margin:
        top: none
        bottom: none
  - _bookshop_name: elements/paragraph
    inline_markdown: M Bottom Margin
    options:
      align: null
      size: null
      decoration: null
      margin:
        top: none
        bottom: m
  - _bookshop_name: elements/paragraph
    inline_markdown: Normal paragraph
    glow: null
    options:
      align: null
      size: null
      decoration: null
      margin:
        top: null
        bottom: null
---
{% for block in blocks %}
  {% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}