Split
Allows content to be arranged in two columns.
---
block:
_bookshop_name: layouts/split
gap: null
reverse: null
position: null
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
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_name: elements/paragraph
inline_markdown: This is content for the split block
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
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_name: elements/paragraph
inline_markdown: This is content for the split block
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Properties
gapenum
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
positionenum
top |
|
center |
|
bottom |
reverseboolean
Switches first and last columns without having to touch the nested components
firstobject
distributionobject
typeenum
percentage |
|
fixed |
|
fluid |
fixed_widthinteger
percentage_widthenum
quarter |
|
third |
|
half |
|
two-thirds |
|
three-quarters |
min_widthnumeric
content_blockscomponent array
lastobject
distributionobject
typeenum
percentage |
|
fixed |
|
fluid |
fixed_widthinteger
percentage_widthenum
quarter |
|
third |
|
half |
|
two-thirds |
|
three-quarters |
min_widthnumeric
content_blockscomponent array
Examples
Split Types
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: null
first:
distribution:
type: percentage
fixed_width: null
percentage_width: quarter
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: One quarter split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: three-quarters
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Three quarter split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: null
first:
distribution:
type: percentage
fixed_width: null
percentage_width: third
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: One third split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: two-thirds
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Two third split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: null
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Half split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Half split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: null
first:
distribution:
type: fixed
fixed_width: 300
percentage_width: null
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
padding:
vertical: m
horizontal: m
margin:
top: null
bottom: null
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Fixed side
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: fluid
fixed_width: null
percentage_width: null
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Fluid side
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
min-width
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: null
first:
distribution:
type: percentage
fixed_width: null
percentage_width: quarter
min_width: 200
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: One quarter split, but won't get smaller than 200px
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: three-quarters
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Three quarter split
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Gap
---
block:
_bookshop_name: layouts/split
gap: 2xl
reverse: null
position: null
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Half split with 2xl gap
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: Half split with 2xl gap
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Position
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: top
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
This side is <br> really <br>really <br>really <br>really <br>
long to show how uneven columns behave.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: This side is really short.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: center
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
This side is <br> really <br>really <br>really <br>really <br>
long to show how uneven columns behave.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: This side is really short.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
---
block:
_bookshop_name: layouts/split
gap: s
reverse: null
position: bottom
first:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: accent
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side A
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: >-
This side is <br> really <br>really <br>really <br>really <br>
long to show how uneven columns behave.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
last:
distribution:
type: percentage
fixed_width: null
percentage_width: half
min_width: null
content_blocks:
- _bookshop_name: layouts/section
label: null
max_content_width: m
shape:
type: rounded
size: null
reverse: false
margin:
top: null
bottom: null
padding:
vertical: m
horizontal: m
background:
color: highlight
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
image:
src: null
alt: null
style: null
opacity: null
rounded: null
background:
horizontal_position: null
vertical_position: null
border:
border_width: null
border_type: null
border_color: null
content_blocks:
- _bookshop_name: elements/heading
inline_markdown: Side B
level: h2
size: null
weight: null
align: start
case: null
decoration: null
margin:
top: none
bottom: null
icon:
alt: null
name: null
color: null
background: null
position: null
- _bookshop_name: elements/paragraph
inline_markdown: This side is really short.
align: null
size: null
decoration: null
margin:
top: null
bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}