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

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 NOWBest 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.
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
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
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
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
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
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
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.
<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
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
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
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
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
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
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.
<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>