The highlight component is a general, generic box with a spot illustration.
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.
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:
The highlight component consists of two parts:
The highlight component has two different layouts that can be used:
On tablets in portrait mode and mobile resolutions, the spot illustration is always shown in the center at the top.
See the examples.
<section class="highlight{{ classes ? ' ' ~ classes|join(' ') }}{{ modifier ? ' highlight--' ~ modifier }}">
<div class="highlight__inner">
{{ content }}
</div>
</section>
<section class="highlight loupe highlight--top">
<div class="highlight__inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
</div>
</section>
{
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
"modifier": "top",
"classes": [
"loupe"
]
}
.highlight {
position: relative;
font-size: .8rem;
.highlight__inner {
@include theme('background-color', 'color-primary--lighten-5', 'highlight-background');
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 1rem 1.6rem;
border-radius: border-radius('radius-2');
@include tablet {
padding: 2rem;
}
> *:last-child {
margin-bottom: 0;
}
}
input[type="checkbox"]:not([disabled]) + label::before,
input[type="radio"]:not([disabled]) + label::before,
input:not([disabled]):not([type="submit"]),
select:not([disabled]),
textarea:not([disabled]) {
@include theme('background-color', 'color-secondary', 'highlight-input-background-color');
}
.accolade {
&::before,
&::after {
@include theme('background', 'color-primary--lighten-5', 'highlight-background');
}
}
}
.highlight--left,
.highlight--top {
padding-top: 3.5rem;
$icons: book camera download form letter link loupe mail newsletter phone upload whistle checklist;
@each $icon in $icons {
&.#{$icon} .highlight__inner::before {
@include spot-image($icon + '-light', 7rem);
}
}
.highlight__inner {
@include tablet-and-below {
padding-top: 5rem;
}
&::before {
@include spot-image('lightbulb-light', 7rem);
@include theme('color', 'color-primary', 'highlight-spot-shadow');
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
border-radius: 50%;
box-shadow: 0 10px 35px -25px;
z-index: z('boxes', 'spotimage');
}
}
}
.highlight--left {
@include tablet {
padding-top: 0;
}
.highlight__inner {
@include tablet {
min-height: 11rem;
padding-left: 11rem;
&::before {
top: calc(50% - 3.5rem);
right: auto;
bottom: auto;
left: 2rem;
}
}
}
}
.highlight--top {
.highlight__inner {
@include tablet {
padding-right: 9rem;
&::before {
right: 2rem;
left: auto;
}
}
}
}