There are no notes for this item.
- Handle: @tout--vertical
- Variants (2): Vertical , Horizontal
- Preview:
- Filesystem Path: src\components\02-blocks\tout\tout.hbs
- Referenced by (8): @four-column-tout, @related-content--touts, @three-column-tout, @two-column-tout, @basic-sample, @basic-sample--wp, @landing-sample, @landing-sample--wp
<div class="ContentBlock tout">
<div class="image-container">
<img class="image" src="http://picsum.photos/1920/1080?random" alt="">
</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}}">
</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
}
}