Helpers
Small composition utilities — stacks, ratios, stretched links, and accessibility helpers.
Clearfix
clearfix on a wrapper contains floated children.
Color & background
text-bg-primary text-bg-darkColored links
link-primary link-dangerFocus ring
Icon link
Inline flex link with icon + label. Add icon-link-hover for a stronger icon nudge on hover.
Position
Chrome helpers: fixed-top, fixed-bottom, sticky-top, sticky-bottom, plus responsive sticky-md-top. Edge/transform utilities live under Utilities → Position.
Ratio
ratio-1x1, ratio-4x3, ratio-16x9, ratio-21x9.
Stacks
Stretched link
Card title
Whole card clickableText truncation
Single line
Long copy truncates with ellipsis when constrained.
Line clamp
Clamp to N lines with line-clamp-1 … line-clamp-6. Reset with line-clamp-none.
This block is limited to two lines. Extra copy is cut with an ellipsis so cards and lists stay even height when titles wrap.
line-clamp-2
Three-line clamp keeps a bit more context while still capping growth. Useful for descriptions under thumbnails or search result snippets that would otherwise stretch the layout.
line-clamp-3
One line only — similar to text-truncate but without forcing nowrap on flex children the same way.
line-clamp-1