Skip to main content

Multi feature

Multi feature nests related content and gives users the ability to preview and access additional content using pivots.

Example

The best Windows ever brings you innovative tools to get things done fast — your digital personal assistant Cortana, password-free login with Windows Hello, and the natural writing experience of Windows Ink.

EXPLORE WINDOWS 10
Multi feature default with pivots

Best practices

Use multi feature to nest related content when the desire is to layer information (not display content in details all at once). Multi feature displays multiple groups of related in a single viewport without the need to scroll. Consider how important it is for users to be able to preview nested content. Flippers and app icon pivots are less explicit to the users. Images and text pivots are most descriptive, and they allow users to get a sense of the information even if they don't click on the pivots to view in details.

Do

  • Use multi feature to nest content
  • When stacking multi feature modules, alternate between the different image alignments (left, center) to add rhythm and pacing
  • Text pivots should be precise and succinct
  • Use only one paragraph of text, up to about 40 words for best experience

Don’t

  • Don't stack two left-align multi feature modules
  • Don't use more than two short words for each text pivot; verbose phrases are discouraged

Related

Feature
Feature group
Flipper
Image
Paragraph
Pivot
Sequence indicator

Options

  • Align Center: Add a f-align-center class name to layout image to the center top and content to the center bottom.
  • Align Left: Add a f-align-left class name to layout image to the left of the content.
  • Call-to-action: Add this component below the paragraph for left or center layouts.

Specifications

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

Development

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

Code and preview

Multi feature module with centered sequence indicators

Area heading

  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-center">
    <section>
        <div data-grid="col-12" class="m-area-heading">
            <h4 class="c-heading">Area heading</h4>
        </div>
        <div class="c-sequence-indicator" role="tablist">
            <button role="tab" aria-selected="true" aria-label="View slide one" aria-controls="newItemImage1 newItemContent1" title="Slide one"></button>
            <button role="tab" aria-selected="false" aria-label="View slide two" aria-controls="newItemImage2 newItemContent2" title="Slide two"></button>
            <button role="tab" aria-selected="false" aria-label="View slide three" aria-controls="newItemImage3 newItemContent3" title="Slide three"></button>
            <button role="tab" aria-selected="false" aria-label="View slide four" aria-controls="newItemImage4 newItemContent4" title="Slide four"></button>
        </div>
        <ul>
            <li id="newItemContent1" role="tabpanel" class="f-active">
                <h3 class="c-heading">Heading 1</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
            <li id="newItemContent2" role="tabpanel">
                <h3 class="c-heading">Heading 2</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
            <li id="newItemContent3" role="tabpanel">
                <h3 class="c-heading">Heading 3</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
            <li id="newItemContent4" role="tabpanel">
                <h3 class="c-heading">Heading 4</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
        </ul>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
            <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="newItemImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/171717/2F2F2F?text=slide+one+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/171717/2F2F2F?text=slide+one+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/171717/2F2F2F?text=slide+one+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/171717/2F2F2F?text=slide+one+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/171717/2F2F2F?text=slide+one+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/171717/2F2F2F?text=slide+one+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/171717/2F2F2F?text=slide+one+1399x600" src="http://placehold.it/1399x600/171717/2F2F2F?text=slide+one+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newItemImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/2F2F2F/222222?text=slide+two+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/2F2F2F/222222?text=slide+two+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/2F2F2F/222222?text=slide+two+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/2F2F2F/222222?text=slide+two+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/2F2F2F/222222?text=slide+two+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/2F2F2F/222222?text=slide+two+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/2F2F2F/222222?text=slide+two+1399x600" src="http://placehold.it/1399x600/2F2F2F/222222?text=slide+two+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newItemImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/464646/333333?text=slide+three+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/464646/333333?text=slide+three+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/464646/333333?text=slide+three+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/464646/333333?text=slide+three+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/464646/333333?text=slide+three+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/464646/333333?text=slide+three+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/464646/333333?text=slide+three+1399x600" src="http://placehold.it/1399x600/464646/333333?text=slide+three+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newItemImage4" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/333333/111111?text=slide+four+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/333333/111111?text=slide+four+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/333333/111111?text=slide+four+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/333333/111111?text=slide+four+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/333333/111111?text=slide+four+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/333333/111111?text=slide+four+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/333333/111111?text=slide+four+1399x600" src="http://placehold.it/1399x600/333333/111111?text=slide+four+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>

Multi feature module with centered icons

  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-center">
    <section>
        <ul role="tablist">
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo f-active" itemprop="url" aria-label="Item 1" aria-controls="newIconItemImage1 newIconItemContent1">
                    <img itemprop="logo" class="c-image" src="images/phone-icon.png" alt="Phone icon" itemscope itemtype="http://schema.org/ImageObject">
                    <span>Microsoft</span>
                </a>
            </li>
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 2" aria-controls="newIconItemImage2 newIconItemContent2">
                    <img itemprop="logo" class="c-image" src="images/calendar-icon.png" alt="Calendar icon" itemscope itemtype="http://schema.org/ImageObject">
                    <span>Microsoft</span>
                </a>
            </li>
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 3" aria-controls="newIconItemImage3 newIconItemContent3">
                    <img itemprop="logo" class="c-image" src="images/mail-icon.png" alt="Mail icon" itemscope itemtype="http://schema.org/ImageObject">
                    <span>Microsoft</span>
                </a>
            </li>
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 4" aria-controls="newIconItemImage4 newIconItemContent4">
                    <img itemprop="logo" class="c-image" src="images/image-icon.png" alt="Image icon" itemscope itemtype="http://schema.org/ImageObject">
                    <span>Microsoft</span>
                </a>
            </li>
        </ul>
        <ul>
            <li id="newIconItemContent1" role="tabpanel" class="f-active">
                <h3 class="c-heading">Heading 1</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
            <li id="newIconItemContent2" role="tabpanel">
                <h3 class="c-heading">Heading 2</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
            <li id="newIconItemContent3" role="tabpanel">
                <h3 class="c-heading">Heading 3</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
            <li id="newIconItemContent4" role="tabpanel">
                <h3 class="c-heading">Heading 4</h3>
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </li>
        </ul>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
            <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="newIconItemImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/171717/2F2F2F?text=slide+one+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/171717/2F2F2F?text=slide+one+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/171717/2F2F2F?text=slide+one+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/171717/2F2F2F?text=slide+one+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/171717/2F2F2F?text=slide+one+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/171717/2F2F2F?text=slide+one+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/171717/2F2F2F?text=slide+one+1399x600" src="http://placehold.it/1399x600/171717/2F2F2F?text=slide+one+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newIconItemImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/2F2F2F/222222?text=slide+two+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/2F2F2F/222222?text=slide+two+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/2F2F2F/222222?text=slide+two+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/2F2F2F/222222?text=slide+two+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/2F2F2F/222222?text=slide+two+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/2F2F2F/222222?text=slide+two+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/2F2F2F/222222?text=slide+two+1399x600" src="http://placehold.it/1399x600/2F2F2F/222222?text=slide+two+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newIconItemImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/464646/333333?text=slide+three+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/464646/333333?text=slide+three+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/464646/333333?text=slide+three+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/464646/333333?text=slide+three+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/464646/333333?text=slide+three+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/464646/333333?text=slide+three+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/464646/333333?text=slide+three+1399x600" src="http://placehold.it/1399x600/464646/333333?text=slide+three+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newIconItemImage4" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/333333/111111?text=slide+four+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/333333/111111?text=slide+four+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/333333/111111?text=slide+four+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/333333/111111?text=slide+four+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/333333/111111?text=slide+four+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/333333/111111?text=slide+four+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/333333/111111?text=slide+four+1399x600" src="http://placehold.it/1399x600/333333/111111?text=slide+four+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>

Multi feature module with pivots

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-center">
    <section>
        <div class="c-pivot">
            <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
            <div role="tablist">
                <a class="f-active" role="tab" tabindex="0" aria-controls="newRTBItemImage1 newRTBItemContent1">Pivot 1</a>
                <a role="tab" aria-controls="newRTBItemImage2 newRTBItemContent2">Pivot 2</a>
                <a role="tab" aria-controls="newRTBItemImage3 newRTBItemContent3">Pivot 3</a>
                <a role="tab" aria-controls="newRTBItemImage4 newRTBItemContent4">Pivot 4</a>
                <a role="tab" aria-controls="newRTBItemImage5 newRTBItemContent5">Pivot 5</a>
            </div>
            <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
            <section id="newRTBItemContent1" role="tabpanel" aria-hidden="false">
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </section>
            <section id="newRTBItemContent2" role="tabpanel" aria-hidden="true">
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </section>
            <section id="newRTBItemContent3" role="tabpanel" aria-hidden="true">
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </section>
            <section id="newRTBItemContent4" role="tabpanel" aria-hidden="true">
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </section>
            <section id="newRTBItemContent5" role="tabpanel" aria-hidden="true">
                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                <a href="#" class="c-call-to-action c-glyph"
                    aria-label="More verbose call to action text">
                    <span>CALL TO ACTION</span>
                </a>
            </section>
        </div>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
            <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="newRTBItemImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/171717/2F2F2F?text=pivot+one+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/171717/2F2F2F?text=pivot+one+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/171717/2F2F2F?text=pivot+one+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/171717/2F2F2F?text=pivot+one+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/171717/2F2F2F?text=pivot+one+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/171717/2F2F2F?text=pivot+one+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/171717/2F2F2F?text=pivot+one+1399x600" src="http://placehold.it/1399x600/171717/2F2F2F?text=pivot+one+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newRTBItemImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/2F2F2F/222222?text=pivot+two+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/2F2F2F/222222?text=pivot+two+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/2F2F2F/222222?text=pivot+two+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/2F2F2F/222222?text=pivot+two+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/2F2F2F/222222?text=pivot+two+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/2F2F2F/222222?text=pivot+two+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/2F2F2F/222222?text=pivot+two+1399x600" src="http://placehold.it/1399x600/2F2F2F/222222?text=pivot+two+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newRTBItemImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/464646/333333?text=pivot+three+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/464646/333333?text=pivot+three+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/464646/333333?text=pivot+three+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/464646/333333?text=pivot+three+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/464646/333333?text=pivot+three+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/464646/333333?text=pivot+three+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/464646/333333?text=pivot+three+1399x600" src="http://placehold.it/1399x600/464646/333333?text=pivot+three+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newRTBItemImage4" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/464646/333333?text=pivot+four+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/464646/333333?text=pivot+four+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/464646/333333?text=pivot+four+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/464646/333333?text=pivot+four+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/464646/333333?text=pivot+four+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/464646/333333?text=pivot+four+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/464646/333333?text=pivot+four+1399x600" src="http://placehold.it/1399x600/464646/333333?text=pivot+four+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newRTBItemImage5" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2048x600/464646/333333?text=pivot+five+2048x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x600/464646/333333?text=pivot+five+1778x600" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x600/464646/333333?text=pivot+five+1399x600" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x500/464646/333333?text=pivot+five+1083x500" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x400/464646/333333?text=pivot+five+767x400" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x300/464646/333333?text=pivot+five+539x300" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x600/464646/333333?text=pivot+five+1399x600" src="http://placehold.it/1399x600/464646/333333?text=pivot+five+1399x600" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>

Multi feature module with left aligned icons

  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-left">
    <section>
        <div>
            <ul role="tablist">
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo f-active" itemprop="url" aria-label="Item 1" aria-controls="newHorizontalItemImage1 newHorizontalItemContent1">
                        <img itemprop="logo" class="c-image" src="http://placehold.it/48x48/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 2" aria-controls="newHorizontalItemImage2 newHorizontalItemContent1">
                        <img itemprop="logo" class="c-image" src="http://placehold.it/48x48/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 3" aria-controls="newHorizontalItemImage3 newHorizontalItemContent1">
                        <img itemprop="logo" class="c-image" src="http://placehold.it/48x48/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
            </ul>
            <ul role="presentation">
                <li id="newHorizontalItemContent1" role="tabpanel" class="f-active">
                    <h3 class="c-heading">Heading 1</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper" aria-label=""></button>
            <button class="c-flipper" aria-label=""></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="newHorizontalItemImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/171717/2F2F2F?text=one+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/171717/2F2F2F?text=one+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/171717/2F2F2F?text=one+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" src="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newHorizontalItemImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/2F2F2F/222222?text=two+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/2F2F2F/222222?text=two+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/2F2F2F/222222?text=two+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" src="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newHorizontalItemImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/464646/333333?text=three+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/464646/333333?text=three+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/464646/333333?text=three+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" src="http://placehold.it/630x472/464646/333333?text=three+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>

Multi feature module with multiple left aligned icons

  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-left">
    <section>
        <div>
            <ul role="tablist">
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo f-active" itemprop="url" aria-label="Item 1" aria-controls="leftMultipleIconImage1 leftMultipleIconContent1">
                        <img itemprop="logo" class="c-image" src="images/phone-icon.png" alt="Phone icon" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 2" aria-controls="leftMultipleIconImage2 leftMultipleIconContent2">
                        <img itemprop="logo" class="c-image" src="images/mail-icon.png" alt="Mail icon" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 3" aria-controls="leftMultipleIconImage3 leftMultipleIconContent3">
                        <img itemprop="logo" class="c-image" src="images/calendar-icon.png" alt="Calendar icon" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
            </ul>
            <ul role="presentation">
                <li id="leftMultipleIconContent1" role="tabpanel" class="f-active">
                    <h3 class="c-heading">Heading 1</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
                <li id="leftMultipleIconContent2" role="tabpanel">
                    <h3 class="c-heading">Heading 2</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
                <li id="leftMultipleIconContent3" role="tabpanel">
                    <h3 class="c-heading">Heading 3</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper" aria-label=""></button>
            <button class="c-flipper" aria-label=""></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="leftMultipleIconImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/171717/2F2F2F?text=one+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/171717/2F2F2F?text=one+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/171717/2F2F2F?text=one+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" src="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="leftMultipleIconImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/2F2F2F/222222?text=two+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/2F2F2F/222222?text=two+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/2F2F2F/222222?text=two+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" src="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="leftMultipleIconImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/464646/333333?text=three+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/464646/333333?text=three+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/464646/333333?text=three+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" src="http://placehold.it/630x472/464646/333333?text=three+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>

Multi feature module with right aligned icons

  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-right">
    <section>
        <div>
            <ul role="tablist">
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo f-active" itemprop="url" aria-label="Item 1" aria-controls="newHorizontalItemImage1 newHorizontalItemContent1">
                        <img itemprop="logo" class="c-image" src="http://placehold.it/48x48/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 2" aria-controls="newHorizontalItemImage2 newHorizontalItemContent1">
                        <img itemprop="logo" class="c-image" src="http://placehold.it/48x48/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 3" aria-controls="newHorizontalItemImage3 newHorizontalItemContent1">
                        <img itemprop="logo" class="c-image" src="http://placehold.it/48x48/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
            </ul>
            <ul role="presentation">
                <li id="newHorizontalItemContent1" role="tabpanel" class="f-active">
                    <h3 class="c-heading">Heading 1</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper" aria-label=""></button>
            <button class="c-flipper" aria-label=""></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="newHorizontalItemImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/171717/2F2F2F?text=one+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/171717/2F2F2F?text=one+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/171717/2F2F2F?text=one+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" src="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newHorizontalItemImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/2F2F2F/222222?text=two+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/2F2F2F/222222?text=two+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/2F2F2F/222222?text=two+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" src="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="newHorizontalItemImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/464646/333333?text=three+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/464646/333333?text=three+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/464646/333333?text=three+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" src="http://placehold.it/630x472/464646/333333?text=three+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>

Multi feature module with multiple right aligned icons

  • Heading 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
  • Heading 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.

    CALL TO ACTION
<div data-grid="col-12 stack-2" class="m-multi-feature f-align-right">
    <section>
        <div>
            <ul role="tablist">
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo f-active" itemprop="url" aria-label="Item 1" aria-controls="rightMultipleIconImage1 rightMultipleIconContent1">
                        <img itemprop="logo" class="c-image" src="images/phone-icon.png" alt="Phone icon" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 2" aria-controls="rightMultipleIconImage2 rightMultipleIconContent2">
                        <img itemprop="logo" class="c-image" src="images/mail-icon.png" alt="Mail icon" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
                <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 3" aria-controls="rightMultipleIconImage3 rightMultipleIconContent3">
                        <img itemprop="logo" class="c-image" src="images/calendar-icon.png" alt="Calendar icon" itemscope itemtype="http://schema.org/ImageObject">
                        <span>Microsoft</span>
                    </a>
                </li>
            </ul>
            <ul role="presentation">
                <li id="rightMultipleIconContent1" role="tabpanel" class="f-active">
                    <h3 class="c-heading">Heading 1</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
                <li id="rightMultipleIconContent2" role="tabpanel">
                    <h3 class="c-heading">Heading 2</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
                <li id="rightMultipleIconContent3" role="tabpanel">
                    <h3 class="c-heading">Heading 3</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus metus, volutpat id venenatis sit amet, aliquam at felis. Suspendisse a pharetra sem. Aliquam ac libero at mauris mattis condimentum quis eget mi.</p>
                    <a href="#" class="c-call-to-action c-glyph"
                        aria-label="More verbose call to action text">
                        <span>CALL TO ACTION</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <button class="c-flipper" aria-label=""></button>
            <button class="c-flipper" aria-label=""></button>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="rightMultipleIconImage1" data-f-theme="light" class="f-active" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/171717/2F2F2F?text=one+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/171717/2F2F2F?text=one+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/171717/2F2F2F?text=one+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/171717/2F2F2F?text=one+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" src="http://placehold.it/630x472/171717/2F2F2F?text=one+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="rightMultipleIconImage2" data-f-theme="light" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/2F2F2F/222222?text=two+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/2F2F2F/222222?text=two+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/2F2F2F/222222?text=two+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/2F2F2F/222222?text=two+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" src="http://placehold.it/630x472/2F2F2F/222222?text=two+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                    <li id="rightMultipleIconImage3" data-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/800x450/464646/333333?text=three+800x450" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x406/464646/333333?text=three+542x406" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x288/464646/333333?text=three+767x288" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x201/464646/333333?text=three+539x201" media="(min-width:0)">
                            <img srcset="http://placehold.it/630x472/464646/333333?text=three+630x472" src="http://placehold.it/630x472/464646/333333?text=three+630x472" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>