Missouri State University Pattern Library

Tout: Horizontal

This component allows you to highlight a particular topic with clear, concise, short sentences that quickly convey your point. It is available in vertical or horizontal format. An image is optional and is best displayed at 760x428px.

A tout can be used as a standalone element (web component) but is also seen as part of the CTA pattern.

The vertical option may be used within a two or three column grid (using an interior page template) or four column grid (using a full-width page template).

A tout may also be part of the related content with touts pattern.

<div class="ContentBlock tout Horz">
    <div class="image-container">
        <img class="image" src="http://picsum.photos/1920/1080?random" alt="" loading="lazy">
    </div>
    <div class="container">
        <div class="eyebrow">Lorem ipsum dolor</div>
        <h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
        <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
        </p>
    </div>
</div>
 
<div class="ContentBlock tout{{#if layout.horizontal}} Horz{{/if}}">
  {{#if image}}
    <div class="image-container">
      <img class="image" src="{{path image.src}}" alt="{{image.alt}}" loading="lazy">
    </div>
  {{/if}}
  <div class="container">
    {{#if eyebrow}}
      <div class="eyebrow">{{eyebrow}}</div>
    {{/if}}
    <h3 class="headline"><a href="{{link.url}}">{{headline}}</a></h3>
    {{#if description}}
      <p class="description">
        {{description}}
      </p>
    {{/if}}
  </div>
</div>
 
{
  "eyebrow": "Lorem ipsum dolor",
  "image": {
    "src": "http://picsum.photos/1920/1080?random",
    "alt": null
  },
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.",
  "link": {
    "url": "#"
  },
  "layout": {
    "horizontal": true
  }
}