Utility Class Demo
Typography
hb-heading-1
hb-heading-2
hb-heading-3
hb-heading-4
hb-heading-5
hb-heading-6
hb-heading-link-color
!-- Body Text Classes -->
Body Text
hb-body-small - This is sample body text to demonstrate the styling of this utility class.
hb-body-medium - This is sample body text to demonstrate the styling of this utility class.
hb-serif - This text demonstrates serif font styling.
hs-short-line-length - This paragraph demonstrates controlled line length for improved readability. The line length is optimized for comfortable reading.
hs-emphasized-text
Text Alignment
hb-text-align-left
hb-text-align-center
hb-text-align-right
Blockquote
hb-blockquote - This is a sample blockquote to demonstrate the styling.
Labels & Pills
hb-highlighted-label
hb-pill
hb-single-category
Dividers
Content above divider
Content below divider
Content above views divider
Content below views divider
Layout
hs-well - This content is inside a well container.
hb-borderless content
Column 1 content
Column 2 content
Column 3 content
hs-breakout-box - Special content that breaks out from the main flow.
Inline Elements
Reset Classes
hb-text-reset - Text with reset styling
- List item 1
- List item 2
- List item 3
Utility Classes
hb-clear - Clears floats
hb-timeline__collapsed - Collapsed timeline state
Table Classes
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |