Highlight

The highlight component is a general, generic box with an icon.

When to use this component

Use the highlight component on a page to highlight a short text, certain specific information or to show a notification.

The highlight component works best with a text with no more than one or a few sentences. The ideal total length of the text is the length of a tweet, meaning between 140 characters and 280 characters.

When not to use this component

Do not use the highlight component to present the main content. Only use the highlight component to highlight specific information.

Do not use the highlight component to show long text or complex content.

Do not use the highlight component when another, more specific style guide component is more applicable:

To highlight a quote or a part of a quote, use the quote component instead.
To show contact information of an entity, location or person on a detail page, use the contact details component instead.
Use the call to action component instead:
- To guide users to the next step to reach a certain goal related to the page.
- To present specific contact information to get help or to get more information from a specitic service to reach a certain goal.
- To promote a certain action for the user to take.
Use the summary component instead:
- To highlight a key takeaway or a short conclusion.
- To present metadata.
- When a call-to-action button is required.
- To highlight any important data that you want users to remember after they’ve seen the page.

How it works

The highlight component consists of 3 parts:

A icon, this can be changed in the HTML markup, any icon name can be used: For ‘link’, ‘phone’, ‘email’ or ‘download’ always use the call to action component instead.
A title
A short text, specific information or notification text

See the examples.

<section class="highlight"> <div class="highlight__inner"> <i class="icon-star-empty" aria-hidden="true"></i> <h2 class="h3">Highlight</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p> </div> </section>

.highlight { position: relative; z-index: 0; .highlight__inner { @include theme('background-color', 'color-tertiary-light', 'highlight-background'); @include theme-content('color-tertiary-pastel', 'highlight-shadow-color') { @include abstract-shadow('bottom', 'right', $theme-color, null, 190px, 190px); @include phablet { @include abstract-shadow('bottom', 'right', $theme-color, null, 220px, 220px); } } padding: 30px; @include tablet { padding: 60px; } & > i { @include theme('color', 'color-tertiary', 'highlight-icon-color'); display: inline-block; width: 40px; height: 40px; vertical-align: top; &::before { display: block; margin: 0 8px 0 0; font-size: 2rem; } } h2, h3 { display: inline-block; margin: 0 0 20px; vertical-align: top; } p:first-of-type { margin-top: 0; } > *:last-child { margin-bottom: 0; } } }