Blocks
Default Highlight Block
.h-highlight-block
INFO
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.
Small Highlight Block
.h-highlight-block.-small
INFO
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.
Dark Highlight Block
.h-highlight-block.-dark
INFO
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.
White Highlight Block
.h-highlight-block.-white
INFO
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.
Primary Highlight Block
.h-highlight-block.-primary
INFO
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.
.h-highlight-block.-primary-lightest
INFO
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.
Fullwidth Highlight Block
TIP
Offsets the horizontal padding of the page content-container (.content):
.h-highlight-block.h-fullwidth-block
INFO
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.
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
INFO
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.
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
INFO
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.
Highlight Block with Border
.h-highlight-block.-has-border
INFO
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.
WARNING
Use an extra Div .h-highlight-block__border within the Highlight-Block instead of the .-has-border modifier if some elements like Dropdowns are Tooltips are cut by the property overflow: hidden
.h-highlight-block > .h-highlight-block__border
INFO
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.
Full-Width Content within Highlight-Block
.h-highlight-block > .h-highlight-block__fullwidth
INFO
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Jill | Smith | 50 |