Skip to main content

Rich heading

A rich heading is used for branded pages, or to bring prominence to a category that the page content falls under.

Example

Xbox design labs controller

Xbox Design Lab

You can now personalize your Xbox Wireless Controller with over 8 million possible color combinations. You design it. We build it.

Rich heading with a logo and accent color on a dark theme

Best practices

Use rich headings for pages that contain a very focused set of information represented by the category label or logo. For example, a rich heading calling out the Dell brand that tells the users that the laptops on the page are all from Dell.

Do

  • Use short, concise labels to prevent collision with the image or to maximize the amount of space available for responsive viewports.
  • Be mindful of the gradient cut-off when choosing imagery.

Don’t

  • Avoid using rich heading when only a small portion of the page is related to the logo or category label.
  • Don't use images where the point of interest will be cut off by the gradient at responsive sizes.

Also known as

Brand bar
Category header

Development

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

Code and preview

Image

Placeholder with dark grey background

Heading

Paragraph

<div data-grid="col-12" class="m-rich-heading f-image">
    <picture class="c-image">
        <source srcset="http://placehold.it/400x200/2e2e2e/666666" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/400x200/2e2e2e/666666" media="(min-width:1400px)">
        <source srcset="http://placehold.it/400x200/2e2e2e/666666" media="(min-width:1084px)">
        <source srcset="http://placehold.it/400x200/2e2e2e/666666" media="(min-width:768px)">
        <source srcset="http://placehold.it/400x200/2e2e2e/666666" media="(min-width:540px)">
        <source srcset="http://placehold.it/400x200/2e2e2e/666666" media="(min-width:0)">
        <img srcset="http://placehold.it/400x200/2e2e2e/666666" src="http://placehold.it/400x200/2e2e2e/666666" alt="Placeholder with dark grey background">
    </picture>
    <div>
        <h3 class="c-heading">Heading</h3>
        <p class="c-paragraph-3">Paragraph</p>
    </div>
</div>

Logo, dark theme & accent color

Heading

Paragraph

<div data-grid="col-12" class="m-rich-heading theme-dark f-accent">
    <div class="c-logo">
        <img itemprop="logo" class="c-image" src="http://placehold.it/200x130" alt="Placeholder logo image" itemscope itemtype="http://schema.org/ImageObject">
        <span>Microsoft</span>
    </div>
    <div>
        <h3 class="c-heading">Heading</h3>
        <p class="c-paragraph-3">Paragraph</p>
    </div>
</div>

Logo, dark theme, and neutral color

Heading

Paragraph

<div data-grid="col-12" class="m-rich-heading theme-dark f-brand-neutral-80">
    <div class="c-logo">
        <img itemprop="logo" class="c-image" src="http://placehold.it/200x130" alt="Placeholder logo image" itemscope itemtype="http://schema.org/ImageObject">
        <span>Microsoft</span>
    </div>
    <div>
        <h3 class="c-heading">Heading</h3>
        <p class="c-paragraph-3">Paragraph</p>
    </div>
</div>

Logo, light theme, and neutral color

Heading

Paragraph

<div data-grid="col-12" class="m-rich-heading theme-light f-brand-neutral-10">
    <div class="c-logo">
        <img itemprop="logo" class="c-image" src="http://placehold.it/200x130" alt="Placeholder logo image" itemscope itemtype="http://schema.org/ImageObject">
        <span>Microsoft</span>
    </div>
    <div>
        <h3 class="c-heading">Heading</h3>
        <p class="c-paragraph-3">Paragraph</p>
    </div>
</div>