Basic Footer Layout Navigation Others

Call out (call_out)

A vertical call out section containing a logo, headline, description and a call-to-action button.

🔗 External documentation.

ID Label Description Schema
title Title Call Out title.
desc Description Call Out description.
content Content Call Out free renderable content
heading_level Heading level 
                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      
            id: call_out
label: 'Call out'
description: 'A vertical call out section containing a logo, headline, description and a call-to-action button. '
homepage: 'https://protocol.mozilla.org/components/detail/call-out.html'
variants:
    default:
        id: default
        label: Default
    compact:
        id: compact
        label: Compact
slots:
    title:
        id: title
        label: Title
        description: 'Call Out title.'
    desc:
        id: desc
        label: Description
        description: 'Call Out description.'
    content:
        id: content
        label: Content
        description: 'Call Out free renderable content'
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': call_out
            title: 'Example headline with 35 characters'
            desc:
                -
                    '@template': '<p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p>'
            content:
                -
                    '@component': button
                    '@variant': product
                    label: 'Download Firefox'
                -
                    '@component': button
                    label: 'Firefox Privacy Notice'
            heading_level: 3

Default ( default )

Example headline with 35 characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Download Firefox Firefox Privacy Notice
<section class="mzp-c-call-out"> <div class="mzp-l-content "> <h3 class="mzp-c-call-out-title">Example headline with 35 characters</h3> <p class="mzp-c-call-out-desc"> <p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p></p> <span class="mzp-t-product mzp-t- mzp-c-button">Download Firefox</span> <span class="mzp-t- mzp-c-button">Firefox Privacy Notice</span> </div> </section>

Compact ( compact )

Example headline with 35 characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Download Firefox Firefox Privacy Notice
<section class="mzp-c-call-out-compact"> <div class="mzp-l-content "> <h3 class="mzp-c-call-out-title">Example headline with 35 characters</h3> <p class="mzp-c-call-out-desc"> <p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p></p> <span class="mzp-t-product mzp-t- mzp-c-button">Download Firefox</span> <span class="mzp-t- mzp-c-button">Firefox Privacy Notice</span> </div> </section>