Billboard (billboard)

A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens.

🔗 External documentation.

                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      

            id: billboard
label: Billboard
description: 'A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens. '
homepage: 'https://protocol.mozilla.org/components/detail/billboard.html'
variants:
    right:
        id: right
        label: 'Right (Default)'
    left:
        id: left
        label: Left
slots:
    image:
        id: image
        label: Image
        description: 'Billboard image.'
    title:
        id: title
        label: Title
        description: 'Billboard title.'
    desc:
        id: desc
        label: Description
        description: 'Billboard description.'
    cta_link:
        id: cta_link
        label: 'CTA link'
        description: 'Billboard CTA link'
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': billboard
            image:
                '@element': img
                src: 'https://data.dilla.io/protocol_1/assets/billboard-image.png'
            title: 'Example headline with 35 characters'
            desc: 'A description with a maximum of 100 characters. That usually means only one or two sentences.'
            cta_link:
                '@element': a
                '@content': 'Learn more about us'
                href: '#'
            heading_level: 3