Use a feature block to highlight a particular web page, collection of pages or specific content.

Best practices

  • Crop images to 700x394 pixels. This size ensures the image is crisp on all mobile devices and works with all column widths.
  • Headlines should be six words or less.
  • Description should be about 140 characters.
  • Strive to include no more than six feature blocks on a web page.
  • Use to link to landing pages and to develop sections within landing pages.
  • Do not use text overlays on images.
  • When you need more flexibility, use a rich text block instead.
  • Use a heading that describes the link destination.
  • Complement with rich text blocks that contextualize a row of feature blocks and provide marketing messaging.
  • Within a row, either use an image for all feature blocks or don’t use an image for any feature blocks.
<article class="ContentBlock Feature Horz Page10">
    <h2>
        <a href="https://www.missouristate.edu">
            <img src="https://placehold.it/700x394" alt="">
            <span class="FeatureHeading">Lorem ipsum dolor sit amet consectetur</span>
        </a>
    </h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
    </p>
</article>
<article class="ContentBlock Feature {{featuredItemLayout}} Page{{pageId}}">
    <h2>
        <a href="{{itemLink}}">
            <img src="{{image}}" alt="">
            <span class="FeatureHeading">{{heading}}</span>
        </a>
    </h2>
    {{#if description}}
        <p>
            {{description}}
        </p>
    {{/if}}
</article>
{
  "pageId": 10,
  "heading": "Lorem ipsum dolor sit amet consectetur",
  "featuredItemLayout": "Horz",
  "image": "https://placehold.it/700x394",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.",
  "itemLink": "https://www.missouristate.edu",
  "imageHeight": 700,
  "imageWidth": 394
}