This design system utilizes four header styles. One for dark-mode, one for light-mode, one to overlay on images, and one with a hyperlink.
Headers
Header Variations
Header Dark
Header Light
Header Overlay
Lorem ipsum dolor sit amet consectetur. In mi est a augue fringilla. Sit amet libero pulvinar euismod nibh aliquam fringilla volutpat ipsum.
Header
Link
▶
Accessibility Considerations
Ensuring that these sections are used appropriately to have a good color contrast is essential.
Usage
-
Used for main sections in the design system. The main headers should be used to lead a section.
-
The header with link and overlay headers are to be used when necessary.
Code Examples
Header Dark-mode
<div class="row p-4 header">
<h2>Header Dark</h2>
</div>Header Light-mode
<div class="row p-4 header-light">
<h2>Header Light</h2>
</div>Header Overlay
<div class="p-4 rounded header-title-ovr w-50" id="header-title">
<h2>Header Overlay</h2>
<p>Lorem ipsum dolor sit amet consectetur. In mi est a augue fringilla. Sit amet libero pulvinar euismod nibh aliquam fringilla volutpat ipsum.</p>
</div>
Header & Link
<div class="col-lg col-md p-4" id="link-bg">
<div class="header-title-link d-flex align-items-center" id="header-link">
<h2>Header</h2>
<p>Link</p>
<p style="text-decoration:none;padding-left:15px;">▶</p>
</div>
</div>