Skip to main content

Content placement item

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

Example

Article: Large size


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

Best practices

Use content placement items within the context of other modules, such as content placement. These are useful when you want to showcase an item less prominently than a feature. They are always used in groups within another module (content placement). Use when you want to showcase key content on pages that is used toward the middle of a user workflow. Content placement items 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 but do not span more than six lines to avoid awkward responsive layouts.
  • There should be no more than one paragraph if present.
  • Aspect ratio for images should be 16:9.

Don’t

  • Don't use content placement items outside the scope of the grid.

Also known as

Item template
Marketing callouts

Related

Call to action
Badge
Heading
Paragraph
Subheading

Options

Content placement items 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

Development

Code and preview

Type: article (size large)

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

Type: article with multiple calls to action (size large)

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.

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

Type: article with hyperlink (size large)

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

Type: article with multiple hyperlinks (size large)

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.

<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>
        <div class="c-group">
            <a href="#" class="c-hyperlink">Link</a>
            <a href="#" class="c-hyperlink">Link 2</a>
        </div>
    </div>
</section>

Type: article 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.

CALL TO ACTION
<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>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</section>