Skip to main content

Highlight feature

Highlight Features are a variation of a feature module that allows a full bleed image and a card inside of it, eliminating text accessibility issues over busy images.

Example

Image of the game the division

When everything collapses, your mission begins

A devastating pandemic sweeps through New York City, and basic services fail. In only days, without food or water, society collapses into chaos. The Division, a classified unit of self-supported tactical agents, is activated.

LEARN MORE

Best practices

Use highlight feature to call out one or more points of a Microsoft product or service. This module is recommended for use when a feature requires a full-bleed image and has less text content than a regular feature. They should be used further down the page and the call to action typically lead to either a page, where more info about an specific item or service is being showcased.

Do

  • Place the highlight feature lower down the page.
  • When choosing an image for this module, keep in mind the location (left or right side) of the card over it. The image focus point should not get covered with the card.
  • The highlight feature card requires a minimum of heading and paragraph but can also accommodate a small image, icon and call to action.
  • The size of the card does not get adjusted with the content. Limit the heading to a maximum of three lines and the paragraph to 6 lines.
  • The highlight feature card background can only be black when using the alt theme stylesheet.

Don’t

  • Don't replace the hero at the top of the page with a highlight feature.
  • Don’t stack highlight feature, instead combine them with other modules to enhance the visual rhythm of the page and create visual interest.
  • Don't use too much text on the highlight feature card. Focus the ideas and if needed, use a call to action to go to another page where the idea is unpacked with greater depth.

Also known as

Product spotlight
Feature with card

Related

Feature
Heading
Image
Paragraph
Call to action

Options

  • Lean: Adding a class of f-lean to the highlight feature will explicitly reset top padding to 0.

Specifications

Browser support IE10+, Edge, Safari, Firefox, and Chrome

Development

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

Code and preview

Highlight feature - left aligned

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CALL TO ACTION
<section data-grid="col-12" class="m-highlight-feature f-align-left" itemscope itemtype="https://schema.org/Product">
    <picture class="c-image">
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1259x472" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472" src="http://placehold.it/1259x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#"
            class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Highlight feature - right aligned

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CALL TO ACTION
<section data-grid="col-12" class="m-highlight-feature f-align-right" itemscope itemtype="https://schema.org/Product">
    <picture class="c-image">
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1259x472" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472" src="http://placehold.it/1259x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#"
            class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Highlight feature - left aligned with logo

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

CALL TO ACTION
<section data-grid="col-12" class="m-highlight-feature f-align-left" itemscope itemtype="https://schema.org/Product">
    <picture class="c-image">
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1259x472" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472" src="http://placehold.it/1259x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <a href="#" class="c-logo" itemprop="url" aria-label="Microsoft corp.">
            <img itemprop="logo" class="c-image" src="http://placehold.it/120x36/555555" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>Microsoft</span>
        </a>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Highlight feature - right aligned with logo

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

CALL TO ACTION
<section data-grid="col-12" class="m-highlight-feature f-align-right" itemscope itemtype="https://schema.org/Product">
    <picture class="c-image">
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1259x472" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472" src="http://placehold.it/1259x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <a href="#" class="c-logo" itemprop="url" aria-label="Microsoft corp.">
            <img itemprop="logo" class="c-image" src="http://placehold.it/120x36/555555" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>Microsoft</span>
        </a>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>