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
                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      
            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.

<section class="mzp-c-picto"> <div class="mzp-c-picto-image"> <img src="https://data.dilla.io/protocol_1/assets/image.svg" width="64" /></div> <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3> <div class="mzp-c-picto-body"> <p>A short description, just a sentence or two. Don&#x27;t use this component for long-form content; it&#x27;s only for blurbs.</p></div> </section>

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.

<div class="mzp-t-picto-side"> <section class="mzp-c-picto"> <div class="mzp-c-picto-image"> <img src="https://data.dilla.io/protocol_1/assets/image.svg" width="64" /></div> <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3> <div class="mzp-c-picto-body"> <p>A short description, just a sentence or two. Don&#x27;t use this component for long-form content; it&#x27;s only for blurbs.</p></div> </section> </div>

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.

<div class="mzp-t-picto-center"> <section class="mzp-c-picto"> <div class="mzp-c-picto-image"> <img src="https://data.dilla.io/protocol_1/assets/image.svg" width="64" /></div> <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3> <div class="mzp-c-picto-body"> <p>A short description, just a sentence or two. Don&#x27;t use this component for long-form content; it&#x27;s only for blurbs.</p></div> </section> </div>