unibz Pattern Library

Highlight: 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>
 
<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>
 
{
  "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
}

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>