Split

Arranges content in two columns with responsive breakpoints.

Side A

This is content for the side A

Side B

This is content for the side B

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: primitives/rich-text
    text: |-
      ## Side A

      This is content for the side A
secondColumnContentBlocks:
  - _bookshop_name: primitives/rich-text
    text: |-
      ## Side B

      This is content for the side B
distributionMode: half
fixedWidth: null
verticalAlignment: top
reverse: false

Properties

firstColumnContentBlocks array | default: array

Array of content blocks to render in the first column.

secondColumnContentBlocks array | default: array

Array of content blocks to render in the second column.

distributionMode enum | default: half

Predefined distribution mode for both columns. On mobile, columns stack vertically.

Accepted values:

quarter-three-quarters
third-two-thirds
half
two-thirds-third
three-quarters-quarter
fixed-flexible
flexible-fixed

fixedWidth number

Fixed width in pixels (used when distribution mode includes 'fixed').

verticalAlignment enum | default: top

Vertical alignment of the columns.

Accepted values:

top
center
bottom
stretch

reverse boolean | default: false

Swaps the order of the columns.

Examples

Mode

Quarter Column

This column takes up 25% of the available space.

Three Quarters Column

This column takes up 75% of the available space.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Quarter Column

          This column takes up 25% of the available space.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Three Quarters Column

          This column takes up 75% of the available space.
distributionMode: quarter-three-quarters
fixedWidth: null
verticalAlignment: top
reverse: false

Third Column

This column takes up 33% of the available space.

Two Thirds Column

This column takes up 66% of the available space.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Third Column

          This column takes up 33% of the available space.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Two Thirds Column

          This column takes up 66% of the available space.
distributionMode: third-two-thirds
fixedWidth: null
verticalAlignment: top
reverse: false

Half Column

This column takes up 50% of the available space.

Half Column

This column also takes up 50% of the available space.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Half Column

          This column takes up 50% of the available space.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Half Column

          This column also takes up 50% of the available space.
distributionMode: half
fixedWidth: null
verticalAlignment: top
reverse: false

Two Thirds Column

This column takes up 66% of the available space.

Third Column

This column takes up 33% of the available space.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Two Thirds Column

          This column takes up 66% of the available space.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Third Column

          This column takes up 33% of the available space.
distributionMode: two-thirds-third
fixedWidth: null
verticalAlignment: top
reverse: false

Three Quarters Column

This column takes up 75% of the available space.

Quarter Column

This column takes up 25% of the available space.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Three Quarters Column

          This column takes up 75% of the available space.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Quarter Column

          This column takes up 25% of the available space.
distributionMode: three-quarters-quarter
fixedWidth: null
verticalAlignment: top
reverse: false

Fixed Width Column

This column has a fixed width of 300px.

Flexible Column

This column takes up the remaining space.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Fixed Width Column

          This column has a fixed width of 300px.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Flexible Column

          This column takes up the remaining space.
distributionMode: fixed-flexible
fixedWidth: 300
verticalAlignment: top
reverse: false

Flexible Column

This column takes up the available space.

Fixed Width Column

This column has a fixed width of 300px.

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Flexible Column

          This column takes up the available space.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Fixed Width Column

          This column has a fixed width of 300px.
distributionMode: flexible-fixed
fixedWidth: 300
verticalAlignment: top
reverse: false

Vertical Alignment

Side A

This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And even more to really drive the point home.

Side B

This is content for the side B

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side A

          This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

          Here's even more text to help illustrate the point we're trying to make with this demonstration.

          And even more to really drive the point home.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
distributionMode: half
fixedWidth: null
verticalAlignment: top
reverse: false

Side A

This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And even more to really drive the point home.

Side B

This is content for the side B

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side A

          This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

          Here's even more text to help illustrate the point we're trying to make with this demonstration.

          And even more to really drive the point home.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
distributionMode: half
fixedWidth: null
verticalAlignment: center
reverse: false

Side A

This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And even more to really drive the point home.

Side B

This is content for the side B

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side A

          This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

          Here's even more text to help illustrate the point we're trying to make with this demonstration.

          And even more to really drive the point home.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
distributionMode: half
fixedWidth: null
verticalAlignment: bottom
reverse: false

Side A

This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

Here's even more text to help illustrate the point we're trying to make with this demonstration.

And even more to really drive the point home.

Side B

This is content for the side B

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side A

          This is content for the side A. It's really long to make this column longer so we can highlight how the alignment works.

          Here's even more text to help illustrate the point we're trying to make with this demonstration.

          And even more to really drive the point home.
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
distributionMode: half
fixedWidth: null
verticalAlignment: stretch
reverse: false

Reverse

Side B

This is content for the side B

Side A

This is content for the side A

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side A

          This is content for the side A
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
distributionMode: third-two-thirds
fixedWidth: null
verticalAlignment: top
reverse: true

Side A

This is content for the side A

Side B

This is content for the side B

_bookshop_name: wrappers/split
firstColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: accent
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side A

          This is content for the side A
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
distributionMode: third-two-thirds
fixedWidth: null
verticalAlignment: top
reverse: false