Skip to main content

Feature

Features are used to call out one or more key highlights about a product or service. They can be stacked for greater storytelling in a page flow. Features can be prominent parts of the page, but are not meant to replace heroes.

Example

Hololens

Power and grace

Containing more computing power than the average laptop, Microsoft HoloLens is passively cooled without fans. With no wires, external cameras, or phone or PC connection required, you can move freely and untethered.

BUY HOLOLENS NOW
Feature with a left layout on a light theme

Best practices

Use feature as a way of highlighting one or more points of a Microsoft product or service. They are best used further down on the page when the user wants to see greater detail about the product that the page is showcasing. Their call to actions typically lead to either a marketing page, where they can learn more about the specific item being showcased, or to a product detail page, where they can buy the product.

Do

  • Place the feature lower down the page.
  • When stacking features, alternate between the different image alignments (left, right, center) to add visual appeal.
  • The heading can take up the entire callout region or, if paired with a paragraph, the heading can span up to three lines.
  • The paragraph can allow for much longer, and more detailed text than in hero. use only one or two paragraphs of text.
  • Use engaging images and content.

Don’t

  • Don't replace the hero at the top of the page with a feature.
  • Don't use too much text. 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

Callout
Product spotlights

Related

Call to action
Heading
Image
Paragraph
Subheading

Options

  • Align Right: Add a f-align-right class name to layout content to the right of the image.

  • Align Center: Add a f-align-center class name to layout content to the center bottom of the image.

  • Align Left: Add a f-align-left class name to layout content to the left of the image.

  • Image Priority: Add a f-image-priority class to left and right aligned features for a more prominent image and less text.

  • Badge: Add this component above the heading for left or right layouts.

  • Logo: Add this component above the heading for left, right and center layouts.

  • Set Ratio: Add a f-set-ratio class to set the ratio to 16x9.

  • Call-to-action styling: Feature supports light weight call-to-action by default, to change it to a different style you can add the following class on the call-to-action.

    • `f-primary` = blue button with white text
    • `f-secondary` = grey background with black text

    Per design requirements, if you have more than two call to actions next to each other, an the first is a standard, or `f-primary` the second should either be the `lightweight`, or the default Feature Module CTA or the `f-secondary` visual option.

Use the f-background-* classes to style the background color of a feature module, by default no background color is set. The table below shows possible options:

Class Color
.f-background-neutral-10
neutral-10
.f-background-neutral-20
neutral-20
.f-background-neutral-30
neutral-30
.f-background-neutral-45
neutral-45
.f-background-neutral-55
neutral-55
.f-background-neutral-65
neutral-65
.f-background-neutral-75
neutral-75
.f-background-neutral-80
neutral-80
.f-background-neutral-90
neutral-90
.f-background-neutral-100
neutral-100
.f-background-accent
accent

Development

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

Code and preview

Left align

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

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

CALL TO ACTION
<section class="m-feature f-align-left">
    <picture>
        <source srcset="http://placehold.it/800x450" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/630x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/630x472" src="http://placehold.it/630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <div class="c-logo">
            <img class="c-image" src="http://placehold.it/150x50" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>logo-image</span>
        </div>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Left align with background-color option

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Paragraph text. 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 class="m-feature f-align-left f-background-neutral-80">
    <picture>
        <source srcset="http://placehold.it/800x450" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/630x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/630x472" src="http://placehold.it/630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Paragraph text. 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>

Left align with set ratio option

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

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

CALL TO ACTION
<section class="m-feature f-align-left f-set-ratio">
    <picture>
        <source srcset="http://placehold.it/800x450" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/630x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/630x472" src="http://placehold.it/630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <div class="c-logo">
            <img class="c-image" src="http://placehold.it/150x50" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>logo-image</span>
        </div>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Center align

Placeholder with grey background and dimension watermark without any imagery

Heading

Paragraph text. 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 class="m-feature f-align-center">
    <picture>
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x471" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x471" src="http://placehold.it/1259x471" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div class="c-logo">
            <img class="c-image" src="http://placehold.it/150x50" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>logo-image</span>
        </div>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Paragraph text. 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>

Right align

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

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

CALL TO ACTION
<section class="m-feature f-align-right">
    <picture>
        <source srcset="http://placehold.it/800x450" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/630x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/630x472" src="http://placehold.it/630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <div class="c-logo">
            <img class="c-image" src="http://placehold.it/150x50" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>logo-image</span>
        </div>
        <h2 class="c-heading">Heading</h2>
        <p class="c-paragraph">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Left align with multiple calls to action

Placeholder with grey background and dimension watermark without any imagery
BADGE

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 CALL TO ACTION
<section class="m-feature f-align-left">
    <picture>
        <source srcset="http://placehold.it/800x450" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/630x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/630x472" src="http://placehold.it/630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <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>
        <div class="c-group">
            <a href="#" class="c-call-to-action c-glyph">
                <span>CALL TO ACTION</span>
            </a>
            <a href="#" class="c-call-to-action c-glyph">
                <span>CALL TO ACTION</span>
            </a>
        </div>
    </div>
</section>

Left align with video

BADGE

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.

CALL TO ACTION
<section class="m-feature f-align-left">
    <div class="m-ambient-video">
        <video role="img" alt="Ambient video alt text" poster="/images/components/feature/holo-video-poster.jpg" muted autoplay loop>
            <source src="/videos/components/video/XboxOneS.mp4" type="video/mp4">
            <source src="/videos/components/video/XboxOneS.webm" type="video/webm">
            <source src="/videos/components/video/XboxOneS.ogv" type="video/ogg">
        </video>
    </div>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <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.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Left aligned feature with image priority option

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.

CALL TO ACTION
<section class="m-feature f-align-left f-image-priority">
    <picture>
        <source srcset="http://placehold.it/1040x585" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/818x460" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x305" 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/818x460" src="http://placehold.it/818x460" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div class="c-logo">
            <img class="c-image" src="http://placehold.it/150x50" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
            <span>logo-image</span>
        </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.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Left aligned feature with background-color option and image priority option

Placeholder with grey background and dimension watermark without any imagery
BADGE

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.

CALL TO ACTION
<section class="m-feature f-align-left f-background-neutral-80 f-image-priority">
    <picture>
        <source srcset="http://placehold.it/1040x585" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/818x460" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x305" 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/818x460" src="http://placehold.it/818x460" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <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.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Right aligned feature with image priority option

Placeholder with grey background and dimension watermark without any imagery
BADGE

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.

CALL TO ACTION
<section class="m-feature f-align-right f-image-priority">
    <picture>
        <source srcset="http://placehold.it/1040x585" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/818x460" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x305" 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/818x460" src="http://placehold.it/818x460" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <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.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Left aligned video feature with image priority option

BADGE

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.

CALL TO ACTION
<section class="m-feature f-align-left f-image-priority">
    <div class="m-ambient-video">
        <video role="img" alt="Ambient video alt text" poster="/images/components/feature/holo-video-poster.jpg" muted autoplay loop>
            <source src="/videos/components/video/XboxOneS.mp4" type="video/mp4">
            <source src="/videos/components/video/XboxOneS.webm" type="video/webm">
            <source src="/videos/components/video/XboxOneS.ogv" type="video/ogg">
        </video>
    </div>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <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.</p>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>

Left align with primary and secondary calls to action

Placeholder with grey background and dimension watermark without any imagery
BADGE

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 CALL TO ACTION
<section class="m-feature f-align-left">
    <picture>
        <source srcset="http://placehold.it/800x450" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/630x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/542x406" media="(min-width: 768px)">
        <source srcset="http://placehold.it/767x288" media="(min-width: 540px)">
        <source srcset="http://placehold.it/539x201" media="(min-width:0)">
        <img srcset="http://placehold.it/630x472" src="http://placehold.it/630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <strong class="c-badge f-small f-highlight">BADGE</strong>
        <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>
        <div class="c-group">
            <a href="#" class="c-call-to-action f-primary c-glyph">
                <span>CALL TO ACTION</span>
            </a>
            <a href="#" class="c-call-to-action f-secondary c-glyph">
                <span>CALL TO ACTION</span>
            </a>
        </div>
    </div>
</section>