Tout: Vertical

Ready

Notes
Info
HTML
View
Context

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.

Handle: @tout--vertical
Variants (2): Vertical , Horizontal
Preview:
- With layout
- Component only
Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/tout/tout.hbs
Referenced by (17): @col-50-section, @col-50-section--divider, @col-50-section--divider-bordered, @col-50-section--divider-shaded, @col-50-section--bordered, @col-50-section--shaded, @call-to-action-above-touts, @call-to-action-beside-touts, @related-content--touts, @mlp-grids-col-snippets-components, @mlp-grids-col-snippets-components--mlp-wp, @col-25-tout-sample, @col-25-tout-sample--divider-no-treatment, @col-25-tout-sample--divider-bordered, @col-25-tout-sample--divider-shaded, @col-25-tout-sample--no-divider-bordered, @col-25-tout-sample--no-divider-shaded


        
        <div class="ContentBlock tout">
    <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": false
  }
}