Featured content

Featured content module

Featured content modules (FCMs) highlight one specific piece of content at the top of a page. Content can be a video, link, or download.

Variations

The modifiers below describe how to change where the featured content module visual is positioned relative to the text.

Reversed layout without background

In cases when the featured content module appears next to another component with a background color, this variation can be applied to reduce visual overload.

Specs

  • No background or border
  • Visual is left-aligned instead of right-aligned.
  • Text is aligned to the left edge of the image.

Visual anchored on the right (default)

When the featured content module visual is a video, or a static image composed with its subject in the middle. The center of the image is to the center of the available space so that the focal point of the visual remains in view at all screen sizes. For videos, note that a 60 x 60 px play button appears centered within the image area. Make sure the subject of the thumbnail photo is not awkwardly obscured by the play button.

HTML code snippet

<section class="o-featured-content-module">
    <div class="o-featured-content-module__text">
        <h2>Featured content</h2>
        <p>
            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
            instructior ex pri. Cu pri inani constituto, cum aeque noster
            commodo cu.
        </p>
        <a class="a-link
                  a-link--jump">
            <span class="a-link__text">Read more about the feature</span>
        </a>
    </div>
    <div class="o-featured-content-module__visual">
        <img class="o-featured-content-module__img"
            src="https://dummyimage.com/1076x606/addc91/101820"
            alt="">
    </div>
</section>

Left-anchored visual

Adding the o-featured-content-module--left modifier places the visual to the left of the text and doesn’t include a background color or border.

HTML code snippet

<section class="o-featured-content-module
                o-featured-content-module--left">
    <div class="o-featured-content-module__text">
        <h2>Featured content</h2>
        <p>
            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
            instructior ex pri. Cu pri inani constituto, cum aeque noster
            commodo cu.
        </p>
        <a class="a-link
                  a-link--jump">
            <span class="a-link__text">Read more about the feature</span>
        </a>
    </div>
    <div class="o-featured-content-module__visual">
        <img class="o-featured-content-module__img"
            src="https://dummyimage.com/1076x606/addc91/101820"
            alt="">
    </div>
</section>

Latest Updates

Page last edited:
Show all details
Edit page