Skip to main content

Content placement

Content placements are similar to feature, but are never full viewport width, are less prominent, and showcase key content in smaller blocks. Used in a grouping, content placements can complement one another in terms of related content, calls to action to shop/learn/go to app, and imagery.

Example

Article: two-up


Surface Book BADGE

Surface Book

Whether you love to edit photos, sketch, make music, or create amazing videos, Surface Book packs the power you need for when inspiration strikes.

SEE MORE
Surface Pro 4

Surface Pro 4

Light and powerful. Powered by Windows 10, Surface Pro 4 turns from a tablet into a full powered laptop while running all of your desktop software.

SEE MORE

Article: four-up


Lunar white controller for Xbox One BADGE

Lunar White Controller

Equip yourself with the Xbox One Special Edition Lunar White Wireless Controller.

SEE MORE
Lunar white controller for Xbox One

Back to school deals

Get the gear you need for success. Shop for the latest tablets, laptops, phones, accessories and more.

SEE MORE
Lunar white controller for Xbox One

Accessories

Increase your productivity and comfort with the right mouse and keyboard.

SEE MORE
Lunar white controller for Xbox One

Microsoft Band

Make this your year to live healthier and achieve more.

SEE MORE

Best practices

Use content placement when you want to showcase an item less prominently than a feature. They are always used in groups. Use when you want to showcase key content on pages that is used toward the middle of a user workflow. Content placements are for content such as articles or marketing pages so they do not link to a product detail page, which is the behavior of product placements. The content of a medium to large content placement can be general copy or can pertain to aspects about a product.

Do

  • See the Design Toolkit for a recommendation of what typically goes inside each type of placement. For example, a device placement, apps & software placement and news placement each tend to have slightly different content and layout.
  • The heading can take up the entire callout region or, if paired with a paragraph, the heading can span up to two lines.
  • The paragraph can allow for long, detailed text.
  • There should be no more than one paragraph if present.
  • Use medium-sized to small-sized images or solid backgrounds.
  • Be mindful of smaller viewports when using multiple rows of content placement, since each item will eventualy stack.

Don’t

  • Don’t use large images within a content placement.

Also known as

Item template
Marketing callouts

Related

Call to action
Badge
Heading
Paragraph
Subheading

Options

Content placements require heading, paragraph and call to action.

  • Size: f-size-large and f-size-medium. Use f-size-large with two-up layouts and f-size-medium with three-up and four-up layouts.
  • Context: Currently, the only supported context is context-article. This context class belongs on the component root.
  • Badge: The option to include a badge in markup is supported.
  • Multiple rows of content placement can be achieved by adding another instance of the <div data-grid="col-12"> row immediately following the previous <div data-grid="col-12">.

Development

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

Code and preview

Two-up layout

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 pad-6x stack-2">
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <picture>
                    <source srcset="http://placehold.it/740x417" media="(min-width: 1400px)">
                    <source srcset="http://placehold.it/582x328" media="(min-width: 1084px)">
                    <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                    <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                    <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                    <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <strong class="c-badge f-small f-highlight">BADGE</strong>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</p>
                    <a href="#" class="c-call-to-action c-glyph">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </section>
        </div>
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <picture>
                    <source srcset="http://placehold.it/740x417" media="(min-width: 1400px)">
                    <source srcset="http://placehold.it/582x328" media="(min-width: 1084px)">
                    <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                    <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                    <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                    <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</p>
                    <a href="#" class="c-call-to-action c-glyph">
                        <span>CALL TO ACTION</span>
                    </a>
                </div>
            </section>
        </div>
    </div>
</div>

Three-up layout

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 stack-2">
        <div data-grid="col-4 pad-6x">
            <div data-grid="col-12">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/485x273" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/380x214" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/321x180" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
        <div data-grid="col-4 pad-6x">
            <div data-grid="col-12">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/485x273" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/380x214" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/321x180" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
        <div data-grid="col-4 pad-6x">
            <div data-grid="col-12">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/485x273" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/380x214" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/321x180" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Four-up layout

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 stack-3">
        <div data-grid="col-6 pad-6x">
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
        <div data-grid="col-6 pad-6x">
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Four-up multi-row layout

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

CALL TO ACTION
<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 stack-3">
        <div data-grid="col-6 pad-6x">
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
        <div data-grid="col-6 pad-6x">
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div data-grid="col-12 stack-3">
        <div data-grid="col-6 pad-6x">
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
        <div data-grid="col-6 pad-6x">
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
            <div data-grid="col-6">
                <section class="m-content-placement-item f-size-medium">
                    <picture>
                        <source srcset="http://placehold.it/358x201" media="(min-width: 1400px)">
                        <source srcset="http://placehold.it/279x157" media="(min-width: 1084px)">
                        <source srcset="http://placehold.it/235x132" media="(min-width: 768px)">
                        <source srcset="http://placehold.it/348x195" media="(min-width: 540px)">
                        <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                        <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Heading</h3>
                        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                            lectus, at pharetra lacus lobortis vel.</p>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Article: two-up with multiple calls to action

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 pad-6x stack-2">
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <picture>
                    <source srcset="http://placehold.it/740x417" media="(min-width: 1400px)">
                    <source srcset="http://placehold.it/582x328" media="(min-width: 1084px)">
                    <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                    <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                    <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                    <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</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>
        </div>
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <picture>
                    <source srcset="http://placehold.it/740x417" media="(min-width: 1400px)">
                    <source srcset="http://placehold.it/582x328" media="(min-width: 1084px)">
                    <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                    <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                    <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                    <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</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>
        </div>
    </div>
</div>

Article: two-up with video

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 pad-6x stack-2">
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <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>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</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>
        </div>
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <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>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</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>
        </div>
    </div>
</div>

Two-up layout with hyperlinks

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

Link
Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

<div class="m-content-placement" data-grid="col-12">
    <div data-grid="col-12 pad-6x stack-2">
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <picture>
                    <source srcset="http://placehold.it/740x417" media="(min-width: 1400px)">
                    <source srcset="http://placehold.it/582x328" media="(min-width: 1084px)">
                    <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                    <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                    <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                    <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <strong class="c-badge f-small f-highlight">BADGE</strong>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</p>
                    <a href="#" class="c-hyperlink">Link</a>
                </div>
            </section>
        </div>
        <div data-grid="col-6">
            <section class="m-content-placement-item f-size-large">
                <picture>
                    <source srcset="http://placehold.it/740x417" media="(min-width: 1400px)">
                    <source srcset="http://placehold.it/582x328" media="(min-width: 1084px)">
                    <source srcset="http://placehold.it/494x278" media="(min-width: 768px)">
                    <source srcset="http://placehold.it/720x405" media="(min-width: 540px)">
                    <source srcset="http://placehold.it/491x276" media="(min-width:0)">
                    <img srcset="http://placehold.it/491x276" src="http://placehold.it/491x276" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Heading</h3>
                    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor
                        lectus, at pharetra lacus lobortis vel.</p>
                    <div class="c-group">
                        <a href="#" class="c-hyperlink">Link</a>
                        <a href="#" class="c-hyperlink">Link 2</a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>