Picto (picto
)
A small block of content featuring a pictographic icon, headline, and body.
🔗 External documentation.
ID | Label | Description | Schema |
---|---|---|---|
image | Image | Picto image. | |
heading | Heading | Picto image. Plain text. | |
body | Body | A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs. | |
heading_level | Heading level |
|
id: picto
label: Picto
description: 'A small block of content featuring a pictographic icon, headline, and body. '
homepage: 'https://protocol.mozilla.org/components/detail/picto.html'
variants:
default:
id: default
label: Default
side:
id: side
label: Side
center:
id: center
label: Center
slots:
image:
id: image
label: Image
description: 'Picto image.'
heading:
id: heading
label: Heading
description: 'Picto image. Plain text.'
body:
id: body
label: Body
description: "A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs."
props:
heading_level:
id: heading_level
label: 'Heading level'
schema:
type: integer
enum:
- 2
- 3
- 4
- 5
- 6
examples:
preview:
id: preview
label: Preview
renderable:
'@component': picto
image:
'@element': img
width: 64
src: 'https://data.dilla.io/protocol_1/assets/image.svg'
heading: 'A headline with 30 characters'
body:
'@element': p
'@content': "A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs."
heading_level: 3
Default
(
default
)
A headline with 30 characters
A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.
Side
(
side
)
A headline with 30 characters
A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.
Center
(
center
)
A headline with 30 characters
A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.