Skip to main content

Feature group

Feature group is an area heading followed by a collection of features. Ideal for calling out one or more key highlights about a product or service.

Example

Transforming business

Learning, remote collaboration, storytelling. Putting HoloLens to use in real business scenarios.

Picture of women using HoloLens to inspect the undercarriage of a virtual volvo

Defining the future

Microsoft HoloLens brings its cutting edge car features to life in ways never before possible.

WATCH THE VIDEO
Picture of man using Autodesk software to work on the new xbox controller

Real-time collaboration

Microsoft HoloLens and Autodesk Fusion 360 enable engineers and designers to iterate together in real-time.

LEARN MORE
Picture of man inspecting various virtual models of the human anatomy

Expanding possibilities

Microsoft HoloLens is helping Case Western Reserve and the Cleveland Clinic transform teaching.

WATCH NOW

Best practices

Use feature group to show multiple related items under a shared area heading. For example all the features of a product or a group of related stories.

Do

  • Stack between two and six features in the group.
  • When stacking features within the feature group, alternate between the different image alignments (left and right) to add visual appeal.
  • Use engaging images and content.
  • Only use one feature group per page.

Don’t

  • Don't use less than two or more than six features.
  • 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.
  • Don't use center aligned features. Use only right and left aligned features.

Related

Feature
Area heading

Options

  • All options that are found within the feature module are valid, with the exception of center aligned features.
  • All options that are found within the area heading module are valid.

Development

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

Code and preview

Default feature group

Area heading with heading and paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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
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
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
<div data-grid="col-12" class="m-feature-group">
    <div data-grid="col-12" class="m-area-heading">
        <h2 class="c-heading">Area heading with heading and paragraph</h2>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <section class="m-feature f-align-left f-background-neutral-00 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>
            <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>
    <section class="m-feature f-align-right f-background-neutral-00 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>
            <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>
    <section class="m-feature f-align-left f-background-neutral-00 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>
            <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>
</div>