Card (card)
A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| image | Image | Card image. | |
| tag | Tag | Card tag, just one or two words, sometimes with an icon, above the title. Plain text. | |
| title | Title | Card title. Plain text. One or two lines (about 50 characters max) | |
| desc | Description | Card description. Plain text. Two or three lines (about 150 characters max) | |
| meta | Meta | Card meta. Plain text. | |
| cta | CTA | Card CTA. Plain text. | |
| link | Block link | URL of a Web link, which is wrapping the card |
|
| heading_level | Heading level |
|
|
| aspect | Aspect ratio |
|
id: card
label: Card
description: 'A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link. '
homepage: 'https://protocol.mozilla.org/components/detail/card.html'
variants:
extra_small:
id: extra_small
label: 'Extra small'
small:
id: small
label: 'Small (default)'
medium:
id: medium
label: Medium
large:
id: large
label: Large
slots:
image:
id: image
label: Image
description: 'Card image.'
tag:
id: tag
label: Tag
description: 'Card tag, just one or two words, sometimes with an icon, above the title. Plain text.'
title:
id: title
label: Title
description: 'Card title. Plain text. One or two lines (about 50 characters max)'
desc:
id: desc
label: Description
description: 'Card description. Plain text. Two or three lines (about 150 characters max)'
meta:
id: meta
label: Meta
description: 'Card meta. Plain text.'
cta:
id: cta
label: CTA
description: 'Card CTA. Plain text.'
props:
link:
id: link
label: 'Block link'
description: 'URL of a Web link, which is wrapping the card'
schema:
type: string
format: uri-reference
heading_level:
id: heading_level
label: 'Heading level'
schema:
type: integer
enum:
- 2
- 3
- 4
- 5
- 6
aspect:
id: aspect
label: 'Aspect ratio'
schema:
type: string
enum:
1: 1-1
2: 3-2
3: 16-9
examples:
preview:
id: preview
label: Preview
renderable:
'@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
