Highlight Block
Highlight Blocks are used to emphasize content and separate it from the rest of the page. They can be used to highlight important information or to create a visual separation between different sections of a page.
.h-highlight-block
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Small Highlight Block
.h-highlight-block.-small
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -small">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Dark Highlight Block
.h-highlight-block.-dark
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -dark">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>White Highlight Block
.h-highlight-block.-white
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -white">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Primary Highlight Block
.h-highlight-block.-primary/.-primary-lightest
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -primary">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>
<div class="h-highlight-block -primary-lightest">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Fullwidth Highlight Block
Offsets the horizontal padding of the page content-container (.content):
.h-highlight-block.h-fullwidth-block
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -dark h-fullwidth-block">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Full-Width Content within Highlight-Block
.h-highlight-block > .h-highlight-block__fullwidth
| Description |
|---|
| Example Fullwidth Content |
Show Code
<div class="h-highlight-block">
<div class="h-highlight-block__fullwidth">
<table class="c-table">
<tbody>
<tr>
<th>Description</th>
</tr>
<tr>
<td>Example Fullwidth Content</td>
</tr>
</tbody>
</table>
</div>
</div>Top/Bottom Highlight Block
Can be used below or *on top of a table or another element that is supposed to belong to the highlight block.
.h-highlight-block.-bottom/.-top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -bottom -dark">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>
<div class="h-highlight-block -top -dark m-t-xl">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Highlight Block with Border
.h-highlight-block.-has-border
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block -has-border">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>
<div class="h-highlight-block -has-border -webinar m-t-l">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>Extra Div for Overflowing Elements
WARNING
Use an extra Div .h-highlight-block__border within the Highlight-Block instead of the .-has-border modifier if some overflowing elements like Dropdowns are Tooltips are clipped by the property overflow: hidden
.h-highlight-block > .h-highlight-block__border
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
Show Code
<div class="h-highlight-block">
<div class="h-highlight-block__border"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at atque blanditiis cum, enim eos esse explicabo facilis id iste iure molestias mollitia natus, nulla odio perspiciatis possimus quo, quos.
</p>
</div>