Split

Arranges content in two columns.

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
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: primitives/rich-text
    text: |-
      ## Side B

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

Properties

firstColumnContentBlocks array | default: array

Array of content blocks to render in the first column.

firstColumnMinWidth number

Minimum width in pixels for the first column.

secondColumnContentBlocks array | default: array

Array of content blocks to render in the second column.

secondColumnMinWidth number

Minimum width in pixels for the second column.

distributionMode enum | default: half

Predefined distribution mode for both columns.

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.
firstColumnMinWidth: null
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.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
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.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
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.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
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.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
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.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Flexible Column

          This column takes up the remaining space.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
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.
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
secondColumnMinWidth: null
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.
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

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

Minimum Width

First Column

This column will take up the available space and can shrink as needed.

Second Column

This column has a minimum width of 400px, so it will jump to a new line if it gets below that.

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

          This column will take up the available space and can shrink as needed.
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Second Column

          This column has a minimum width of 400px, so it will jump to a new line if it gets below that.
secondColumnMinWidth: 400
distributionMode: third-two-thirds
fixedWidth: null
verticalAlignment: top
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
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

          This is content for the side B
secondColumnMinWidth: null
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
firstColumnMinWidth: null
secondColumnContentBlocks:
  - _bookshop_name: wrappers/container
    backgroundColor: highlight
    contentBlocks:
      - _bookshop_name: primitives/rich-text
        text: |-
          ## Side B

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