Highlight Block

TIP

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.

html

<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

html

<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

html

<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

html

<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

html

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

.h-highlight-block.-primary-lightest

html

<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

TIP

Offsets the horizontal padding of the page content-container (.content):

.h-highlight-block.h-fullwidth-block

html

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

Bottom Highlight Block

TIP

Can be used below a table or another element that is supposed to belong to the highlight block.

.h-highlight-block.-bottom

html

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

Top Highlight Block

TIP

Can be used in top of a table or another element that is supposed to belong to the highlight block.

.h-highlight-block.-top

html

<div class="h-highlight-block -top -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>

Highlight Block with Border

.h-highlight-block.-has-border

html

<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

html

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

Full-Width Content within Highlight-Block

.h-highlight-block > .h-highlight-block__fullwidth

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
Jill	Smith	50

Show Code

html

<div class="h-highlight-block">
  <table class="c-table h-highlight-block__fullwidth">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </table>
</div>

Atoms

Molecules

Organisms

Templates

Pages

Logger

Highlight Block

Small Highlight Block

Dark Highlight Block

White Highlight Block

Primary Highlight Block

Fullwidth Highlight Block

Bottom Highlight Block

Top Highlight Block

Highlight Block with Border

Extra Div for Overflowing Elements

Full-Width Content within Highlight-Block

Highlight Block ​

Small Highlight Block ​

Dark Highlight Block ​

White Highlight Block ​

Primary Highlight Block ​

Fullwidth Highlight Block ​

Bottom Highlight Block ​

Top Highlight Block ​

Highlight Block with Border ​

Extra Div for Overflowing Elements ​

Full-Width Content within Highlight-Block ​

Highlight Block

Small Highlight Block

Dark Highlight Block

White Highlight Block

Primary Highlight Block

Fullwidth Highlight Block

Bottom Highlight Block

Top Highlight Block

Highlight Block with Border

Extra Div for Overflowing Elements

Full-Width Content within Highlight-Block