Utilities
Layout and text helpers that work the same on both CSS engines.
Responsive grid
Twelve columns that respond to the content width.
.fd-col-lg-3
.fd-col-lg-3
.fd-col-lg-6
.fd-col-lg-8
.fd-col-lg-4
Stack and cluster
Vertical rhythm and wrapping rows with token gaps.
.fd-stack.fd-stack
.fd-cluster.fd-cluster.fd-cluster
Text
Eyebrows, figures, tones and truncation.
Monthly revenue
$48,290
Paid · Pending · Overdue
The quick brown fox jumps over the lazy dog while the team reviews the weekly report.
Tiles, dots and deltas
Small status building blocks.
Online 12.0% 3.0%
Accessibility
Hidden labels and direction-aware icons.
Text for screen readers only: .fd-visually-hidden
Icons that mirror in RTL: .fd-icon--directional