Skip to main content

Banner

A banner highlights key aspects of a product or service through the use of short, concise text. It can also drive users toward a focused action such as to learn more or to order a product.

Example

Heading text for heading, caption, and call to action

Caption text for banner with heading, caption, and call to action.

CALL TO ACTION
Banner with a heading, caption and call to action on a default theme

Best practices

A banner is best used as a callout in the storytelling flow. Use it to break up the rhythm as the user goes down the page and to highlight short concise aspects of the product or service.

Do

  • Keep the text concise and focused.
  • Be mindful that these have a punctuation effect in the rhythm of the storytelling.
  • Keep the banner content contextual to the rest of the page.

Don’t

  • Use several banners together as a group. The effect of the callout can be diminished when several of them are stacked.

Also known as

Callout
Pull quote

Related

Call to action
Caption
Heading
Paragraph
Subheading

Development

  • Schema definition: The banner schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Heading and caption

Heading text for banner with heading and caption

Caption text for banner with heading and caption.

<div data-grid="col-12" class="m-banner">
    <h2 class="c-heading-3">Heading text for banner with heading and caption</h2>
    <p class="c-caption-2">Caption text for banner with heading and caption.</p>
</div>

Heading and paragraph

Heading text for banner with heading and caption

Paragraph text for banner with heading. MWF guidance is to keep paragraph content to as few lines as possible. This length represents a comfortable amount.

<div data-grid="col-12" class="m-banner">
    <h2 class="c-heading-3">Heading text for banner with heading and caption</h2>
    <p class="c-paragraph-1">Paragraph text for banner with heading. MWF guidance is to keep paragraph content to as few lines as possible. This length represents a comfortable amount.</p>
</div>

Heading, caption, and logo

Heading text for banner with heading, caption, and logo

Caption text for banner with heading, caption, and logo.

<div data-grid="col-12" class="m-banner">
    <a href="#" class="c-logo" aria-label="Label">
        <img class="c-image" src="http://placehold.it/150x40" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
        <span>Company</span>
    </a>
    <h2 class="c-heading-3">Heading text for banner with heading, caption, and logo</h2>
    <p class="c-caption-2">Caption text for banner with heading, caption, and logo.</p>
</div>

Heading and call to action

Heading text for banner with heading and call to action

CALL TO ACTION
<div data-grid="col-12" class="m-banner">
    <h2 class="c-heading-3">Heading text for banner with heading and call to action</h2>
    <a href="#" class="c-call-to-action c-glyph">
        <span>CALL TO ACTION</span>
    </a>
</div>

Heading, logo, and call to action

Heading text for heading, logo, and call to action

CALL TO ACTION
<div data-grid="col-12" class="m-banner">
    <a href="#" class="c-logo" aria-label="Label">
        <img class="c-image" src="http://placehold.it/150x40" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
        <span>Company</span>
    </a>
    <h2 class="c-heading-3">Heading text for heading, logo, and call to action</h2>
    <a href="#" class="c-call-to-action c-glyph">
        <span>CALL TO ACTION</span>
    </a>
</div>

Heading, caption, and call to action

Heading text for heading, caption, and call to action

Caption text for banner with heading, caption, and call to action.

CALL TO ACTION
<div data-grid="col-12" class="m-banner">
    <h2 class="c-heading-3">Heading text for heading, caption, and call to action</h2>
    <p class="c-caption-2">Caption text for banner with heading, caption, and call to action.</p>
    <a href="#" class="c-call-to-action c-glyph">
        <span>CALL TO ACTION</span>
    </a>
</div>

Quote text for banner with text and caption.

"Quote text for banner with text and caption."

Heading text for banner with heading and caption.

<div data-grid="col-12" class="m-banner">
    <blockquote>&quot;Quote text for banner with text and caption.&quot;</blockquote>
    <p class="c-caption-2">Heading text for banner with heading and caption.</p>
</div>

Quote text for banner with text, caption, and image.

Placeholder with grey background and dimension watermark without any imagery
"Quote text for banner with text, caption, and image."

Caption text for banner with text, caption, and image.

<div data-grid="col-12" class="m-banner">
    <img class="c-image" src="http://placehold.it/150x40/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    <blockquote>&quot;Quote text for banner with text, caption, and image.&quot;</blockquote>
    <p class="c-caption-2">Caption text for banner with text, caption, and image.</p>
</div>

Left aligned banner module with a heading and caption

Heading text for heading, logo, and call to action

CALL TO ACTION
<div data-grid="col-12" class="m-banner f-align-left">
    <a href="#" class="c-logo" aria-label="Label">
        <img class="c-image" src="http://placehold.it/150x40" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
        <span>Company</span>
    </a>
    <h2 class="c-heading-3">Heading text for heading, logo, and call to action</h2>
    <a href="#" class="c-call-to-action c-glyph">
        <span>CALL TO ACTION</span>
    </a>
</div>