Card layout (card_layout)
A layout class for displaying card components in different arrangements.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| cards | Cards | Renderable cards | |
| with_container | With container? |
|
id: card_layout
label: 'Card layout'
description: 'A layout class for displaying card components in different arrangements. '
group: Layout
homepage: 'https://protocol.mozilla.org/components/detail/card-layout--overview.html'
variants:
hero:
id: hero
label: 'Hero (Default)'
description: 'Sets up a five-card layout with one large hero card. Make sure to have one card component with large variant.'
half:
id: half
label: Half
description: 'Sets up a two-column layout so it’s best for even numbers of cards. Use medium sized cards if the container is wide, or small or extra-small cards in narrower containers.'
third:
id: third
label: Third
description: 'Sets up a three-column layout so cards should come in multiples of three to avoid empty spaces when cards wrap to new rows. At some medium breakpoints the layout will form two columns and an empty space may be unavoidable. This layout really works best with six cards so it avoids gaps at all widths (two rows of three or three rows of two).'
quarter:
id: quarter
label: Quarter
description: 'Sets up a four-column layout so cards should come in multiples of four to avoid empty spaces when cards wrap to new rows.'
slots:
cards:
id: cards
label: Cards
description: 'Renderable cards'
props:
with_container:
id: with_container
label: 'With container?'
schema:
type: boolean
default: true
examples:
preview:
id: preview
label: Preview
renderable:
'@component': card_layout
cards:
-
'@component': card
'@variant': large
image:
'@element': img
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC'
tag: 'Card tag'
title: 'This example headline has 40 characters'
desc: 'A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.'
meta: '6 hours ago'
cta: 'A short inline text cta'
link: '#'
heading_level: 2
-
'@component': card
image:
'@element': img
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC'
tag: 'Card tag'
title: 'This example headline has 40 characters'
desc: 'A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.'
meta: '6 hours ago'
cta: 'A short inline text cta'
link: '#'
heading_level: 2
-
'@component': card
image:
'@element': img
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC'
tag: 'Card tag'
title: 'This example headline has 40 characters'
desc: 'A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.'
meta: '6 hours ago'
cta: 'A short inline text cta'
link: '#'
heading_level: 2
-
'@component': card
image:
'@element': img
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC'
tag: 'Card tag'
title: 'This example headline has 40 characters'
desc: 'A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.'
meta: '6 hours ago'
cta: 'A short inline text cta'
link: '#'
heading_level: 2
Hero (Default)
(
hero
)
Sets up a five-card layout with one large hero card. Make sure to have one card component with large variant.
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Half
(
half
)
Sets up a two-column layout so it’s best for even numbers of cards. Use medium sized cards if the container is wide, or small or extra-small cards in narrower containers.
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Third
(
third
)
Sets up a three-column layout so cards should come in multiples of three to avoid empty spaces when cards wrap to new rows. At some medium breakpoints the layout will form two columns and an empty space may be unavoidable. This layout really works best with six cards so it avoids gaps at all widths (two rows of three or three rows of two).
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Quarter
(
quarter
)
Sets up a four-column layout so cards should come in multiples of four to avoid empty spaces when cards wrap to new rows.
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta
Card tag
This example headline has 40 characters
A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.
A short inline text cta