<!-- 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>