Color Icons Others Spacing Typography

Text titles & styles (typography)

Alt title XL (fr-display--xl)

Alt title LG (fr-display--lg)

Alt title MD (fr-display--md)

Alt title SM (fr-display--sm)

Alt title XS (fr-display--xs)

Title 1 (fr-h1)

Title 2 (fr-h2)

Title 3 (fr-h3)

Title 4 (fr-h4)

Title 5 (fr-h5)

Title 6 (fr-h6)

Lead (fr-text--lead)

Article (fr-text--lg)

Standard (fr-text--md)

Detail (fr-text--sm)

Mention (fr-text--xs)
<p class="fr-display--xl">Alt title XL (fr-display--xl)</p> <p class="fr-display--lg">Alt title LG (fr-display--lg)</p> <p class="fr-display--md">Alt title MD (fr-display--md)</p> <p class="fr-display--sm">Alt title SM (fr-display--sm)</p> <p class="fr-display--xs">Alt title XS (fr-display--xs)</p> <p class="fr-h1">Title 1 (fr-h1)</p> <p class="fr-h2">Title 2 (fr-h2)</p> <p class="fr-h3">Title 3 (fr-h3)</p> <p class="fr-h4">Title 4 (fr-h4)</p> <p class="fr-h5">Title 5 (fr-h5)</p> <p class="fr-h6">Title 6 (fr-h6)</p> <p class="fr-text--lead">Lead (fr-text--lead)</p> <p class="fr-text--lg">Article (fr-text--lg)</p> <p class="fr-text--md">Standard (fr-text--md)</p> <p class="fr-text--sm">Detail (fr-text--sm)</p> <p class="fr-text--xs">Mention (fr-text--xs)</p>