Split (split)
A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It's highly customizable with a lot of optional classes to support different layout variations.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| body | Body | Split body | |
| media | Media | Split media | |
| no_space | No space? |
|
id: split
label: Split
description: 'A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It''s highly customizable with a lot of optional classes to support different layout variations. '
homepage: 'https://protocol.mozilla.org/components/detail/split--default.html'
variants:
default:
id: default
label: Default
reversed:
id: reversed
label: Reversed
description: 'Orient the body on the right and media on the left (the reverse of the default). It’s automatically reversed in Right-To-Left (RTL) languages.'
body_wide:
id: body_wide
label: 'Wide body'
description: 'Make the body 2/3rds width and the media 1/3rd.'
body_wide__reversed:
id: body_wide__reversed
label: 'Body wide reversed'
body_narrow:
id: body_narrow
label: 'Body narrow'
body_narrow__reversed:
id: body_narrow__reversed
label: 'Body narrow reversed'
pop_top:
id: pop_top
label: 'Pop top'
description: 'Huge top padding.'
pop_top__reversed:
id: pop_top__reversed
label: 'Pop top reversed'
description: 'Huge top padding, reversed.'
pop_bottom:
id: pop_bottom
label: 'Pop bottom'
description: 'Huge bottom padding.'
pop_bottom__reversed:
id: pop_bottom__reversed
label: 'Pop bottom reversed'
description: 'Huge bottom padding, reversed.'
slots:
body:
id: body
label: Body
description: 'Split body'
media:
id: media
label: Media
description: 'Split media'
props:
no_space:
id: no_space
label: 'No space?'
schema:
type: boolean
examples:
preview:
id: preview
label: Preview
renderable:
'@component': split
body:
-
'@element': h1
'@content': 'A Headline With 30 Characters'
'@styles':
- mzp-u-title-md
-
'@template': "<p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p>"
media:
'@element': img
src: 'https://data.dilla.io/protocol_1/assets/static/img/split/devices.png'
Default
(
default
)
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Reversed
(
reversed
)
Orient the body on the right and media on the left (the reverse of the default). It’s automatically reversed in Right-To-Left (RTL) languages.
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Wide body
(
body_wide
)
Make the body 2/3rds width and the media 1/3rd.
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Body wide reversed
(
body_wide__reversed
)
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Body narrow
(
body_narrow
)
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Body narrow reversed
(
body_narrow__reversed
)
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Pop top
(
pop_top
)
Huge top padding.
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Pop top reversed
(
pop_top__reversed
)
Huge top padding, reversed.
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Pop bottom
(
pop_bottom
)
Huge bottom padding.
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
Pop bottom reversed
(
pop_bottom__reversed
)
Huge bottom padding, reversed.
A Headline With 30 Characters
A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.