<!-- Default -->
<div class="highlight u-bg-theme">
<div class="highlight_body">
<h3 class="typography-inverse highlight_text">
Lorem ipsum
</h3>
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
</div>
<!-- With Link -->
<div class="highlight highlight-link u-bg-theme">
<div class="highlight_body">
<h3 class="typography-inverse highlight_text">
Lorem ipsum
</h3>
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
<p class="highlight_button">
<a class="actionLink actionLink-alt" href="#">
<span>Lorem ipsum</span>
</a>
</p>
</div>
<!-- With Image -->
<div class="highlight u-bg-theme">
<p class="highlight_figure">
<img class="" src="../../assets/bridge-524-295.jpg" alt="">
</p>
<div class="highlight_body">
<h3 class="typography-inverse highlight_text">
Lorem ipsum
</h3>
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
</div>
<!-- With Link And Image -->
<div class="highlight highlight-link u-bg-theme">
<p class="highlight_figure">
<a href="#">
<img class="" src="../../assets/bridge-524-295.jpg" alt="" >
</a>
</p>
<div class="highlight_body">
<h3 class="typography-inverse highlight_text">
Lorem ipsum
</h3>
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
<p class="highlight_button">
<a class="actionLink actionLink-alt" href="#">
<span>Lorem ipsum</span>
</a>
</p>
</div>
<div class="highlight{{#if linkTitle }} highlight-link{{ else if linkUrl}} highlight-link{{/if}} u-bg-theme">
{{#if img }}
<p class="highlight_figure">
{{#if linkUrl }}
<a href="{{ linkUrl }}">
<img class="" src="{{ path img }}" alt="" >
</a>
{{else}}
<img class="" src="{{ path img }}" alt="" >
{{/if}}
</p>
{{/if}}
<div class="highlight_body">
<h3 class="typography-inverse highlight_text">
{{ label }}
</h3>
<div class="typography">
{{{ htmlText }}}
</div>
</div>
{{#if linkTitle }}
<p class="highlight_button">
{{ render '@action-link' (contextData '@action-link--alt' class='u-truncate') }}
</p>
{{ else if linkUrl}}
<p class="highlight_button">
{{ render '@action-link' (contextData '@action-link--alt' class='u-truncate') }}
</p>
{{/if}}
</div>
/* Default */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"img": null,
"linkTitle": null,
"linkUrl": null
}
/* With Link */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"img": null,
"linkTitle": "link title",
"linkUrl": "#"
}
/* With Image */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"img": "/assets/bridge-524-295.jpg",
"linkTitle": null,
"linkUrl": null
}
/* With Link And Image */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"img": "/assets/bridge-524-295.jpg",
"linkTitle": "link title",
"linkUrl": "#"
}
To create a grid of highlight elements use the grid classes with the flex-box modifiers:
<div class="g-row g-row-flex g-clear-2@print">
<div class="g g-flex g-6@md">
<div class="highlight">
<!-- ... -->
</div>
</div>
</div>