Color Icons Others Spacing Typography
Styles

Background color (background)

Action-high blue France (fr-background-action-high--blue-france)

Action-high red Marianne (fr-background-action-high--red-marianne)

Alt Blue France (fr-background-alt--blue-france)

Alt gray (fr-background-alt--grey)

Alt red Marianne (fr-background-alt--red-marianne)

Contrast blue France (fr-background-contrast--blue-france)

Contrast error (fr-background-contrast--error)

Contrast gray (fr-background-contrast--grey)

Contrast info (fr-background-contrast--info)

Contrast red Marianne (fr-background-contrast--red-marianne)

Contrast success (fr-background-contrast--success)

Contrast warning (fr-background-contrast--warning)

Default gray (fr-background-default--grey)

Flat error (fr-background-flat--error)

Flat grey (fr-background-flat--grey)

Flat info (fr-background-flat--info)

Flat success (fr-background-flat--success)

Flat warning (fr-background-flat--warning)
<p class="fr-background-action-high--blue-france fr-p-1w fr-text-inverted--blue-france">Action-high blue France (fr-background-action-high--blue-france)</p> <p class="fr-background-action-high--red-marianne fr-p-1w">Action-high red Marianne (fr-background-action-high--red-marianne)</p> <p class="fr-background-alt--blue-france fr-p-1w">Alt Blue France (fr-background-alt--blue-france)</p> <p class="fr-background-alt--grey fr-p-1w">Alt gray (fr-background-alt--grey)</p> <p class="fr-background-alt--red-marianne fr-p-1w">Alt red Marianne (fr-background-alt--red-marianne)</p> <p class="fr-background-contrast--blue-france fr-p-1w">Contrast blue France (fr-background-contrast--blue-france)</p> <p class="fr-background-contrast--error fr-p-1w">Contrast error (fr-background-contrast--error)</p> <p class="fr-background-contrast--grey fr-p-1w">Contrast gray (fr-background-contrast--grey)</p> <p class="fr-background-contrast--info fr-p-1w">Contrast info (fr-background-contrast--info)</p> <p class="fr-background-contrast--red-marianne fr-p-1w">Contrast red Marianne (fr-background-contrast--red-marianne)</p> <p class="fr-background-contrast--success fr-p-1w">Contrast success (fr-background-contrast--success)</p> <p class="fr-background-contrast--warning fr-p-1w">Contrast warning (fr-background-contrast--warning)</p> <p class="fr-background-default--grey fr-p-1w">Default gray (fr-background-default--grey)</p> <p class="fr-background-flat--error fr-p-1w">Flat error (fr-background-flat--error)</p> <p class="fr-background-flat--grey fr-p-1w fr-text-inverted--grey">Flat grey (fr-background-flat--grey)</p> <p class="fr-background-flat--info fr-p-1w">Flat info (fr-background-flat--info)</p> <p class="fr-background-flat--success fr-p-1w">Flat success (fr-background-flat--success)</p> <p class="fr-background-flat--warning fr-p-1w">Flat warning (fr-background-flat--warning)</p>

Text color (text_color)

Action-high blue France (fr-text-action-high--blue-france)

Action-high grey (fr-text-action-high--grey)

Action-high red Marianne (fr-text-action-high--red-marianne)

Default error (fr-text-default--error)

Default grey (fr-text-default--grey)

Default info (fr-text-default--info)

Default success (fr-text-default--success)

Default warning (fr-text-default--warning)

Inverted blue France (fr-text-inverted--blue-france)

Inverted error (fr-text-inverted--error)

Inverted grey (fr-text-inverted--grey)

Inverted info (fr-text-inverted--info)

Inverted red Marianne (fr-text-inverted--red-marianne)

Inverted success (fr-text-inverted--success)

Inverted warning (fr-text-inverted--warning)

Label blue France (fr-text-label--blue-france)

Label grey (fr-text-label--grey)

Label red Marianne (fr-text-label--red-marianne)

Mention grey (fr-text-mention--grey)

Title blue France (fr-text-title--blue-france)

Title g rey (fr-text-title--grey)

Title red Marianne (fr-text-title--red-marianne)
<p class="fr-text-action-high--blue-france fr-p-1v">Action-high blue France (fr-text-action-high--blue-france)</p> <p class="fr-text-action-high--grey fr-p-1v">Action-high grey (fr-text-action-high--grey)</p> <p class="fr-text-action-high--red-marianne fr-p-1v">Action-high red Marianne (fr-text-action-high--red-marianne)</p> <p class="fr-text-default--error fr-p-1v">Default error (fr-text-default--error)</p> <p class="fr-text-default--grey fr-p-1v">Default grey (fr-text-default--grey)</p> <p class="fr-text-default--info fr-p-1v">Default info (fr-text-default--info)</p> <p class="fr-text-default--success fr-p-1v">Default success (fr-text-default--success)</p> <p class="fr-text-default--warning fr-p-1v">Default warning (fr-text-default--warning)</p> <p class="fr-text-inverted--blue-france fr-p-1v fr-background-action-high--blue-france">Inverted blue France (fr-text-inverted--blue-france)</p> <p class="fr-text-inverted--error fr-p-1v fr-background-flat--error">Inverted error (fr-text-inverted--error)</p> <p class="fr-text-inverted--grey fr-p-1v fr-background-flat--grey">Inverted grey (fr-text-inverted--grey)</p> <p class="fr-text-inverted--info fr-p-1v fr-background-flat--info">Inverted info (fr-text-inverted--info)</p> <p class="fr-text-inverted--red-marianne fr-p-1v fr-background-action-high--red-marianne">Inverted red Marianne (fr-text-inverted--red-marianne)</p> <p class="fr-text-inverted--success fr-p-1v fr-background-flat--success">Inverted success (fr-text-inverted--success)</p> <p class="fr-text-inverted--warning fr-p-1v fr-background-flat--warning">Inverted warning (fr-text-inverted--warning)</p> <p class="fr-text-label--blue-france fr-p-1v">Label blue France (fr-text-label--blue-france)</p> <p class="fr-text-label--grey fr-p-1v">Label grey (fr-text-label--grey)</p> <p class="fr-text-label--red-marianne fr-p-1v">Label red Marianne (fr-text-label--red-marianne)</p> <p class="fr-text-mention--grey fr-p-1v">Mention grey (fr-text-mention--grey)</p> <p class="fr-text-title--blue-france fr-p-1v">Title blue France (fr-text-title--blue-france)</p> <p class="fr-text-title--grey fr-p-1v">Title g rey (fr-text-title--grey)</p> <p class="fr-text-title--red-marianne fr-p-1v">Title red Marianne (fr-text-title--red-marianne)</p>

Icons (icons)

Functional icons are visual symbols that accompany the user in his actions and help him understand the interface.

Add circle (filled) (fr-icon-add-circle-fill)

Add circle (fr-icon-add-circle-line)

Add (fr-icon-add-line)

Alert (filled) (fr-icon-alert-fill)

Alert (fr-icon-alert-line)

Arrow down (fr-icon-arrow-down-line)

Arrow down short (fr-icon-arrow-down-s-line)

Arrow go back (filled) (fr-icon-arrow-go-back-fill)

Arrow go back (fr-icon-arrow-go-back-line)

Arrow left (fr-icon-arrow-left-line)

Arrow left short (fr-icon-arrow-left-s-line)

Arrow right down circle fill (fr-icon-arrow-right-down-circle-fill)

Arrow right (fr-icon-arrow-right-line)

Arrow right short (fr-icon-arrow-right-s-line)

Arrow right up circle fill (fr-icon-arrow-right-up-circle-fill)

Arrow up (filled) (fr-icon-arrow-up-fill)

Arrow up (fr-icon-arrow-up-line)

Arrow up short (filled) (fr-icon-arrow-up-s-fill)

Arrow up short (fr-icon-arrow-up-s-line)

Attachment (filled) (fr-icon-attachment-fill)

Attachment (fr-icon-attachment-line)

Calendar (filled) (fr-icon-calendar-fill)

Calendar (fr-icon-calendar-line)

Check (fr-icon-check-line)

Checkbox circle (filled) (fr-icon-checkbox-circle-fill)

Checkbox circle (fr-icon-checkbox-circle-line)

Close circle (filled) (fr-icon-close-circle-fill)

Close circle (fr-icon-close-circle-line)

Close (fr-icon-close-line)

Dailymotion (filled) (fr-icon-daily-motion-fill)

Dailymotion (fr-icon-daily-motion-line)

Delete (filled) (fr-icon-delete-fill)

Delete (fr-icon-delete-line)

Download (fr-icon-download-line)

Edit (filled) (fr-icon-edit-fill)

Edit (fr-icon-edit-line)

Equal circle (filled) (fr-icon-equal-circle-fill)

Equalizer (filled) (fr-icon-equalizer-fill)

Equalizer (fr-icon-equalizer-line)

Error warning (filled) (fr-icon-error-warning-fill)

Error warning (fr-icon-error-warning-line)

External link (fr-icon-external-link-line)

Eye (filled) (fr-icon-eye-fill)

Eye (fr-icon-eye-line)

Eye off (filled) (fr-icon-eye-off-fill)

Eye off (fr-icon-eye-off-line)

Facebook (filled) (fr-icon-facebook-fill)

File download (filled) (fr-icon-file-download-fill)

File download (fr-icon-file-download-line)

File (filled) (fr-icon-file-fill)

File (fr-icon-file-line)

File PDF (filled) (fr-icon-file-pdf-fill)

File PDF (fr-icon-file-pdf-line)

Filter (filled) (fr-icon-filter-fill)

Filter (fr-icon-filter-line)

Github (filled) (fr-icon-github-fill)

Github (fr-icon-github-line)

Home 4 (filled) (fr-icon-home-4-fill)

Home 4 (fr-icon-home-4-line)

Image (filled) (fr-icon-image-fill)

Image (fr-icon-image-line)

Information (filled) (fr-icon-information-fill)

Information (fr-icon-information-line)

Instagram (filled) (fr-icon-instagram-fill)

Instagram (fr-icon-instagram-line)

Line chart (filled) (fr-icon-line-chart-fill)

Line chart (fr-icon-line-chart-line)

Linkedin box (filled) (fr-icon-linkedin-box-fill)

Lock (filled) (fr-icon-lock-fill)

Lock (fr-icon-lock-line)

Mail (filled) (fr-icon-mail-fill)

Mail (fr-icon-mail-line)

Map pin 2 (filled) (fr-icon-map-pin-2-fill)

Map pin 2 (fr-icon-map-pin-2-line)

Menu 2 (filled) (fr-icon-menu-2-line)

Menu (filled) (fr-icon-menu-fill)

npmjs (filled) (fr-icon-npmjs-fill)

npmjs (fr-icon-npmjs-line)

pause-circle (filled) (fr-icon-pause-circle-fill)

pause-circle (fr-icon-pause-circle-line)

Phone (filled) (fr-icon-phone-fill)

Phone (fr-icon-phone-line)

Play (filled) (fr-icon-play-fill)

Play (fr-icon-play-line)

Printer (filled) (fr-icon-printer-fill)

Printer (fr-icon-printer-line)

Question (filled) (fr-icon-question-fill)

Question (fr-icon-question-line)

Remixicon (filled) (fr-icon-remixicon-fill)

Remixicon (fr-icon-remixicon-line)

Road map (filled) (fr-icon-road-map-fill)

Road map (fr-icon-road-map-line)

RSS (filled) (fr-icon-rss-fill)

RSS (fr-icon-rss-line)

Save (filled) (fr-icon-save-fill)

Save (fr-icon-save-line)

Search (filled) (fr-icon-search-fill)

Search (fr-icon-search-line)

Slack (filled) (fr-icon-slack-fill)

Slack (fr-icon-slack-line)

Snapchat (filled) (fr-icon-snapchat-fill)

Snapchat (fr-icon-snapchat-line)

Subtract (fr-icon-subtract-line)

Telegram (filled) (fr-icon-telegram-fill)

Telegram (fr-icon-telegram-line)

Theme (filled) (fr-icon-theme-fill)

Threads (filled) (fr-icon-threads-fill)

Threads (fr-icon-threads-line)

Tiktok (filled) (fr-icon-tiktok-fill)

Tiktok (fr-icon-tiktok-line)

Timer (filled) (fr-icon-timer-fill)

Timer (fr-icon-timer-line)

Twitch (filled) (fr-icon-twitch-fill)

Twitch (fr-icon-twitch-line)

Twitter (filled) (fr-icon-twitter-fill)

Twitter (fr-icon-twitter-line)

Twitter - X (filled) (fr-icon-twitter-x-fill)

Twitter - X (fr-icon-twitter-x-line)

Upload 2 (filled) (fr-icon-upload-2-fill)

Upload 2 (fr-icon-upload-2-line)

User (filled) (fr-icon-user-fill)

User (fr-icon-user-line)

Vimeo (filled) (fr-icon-vimeo-fill)

Vimeo (fr-icon-vimeo-line)

Volume down (filled) (fr-icon-volume-down-fill)

Volume down (fr-icon-volume-down-line)

Volume mute (filled) (fr-icon-volume-mute-fill)

Volume mute (fr-icon-volume-mute-line)

Volume up (filled) (fr-icon-volume-up-fill)

Volume up (fr-icon-volume-up-line)

Youtube (filled) (fr-icon-youtube-fill)

Youtube (fr-icon-youtube-line)

Zoom in (filled) (fr-icon-zoom-in-fill)

Zoom in (fr-icon-zoom-in-line)

Zoom out (filled) (fr-icon-zoom-out-fill)

Zoom out (fr-icon-zoom-out-line)
<p class="fr-icon-account-fill">Account (filled) (fr-icon-account-fill)</p> <p class="fr-icon-account-line">Account (fr-icon-account-line)</p> <p class="fr-icon-add-circle-fill">Add circle (filled) (fr-icon-add-circle-fill)</p> <p class="fr-icon-add-circle-line">Add circle (fr-icon-add-circle-line)</p> <p class="fr-icon-add-line">Add (fr-icon-add-line)</p> <p class="fr-icon-alert-fill">Alert (filled) (fr-icon-alert-fill)</p> <p class="fr-icon-alert-line">Alert (fr-icon-alert-line)</p> <p class="fr-icon-arrow-down-line">Arrow down (fr-icon-arrow-down-line)</p> <p class="fr-icon-arrow-down-s-line">Arrow down short (fr-icon-arrow-down-s-line)</p> <p class="fr-icon-arrow-go-back-fill">Arrow go back (filled) (fr-icon-arrow-go-back-fill)</p> <p class="fr-icon-arrow-go-back-line">Arrow go back (fr-icon-arrow-go-back-line)</p> <p class="fr-icon-arrow-left-line">Arrow left (fr-icon-arrow-left-line)</p> <p class="fr-icon-arrow-left-s-line">Arrow left short (fr-icon-arrow-left-s-line)</p> <p class="fr-icon-arrow-right-down-circle-fill">Arrow right down circle fill (fr-icon-arrow-right-down-circle-fill)</p> <p class="fr-icon-arrow-right-line">Arrow right (fr-icon-arrow-right-line)</p> <p class="fr-icon-arrow-right-s-line">Arrow right short (fr-icon-arrow-right-s-line)</p> <p class="fr-icon-arrow-right-up-circle-fill">Arrow right up circle fill (fr-icon-arrow-right-up-circle-fill)</p> <p class="fr-icon-arrow-up-fill">Arrow up (filled) (fr-icon-arrow-up-fill)</p> <p class="fr-icon-arrow-up-line">Arrow up (fr-icon-arrow-up-line)</p> <p class="fr-icon-arrow-up-s-fill">Arrow up short (filled) (fr-icon-arrow-up-s-fill)</p> <p class="fr-icon-arrow-up-s-line">Arrow up short (fr-icon-arrow-up-s-line)</p> <p class="fr-icon-attachment-fill">Attachment (filled) (fr-icon-attachment-fill)</p> <p class="fr-icon-attachment-line">Attachment (fr-icon-attachment-line)</p> <p class="fr-icon-calendar-fill">Calendar (filled) (fr-icon-calendar-fill)</p> <p class="fr-icon-calendar-line">Calendar (fr-icon-calendar-line)</p> <p class="fr-icon-check-line">Check (fr-icon-check-line)</p> <p class="fr-icon-checkbox-circle-fill">Checkbox circle (filled) (fr-icon-checkbox-circle-fill)</p> <p class="fr-icon-checkbox-circle-line">Checkbox circle (fr-icon-checkbox-circle-line)</p> <p class="fr-icon-close-circle-fill">Close circle (filled) (fr-icon-close-circle-fill)</p> <p class="fr-icon-close-circle-line">Close circle (fr-icon-close-circle-line)</p> <p class="fr-icon-close-line">Close (fr-icon-close-line)</p> <p class="fr-icon-daily-motion-fill">Dailymotion (filled) (fr-icon-daily-motion-fill)</p> <p class="fr-icon-daily-motion-line">Dailymotion (fr-icon-daily-motion-line)</p> <p class="fr-icon-delete-fill">Delete (filled) (fr-icon-delete-fill)</p> <p class="fr-icon-delete-line">Delete (fr-icon-delete-line)</p> <p class="fr-icon-download-line">Download (fr-icon-download-line)</p> <p class="fr-icon-edit-fill">Edit (filled) (fr-icon-edit-fill)</p> <p class="fr-icon-edit-line">Edit (fr-icon-edit-line)</p> <p class="fr-icon-equal-circle-fill">Equal circle (filled) (fr-icon-equal-circle-fill)</p> <p class="fr-icon-equalizer-fill">Equalizer (filled) (fr-icon-equalizer-fill)</p> <p class="fr-icon-equalizer-line">Equalizer (fr-icon-equalizer-line)</p> <p class="fr-icon-error-warning-fill">Error warning (filled) (fr-icon-error-warning-fill)</p> <p class="fr-icon-error-warning-line">Error warning (fr-icon-error-warning-line)</p> <p class="fr-icon-external-link-line">External link (fr-icon-external-link-line)</p> <p class="fr-icon-eye-fill">Eye (filled) (fr-icon-eye-fill)</p> <p class="fr-icon-eye-line">Eye (fr-icon-eye-line)</p> <p class="fr-icon-eye-off-fill">Eye off (filled) (fr-icon-eye-off-fill)</p> <p class="fr-icon-eye-off-line">Eye off (fr-icon-eye-off-line)</p> <p class="fr-icon-facebook-fill">Facebook (filled) (fr-icon-facebook-fill)</p> <p class="fr-icon-file-download-fill">File download (filled) (fr-icon-file-download-fill)</p> <p class="fr-icon-file-download-line">File download (fr-icon-file-download-line)</p> <p class="fr-icon-file-fill">File (filled) (fr-icon-file-fill)</p> <p class="fr-icon-file-line">File (fr-icon-file-line)</p> <p class="fr-icon-file-pdf-fill">File PDF (filled) (fr-icon-file-pdf-fill)</p> <p class="fr-icon-file-pdf-line">File PDF (fr-icon-file-pdf-line)</p> <p class="fr-icon-filter-fill">Filter (filled) (fr-icon-filter-fill)</p> <p class="fr-icon-filter-line">Filter (fr-icon-filter-line)</p> <p class="fr-icon-github-fill">Github (filled) (fr-icon-github-fill)</p> <p class="fr-icon-github-line">Github (fr-icon-github-line)</p> <p class="fr-icon-home-4-fill">Home 4 (filled) (fr-icon-home-4-fill)</p> <p class="fr-icon-home-4-line">Home 4 (fr-icon-home-4-line)</p> <p class="fr-icon-image-fill">Image (filled) (fr-icon-image-fill)</p> <p class="fr-icon-image-line">Image (fr-icon-image-line)</p> <p class="fr-icon-information-fill">Information (filled) (fr-icon-information-fill)</p> <p class="fr-icon-information-line">Information (fr-icon-information-line)</p> <p class="fr-icon-instagram-fill">Instagram (filled) (fr-icon-instagram-fill)</p> <p class="fr-icon-instagram-line">Instagram (fr-icon-instagram-line)</p> <p class="fr-icon-line-chart-fill">Line chart (filled) (fr-icon-line-chart-fill)</p> <p class="fr-icon-line-chart-line">Line chart (fr-icon-line-chart-line)</p> <p class="fr-icon-linkedin-box-fill">Linkedin box (filled) (fr-icon-linkedin-box-fill)</p> <p class="fr-icon-lock-fill">Lock (filled) (fr-icon-lock-fill)</p> <p class="fr-icon-lock-line">Lock (fr-icon-lock-line)</p> <p class="fr-icon-mail-fill">Mail (filled) (fr-icon-mail-fill)</p> <p class="fr-icon-mail-line">Mail (fr-icon-mail-line)</p> <p class="fr-icon-map-pin-2-fill">Map pin 2 (filled) (fr-icon-map-pin-2-fill)</p> <p class="fr-icon-map-pin-2-line">Map pin 2 (fr-icon-map-pin-2-line)</p> <p class="fr-icon-menu-2-line">Menu 2 (filled) (fr-icon-menu-2-line)</p> <p class="fr-icon-menu-fill">Menu (filled) (fr-icon-menu-fill)</p> <p class="fr-icon-npmjs-fill">npmjs (filled) (fr-icon-npmjs-fill)</p> <p class="fr-icon-npmjs-line">npmjs (fr-icon-npmjs-line)</p> <p class="fr-icon-pause-circle-fill">pause-circle (filled) (fr-icon-pause-circle-fill)</p> <p class="fr-icon-pause-circle-line">pause-circle (fr-icon-pause-circle-line)</p> <p class="fr-icon-phone-fill">Phone (filled) (fr-icon-phone-fill)</p> <p class="fr-icon-phone-line">Phone (fr-icon-phone-line)</p> <p class="fr-icon-play-fill">Play (filled) (fr-icon-play-fill)</p> <p class="fr-icon-play-line">Play (fr-icon-play-line)</p> <p class="fr-icon-printer-fill">Printer (filled) (fr-icon-printer-fill)</p> <p class="fr-icon-printer-line">Printer (fr-icon-printer-line)</p> <p class="fr-icon-question-fill">Question (filled) (fr-icon-question-fill)</p> <p class="fr-icon-question-line">Question (fr-icon-question-line)</p> <p class="fr-icon-remixicon-fill">Remixicon (filled) (fr-icon-remixicon-fill)</p> <p class="fr-icon-remixicon-line">Remixicon (fr-icon-remixicon-line)</p> <p class="fr-icon-road-map-fill">Road map (filled) (fr-icon-road-map-fill)</p> <p class="fr-icon-road-map-line">Road map (fr-icon-road-map-line)</p> <p class="fr-icon-rss-fill">RSS (filled) (fr-icon-rss-fill)</p> <p class="fr-icon-rss-line">RSS (fr-icon-rss-line)</p> <p class="fr-icon-save-fill">Save (filled) (fr-icon-save-fill)</p> <p class="fr-icon-save-line">Save (fr-icon-save-line)</p> <p class="fr-icon-search-fill">Search (filled) (fr-icon-search-fill)</p> <p class="fr-icon-search-line">Search (fr-icon-search-line)</p> <p class="fr-icon-slack-fill">Slack (filled) (fr-icon-slack-fill)</p> <p class="fr-icon-slack-line">Slack (fr-icon-slack-line)</p> <p class="fr-icon-snapchat-fill">Snapchat (filled) (fr-icon-snapchat-fill)</p> <p class="fr-icon-snapchat-line">Snapchat (fr-icon-snapchat-line)</p> <p class="fr-icon-subtract-line">Subtract (fr-icon-subtract-line)</p> <p class="fr-icon-telegram-fill">Telegram (filled) (fr-icon-telegram-fill)</p> <p class="fr-icon-telegram-line">Telegram (fr-icon-telegram-line)</p> <p class="fr-icon-theme-fill">Theme (filled) (fr-icon-theme-fill)</p> <p class="fr-icon-threads-fill">Threads (filled) (fr-icon-threads-fill)</p> <p class="fr-icon-threads-line">Threads (fr-icon-threads-line)</p> <p class="fr-icon-tiktok-fill">Tiktok (filled) (fr-icon-tiktok-fill)</p> <p class="fr-icon-tiktok-line">Tiktok (fr-icon-tiktok-line)</p> <p class="fr-icon-timer-fill">Timer (filled) (fr-icon-timer-fill)</p> <p class="fr-icon-timer-line">Timer (fr-icon-timer-line)</p> <p class="fr-icon-twitch-fill">Twitch (filled) (fr-icon-twitch-fill)</p> <p class="fr-icon-twitch-line">Twitch (fr-icon-twitch-line)</p> <p class="fr-icon-twitter-fill">Twitter (filled) (fr-icon-twitter-fill)</p> <p class="fr-icon-twitter-line">Twitter (fr-icon-twitter-line)</p> <p class="fr-icon-twitter-x-fill">Twitter - X (filled) (fr-icon-twitter-x-fill)</p> <p class="fr-icon-twitter-x-line">Twitter - X (fr-icon-twitter-x-line)</p> <p class="fr-icon-upload-2-fill">Upload 2 (filled) (fr-icon-upload-2-fill)</p> <p class="fr-icon-upload-2-line">Upload 2 (fr-icon-upload-2-line)</p> <p class="fr-icon-user-fill">User (filled) (fr-icon-user-fill)</p> <p class="fr-icon-user-line">User (fr-icon-user-line)</p> <p class="fr-icon-vimeo-fill">Vimeo (filled) (fr-icon-vimeo-fill)</p> <p class="fr-icon-vimeo-line">Vimeo (fr-icon-vimeo-line)</p> <p class="fr-icon-volume-down-fill">Volume down (filled) (fr-icon-volume-down-fill)</p> <p class="fr-icon-volume-down-line">Volume down (fr-icon-volume-down-line)</p> <p class="fr-icon-volume-mute-fill">Volume mute (filled) (fr-icon-volume-mute-fill)</p> <p class="fr-icon-volume-mute-line">Volume mute (fr-icon-volume-mute-line)</p> <p class="fr-icon-volume-up-fill">Volume up (filled) (fr-icon-volume-up-fill)</p> <p class="fr-icon-volume-up-line">Volume up (fr-icon-volume-up-line)</p> <p class="fr-icon-youtube-fill">Youtube (filled) (fr-icon-youtube-fill)</p> <p class="fr-icon-youtube-line">Youtube (fr-icon-youtube-line)</p> <p class="fr-icon-zoom-in-fill">Zoom in (filled) (fr-icon-zoom-in-fill)</p> <p class="fr-icon-zoom-in-line">Zoom in (fr-icon-zoom-in-line)</p> <p class="fr-icon-zoom-out-fill">Zoom out (filled) (fr-icon-zoom-out-fill)</p> <p class="fr-icon-zoom-out-line">Zoom out (fr-icon-zoom-out-line)</p>

Icon sizes (icons_size)

The icons are available in four sizes. It is possible to modify the size of the icons using specific modifiers.

SM (fr-fi--sm)

MD (fr-fi--md)

LG (fr-fi--lg)
<p class="fr-fi--sm fr-icon-alert-fill">SM (fr-fi--sm)</p> <p class="fr-fi--md fr-icon-alert-fill">MD (fr-fi--md)</p> <p class="fr-fi--lg fr-icon-alert-fill">LG (fr-fi--lg)</p>

Container type (container_type)

External margins and gutters.

Default (fr-container)

Fluid (fr-container--fluid)
<p class="fr-container fr-background-alt--grey">Default (fr-container)</p> <p class="fr-container--fluid fr-background-alt--grey">Fluid (fr-container--fluid)</p>

Margin (spacing_margin)

0 (fr-m-0)

auto (fr-m-auto)

0.5v (fr-m-0-5v)

1v (fr-m-1v)

1.5v (fr-m-1-5v)

1w (fr-m-1w)

3v (fr-m-3v)

2w (fr-m-2w)

5v (fr-m-5v)

3w (fr-m-3w)

4w (fr-m-4w)

5w (fr-m-5w)

6w (fr-m-6w)

7w (fr-m-7w)

8w (fr-m-8w)

9w (fr-m-9w)

12w (fr-m-12w)

15w (fr-m-15w)
<p class="fr-m-0 fr-background-alt--grey">0 (fr-m-0)</p> <p class="fr-m-auto fr-background-alt--grey">auto (fr-m-auto)</p> <p class="fr-m-0-5v fr-background-alt--grey">0.5v (fr-m-0-5v)</p> <p class="fr-m-1v fr-background-alt--grey">1v (fr-m-1v)</p> <p class="fr-m-1-5v fr-background-alt--grey">1.5v (fr-m-1-5v)</p> <p class="fr-m-1w fr-background-alt--grey">1w (fr-m-1w)</p> <p class="fr-m-3v fr-background-alt--grey">3v (fr-m-3v)</p> <p class="fr-m-2w fr-background-alt--grey">2w (fr-m-2w)</p> <p class="fr-m-5v fr-background-alt--grey">5v (fr-m-5v)</p> <p class="fr-m-3w fr-background-alt--grey">3w (fr-m-3w)</p> <p class="fr-m-4w fr-background-alt--grey">4w (fr-m-4w)</p> <p class="fr-m-5w fr-background-alt--grey">5w (fr-m-5w)</p> <p class="fr-m-6w fr-background-alt--grey">6w (fr-m-6w)</p> <p class="fr-m-7w fr-background-alt--grey">7w (fr-m-7w)</p> <p class="fr-m-8w fr-background-alt--grey">8w (fr-m-8w)</p> <p class="fr-m-9w fr-background-alt--grey">9w (fr-m-9w)</p> <p class="fr-m-12w fr-background-alt--grey">12w (fr-m-12w)</p> <p class="fr-m-15w fr-background-alt--grey">15w (fr-m-15w)</p>

Margin top (spacing_margin_top)

0 (fr-mt-0)

auto (fr-mt-auto)

0.5v (fr-mt-0-5v)

1v (fr-mt-1v)

1.5v (fr-mt-1-5v)

1w (fr-mt-1w)

3v (fr-mt-3v)

2w (fr-mt-2w)

5v (fr-mt-5v)

3w (fr-mt-3w)

4w (fr-mt-4w)

5w (fr-mt-5w)

6w (fr-mt-6w)

7w (fr-mt-7w)

8w (fr-mt-8w)

9w (fr-mt-9w)

12w (fr-mt-12w)

15w (fr-mt-15w)
<p class="fr-mt-0 fr-background-alt--grey">0 (fr-mt-0)</p> <p class="fr-mt-auto fr-background-alt--grey">auto (fr-mt-auto)</p> <p class="fr-mt-0-5v fr-background-alt--grey">0.5v (fr-mt-0-5v)</p> <p class="fr-mt-1v fr-background-alt--grey">1v (fr-mt-1v)</p> <p class="fr-mt-1-5v fr-background-alt--grey">1.5v (fr-mt-1-5v)</p> <p class="fr-mt-1w fr-background-alt--grey">1w (fr-mt-1w)</p> <p class="fr-mt-3v fr-background-alt--grey">3v (fr-mt-3v)</p> <p class="fr-mt-2w fr-background-alt--grey">2w (fr-mt-2w)</p> <p class="fr-mt-5v fr-background-alt--grey">5v (fr-mt-5v)</p> <p class="fr-mt-3w fr-background-alt--grey">3w (fr-mt-3w)</p> <p class="fr-mt-4w fr-background-alt--grey">4w (fr-mt-4w)</p> <p class="fr-mt-5w fr-background-alt--grey">5w (fr-mt-5w)</p> <p class="fr-mt-6w fr-background-alt--grey">6w (fr-mt-6w)</p> <p class="fr-mt-7w fr-background-alt--grey">7w (fr-mt-7w)</p> <p class="fr-mt-8w fr-background-alt--grey">8w (fr-mt-8w)</p> <p class="fr-mt-9w fr-background-alt--grey">9w (fr-mt-9w)</p> <p class="fr-mt-12w fr-background-alt--grey">12w (fr-mt-12w)</p> <p class="fr-mt-15w fr-background-alt--grey">15w (fr-mt-15w)</p>

Margin bottom (spacing_margin_bottom)

0 (fr-mb-0)

auto (fr-mb-auto)

0.5v (fr-mb-0-5v)

1v (fr-mb-1v)

1.5v (fr-mb-1-5v)

1w (fr-mb-1w)

3v (fr-mb-3v)

2w (fr-mb-2w)

5v (fr-mb-5v)

3w (fr-mb-3w)

4w (fr-mb-4w)

5w (fr-mb-5w)

6w (fr-mb-6w)

7w (fr-mb-7w)

8w (fr-mb-8w)

9w (fr-mb-9w)

12w (fr-mb-12w)

15w (fr-mb-15w)
<p class="fr-mb-0 fr-background-alt--grey">0 (fr-mb-0)</p> <p class="fr-mb-auto fr-background-alt--grey">auto (fr-mb-auto)</p> <p class="fr-mb-0-5v fr-background-alt--grey">0.5v (fr-mb-0-5v)</p> <p class="fr-mb-1v fr-background-alt--grey">1v (fr-mb-1v)</p> <p class="fr-mb-1-5v fr-background-alt--grey">1.5v (fr-mb-1-5v)</p> <p class="fr-mb-1w fr-background-alt--grey">1w (fr-mb-1w)</p> <p class="fr-mb-3v fr-background-alt--grey">3v (fr-mb-3v)</p> <p class="fr-mb-2w fr-background-alt--grey">2w (fr-mb-2w)</p> <p class="fr-mb-5v fr-background-alt--grey">5v (fr-mb-5v)</p> <p class="fr-mb-3w fr-background-alt--grey">3w (fr-mb-3w)</p> <p class="fr-mb-4w fr-background-alt--grey">4w (fr-mb-4w)</p> <p class="fr-mb-5w fr-background-alt--grey">5w (fr-mb-5w)</p> <p class="fr-mb-6w fr-background-alt--grey">6w (fr-mb-6w)</p> <p class="fr-mb-7w fr-background-alt--grey">7w (fr-mb-7w)</p> <p class="fr-mb-8w fr-background-alt--grey">8w (fr-mb-8w)</p> <p class="fr-mb-9w fr-background-alt--grey">9w (fr-mb-9w)</p> <p class="fr-mb-12w fr-background-alt--grey">12w (fr-mb-12w)</p> <p class="fr-mb-15w fr-background-alt--grey">15w (fr-mb-15w)</p>

Margin left (spacing_margin_left)

0 (fr-ml-0)

auto (fr-ml-auto)

0.5v (fr-ml-0-5v)

1v (fr-ml-1v)

1.5v (fr-ml-1-5v)

1w (fr-ml-1w)

3v (fr-ml-3v)

2w (fr-ml-2w)

5v (fr-ml-5v)

3w (fr-ml-3w)

4w (fr-ml-4w)

5w (fr-ml-5w)

6w (fr-ml-6w)

7w (fr-ml-7w)

8w (fr-ml-8w)

9w (fr-ml-9w)

12w (fr-ml-12w)

15w (fr-ml-15w)
<p class="fr-ml-0 fr-background-alt--grey">0 (fr-ml-0)</p> <p class="fr-ml-auto fr-background-alt--grey">auto (fr-ml-auto)</p> <p class="fr-ml-0-5v fr-background-alt--grey">0.5v (fr-ml-0-5v)</p> <p class="fr-ml-1v fr-background-alt--grey">1v (fr-ml-1v)</p> <p class="fr-ml-1-5v fr-background-alt--grey">1.5v (fr-ml-1-5v)</p> <p class="fr-ml-1w fr-background-alt--grey">1w (fr-ml-1w)</p> <p class="fr-ml-3v fr-background-alt--grey">3v (fr-ml-3v)</p> <p class="fr-ml-2w fr-background-alt--grey">2w (fr-ml-2w)</p> <p class="fr-ml-5v fr-background-alt--grey">5v (fr-ml-5v)</p> <p class="fr-ml-3w fr-background-alt--grey">3w (fr-ml-3w)</p> <p class="fr-ml-4w fr-background-alt--grey">4w (fr-ml-4w)</p> <p class="fr-ml-5w fr-background-alt--grey">5w (fr-ml-5w)</p> <p class="fr-ml-6w fr-background-alt--grey">6w (fr-ml-6w)</p> <p class="fr-ml-7w fr-background-alt--grey">7w (fr-ml-7w)</p> <p class="fr-ml-8w fr-background-alt--grey">8w (fr-ml-8w)</p> <p class="fr-ml-9w fr-background-alt--grey">9w (fr-ml-9w)</p> <p class="fr-ml-12w fr-background-alt--grey">12w (fr-ml-12w)</p> <p class="fr-ml-15w fr-background-alt--grey">15w (fr-ml-15w)</p>

Margin right (spacing_margin_right)

0 (fr-mr-0)

auto (fr-mr-auto)

0.5v (fr-mr-0-5v)

1v (fr-mr-1v)

1.5v (fr-mr-1-5v)

1w (fr-mr-1w)

3v (fr-mr-3v)

2w (fr-mr-2w)

5v (fr-mr-5v)

3w (fr-mr-3w)

4w (fr-mr-4w)

5w (fr-mr-5w)

6w (fr-mr-6w)

7w (fr-mr-7w)

8w (fr-mr-8w)

9w (fr-mr-9w)

12w (fr-mr-12w)

15w (fr-mr-15w)
<p class="fr-mr-0 fr-background-alt--grey">0 (fr-mr-0)</p> <p class="fr-mr-auto fr-background-alt--grey">auto (fr-mr-auto)</p> <p class="fr-mr-0-5v fr-background-alt--grey">0.5v (fr-mr-0-5v)</p> <p class="fr-mr-1v fr-background-alt--grey">1v (fr-mr-1v)</p> <p class="fr-mr-1-5v fr-background-alt--grey">1.5v (fr-mr-1-5v)</p> <p class="fr-mr-1w fr-background-alt--grey">1w (fr-mr-1w)</p> <p class="fr-mr-3v fr-background-alt--grey">3v (fr-mr-3v)</p> <p class="fr-mr-2w fr-background-alt--grey">2w (fr-mr-2w)</p> <p class="fr-mr-5v fr-background-alt--grey">5v (fr-mr-5v)</p> <p class="fr-mr-3w fr-background-alt--grey">3w (fr-mr-3w)</p> <p class="fr-mr-4w fr-background-alt--grey">4w (fr-mr-4w)</p> <p class="fr-mr-5w fr-background-alt--grey">5w (fr-mr-5w)</p> <p class="fr-mr-6w fr-background-alt--grey">6w (fr-mr-6w)</p> <p class="fr-mr-7w fr-background-alt--grey">7w (fr-mr-7w)</p> <p class="fr-mr-8w fr-background-alt--grey">8w (fr-mr-8w)</p> <p class="fr-mr-9w fr-background-alt--grey">9w (fr-mr-9w)</p> <p class="fr-mr-12w fr-background-alt--grey">12w (fr-mr-12w)</p> <p class="fr-mr-15w fr-background-alt--grey">15w (fr-mr-15w)</p>

Padding (spacing_padding)

0 (fr-p-0)

auto (fr-p-auto)

0.5v (fr-p-0-5v)

1v (fr-p-1v)

1.5v (fr-p-1-5v)

1w (fr-p-1w)

3v (fr-p-3v)

2w (fr-p-2w)

5v (fr-p-5v)

3w (fr-p-3w)

4w (fr-p-4w)

5w (fr-p-5w)

6w (fr-p-6w)

7w (fr-p-7w)

8w (fr-p-8w)

9w (fr-p-9w)

12w (fr-p-12w)

15w (fr-p-15w)
<p class="fr-p-0 fr-background-alt--grey">0 (fr-p-0)</p> <p class="fr-p-auto fr-background-alt--grey">auto (fr-p-auto)</p> <p class="fr-p-0-5v fr-background-alt--grey">0.5v (fr-p-0-5v)</p> <p class="fr-p-1v fr-background-alt--grey">1v (fr-p-1v)</p> <p class="fr-p-1-5v fr-background-alt--grey">1.5v (fr-p-1-5v)</p> <p class="fr-p-1w fr-background-alt--grey">1w (fr-p-1w)</p> <p class="fr-p-3v fr-background-alt--grey">3v (fr-p-3v)</p> <p class="fr-p-2w fr-background-alt--grey">2w (fr-p-2w)</p> <p class="fr-p-5v fr-background-alt--grey">5v (fr-p-5v)</p> <p class="fr-p-3w fr-background-alt--grey">3w (fr-p-3w)</p> <p class="fr-p-4w fr-background-alt--grey">4w (fr-p-4w)</p> <p class="fr-p-5w fr-background-alt--grey">5w (fr-p-5w)</p> <p class="fr-p-6w fr-background-alt--grey">6w (fr-p-6w)</p> <p class="fr-p-7w fr-background-alt--grey">7w (fr-p-7w)</p> <p class="fr-p-8w fr-background-alt--grey">8w (fr-p-8w)</p> <p class="fr-p-9w fr-background-alt--grey">9w (fr-p-9w)</p> <p class="fr-p-12w fr-background-alt--grey">12w (fr-p-12w)</p> <p class="fr-p-15w fr-background-alt--grey">15w (fr-p-15w)</p>

Padding top (spacing_padding_top)

0 (fr-pt-0)

auto (fr-pt-auto)

0.5v (fr-pt-0-5v)

1v (fr-pt-1v)

1.5v (fr-pt-1-5v)

1w (fr-pt-1w)

3v (fr-pt-3v)

2w (fr-pt-2w)

5v (fr-pt-5v)

3w (fr-pt-3w)

4w (fr-pt-4w)

5w (fr-pt-5w)

6w (fr-pt-6w)

7w (fr-pt-7w)

8w (fr-pt-8w)

9w (fr-pt-9w)

12w (fr-pt-12w)

15w (fr-pt-15w)
<p class="fr-pt-0 fr-background-alt--grey">0 (fr-pt-0)</p> <p class="fr-pt-auto fr-background-alt--grey">auto (fr-pt-auto)</p> <p class="fr-pt-0-5v fr-background-alt--grey">0.5v (fr-pt-0-5v)</p> <p class="fr-pt-1v fr-background-alt--grey">1v (fr-pt-1v)</p> <p class="fr-pt-1-5v fr-background-alt--grey">1.5v (fr-pt-1-5v)</p> <p class="fr-pt-1w fr-background-alt--grey">1w (fr-pt-1w)</p> <p class="fr-pt-3v fr-background-alt--grey">3v (fr-pt-3v)</p> <p class="fr-pt-2w fr-background-alt--grey">2w (fr-pt-2w)</p> <p class="fr-pt-5v fr-background-alt--grey">5v (fr-pt-5v)</p> <p class="fr-pt-3w fr-background-alt--grey">3w (fr-pt-3w)</p> <p class="fr-pt-4w fr-background-alt--grey">4w (fr-pt-4w)</p> <p class="fr-pt-5w fr-background-alt--grey">5w (fr-pt-5w)</p> <p class="fr-pt-6w fr-background-alt--grey">6w (fr-pt-6w)</p> <p class="fr-pt-7w fr-background-alt--grey">7w (fr-pt-7w)</p> <p class="fr-pt-8w fr-background-alt--grey">8w (fr-pt-8w)</p> <p class="fr-pt-9w fr-background-alt--grey">9w (fr-pt-9w)</p> <p class="fr-pt-12w fr-background-alt--grey">12w (fr-pt-12w)</p> <p class="fr-pt-15w fr-background-alt--grey">15w (fr-pt-15w)</p>

Padding bottom (spacing_padding_bottom)

0 (fr-pb-0)

auto (fr-pb-auto)

0.5v (fr-pb-0-5v)

1v (fr-pb-1v)

1.5v (fr-pb-1-5v)

1w (fr-pb-1w)

3v (fr-pb-3v)

2w (fr-pb-2w)

5v (fr-pb-5v)

3w (fr-pb-3w)

4w (fr-pb-4w)

5w (fr-pb-5w)

6w (fr-pb-6w)

7w (fr-pb-7w)

8w (fr-pb-8w)

9w (fr-pb-9w)

12w (fr-pb-12w)

15w (fr-pb-15w)
<p class="fr-pb-0 fr-background-alt--grey">0 (fr-pb-0)</p> <p class="fr-pb-auto fr-background-alt--grey">auto (fr-pb-auto)</p> <p class="fr-pb-0-5v fr-background-alt--grey">0.5v (fr-pb-0-5v)</p> <p class="fr-pb-1v fr-background-alt--grey">1v (fr-pb-1v)</p> <p class="fr-pb-1-5v fr-background-alt--grey">1.5v (fr-pb-1-5v)</p> <p class="fr-pb-1w fr-background-alt--grey">1w (fr-pb-1w)</p> <p class="fr-pb-3v fr-background-alt--grey">3v (fr-pb-3v)</p> <p class="fr-pb-2w fr-background-alt--grey">2w (fr-pb-2w)</p> <p class="fr-pb-5v fr-background-alt--grey">5v (fr-pb-5v)</p> <p class="fr-pb-3w fr-background-alt--grey">3w (fr-pb-3w)</p> <p class="fr-pb-4w fr-background-alt--grey">4w (fr-pb-4w)</p> <p class="fr-pb-5w fr-background-alt--grey">5w (fr-pb-5w)</p> <p class="fr-pb-6w fr-background-alt--grey">6w (fr-pb-6w)</p> <p class="fr-pb-7w fr-background-alt--grey">7w (fr-pb-7w)</p> <p class="fr-pb-8w fr-background-alt--grey">8w (fr-pb-8w)</p> <p class="fr-pb-9w fr-background-alt--grey">9w (fr-pb-9w)</p> <p class="fr-pb-12w fr-background-alt--grey">12w (fr-pb-12w)</p> <p class="fr-pb-15w fr-background-alt--grey">15w (fr-pb-15w)</p>

Padding left (spacing_padding_left)

0 (fr-pl-0)

auto (fr-pl-auto)

0.5v (fr-pl-0-5v)

1v (fr-pl-1v)

1.5v (fr-pl-1-5v)

1w (fr-pl-1w)

3v (fr-pl-3v)

2w (fr-pl-2w)

5v (fr-pl-5v)

3w (fr-pl-3w)

4w (fr-pl-4w)

5w (fr-pl-5w)

6w (fr-pl-6w)

7w (fr-pl-7w)

8w (fr-pl-8w)

9w (fr-pl-9w)

12w (fr-pl-12w)

15w (fr-pl-15w)
<p class="fr-pl-0 fr-background-alt--grey">0 (fr-pl-0)</p> <p class="fr-pl-auto fr-background-alt--grey">auto (fr-pl-auto)</p> <p class="fr-pl-0-5v fr-background-alt--grey">0.5v (fr-pl-0-5v)</p> <p class="fr-pl-1v fr-background-alt--grey">1v (fr-pl-1v)</p> <p class="fr-pl-1-5v fr-background-alt--grey">1.5v (fr-pl-1-5v)</p> <p class="fr-pl-1w fr-background-alt--grey">1w (fr-pl-1w)</p> <p class="fr-pl-3v fr-background-alt--grey">3v (fr-pl-3v)</p> <p class="fr-pl-2w fr-background-alt--grey">2w (fr-pl-2w)</p> <p class="fr-pl-5v fr-background-alt--grey">5v (fr-pl-5v)</p> <p class="fr-pl-3w fr-background-alt--grey">3w (fr-pl-3w)</p> <p class="fr-pl-4w fr-background-alt--grey">4w (fr-pl-4w)</p> <p class="fr-pl-5w fr-background-alt--grey">5w (fr-pl-5w)</p> <p class="fr-pl-6w fr-background-alt--grey">6w (fr-pl-6w)</p> <p class="fr-pl-7w fr-background-alt--grey">7w (fr-pl-7w)</p> <p class="fr-pl-8w fr-background-alt--grey">8w (fr-pl-8w)</p> <p class="fr-pl-9w fr-background-alt--grey">9w (fr-pl-9w)</p> <p class="fr-pl-12w fr-background-alt--grey">12w (fr-pl-12w)</p> <p class="fr-pl-15w fr-background-alt--grey">15w (fr-pl-15w)</p>

Padding right (spacing_padding_right)

0 (fr-pr-0)

auto (fr-pr-auto)

0.5v (fr-pr-0-5v)

1v (fr-pr-1v)

1.5v (fr-pr-1-5v)

1w (fr-pr-1w)

3v (fr-pr-3v)

2w (fr-pr-2w)

5v (fr-pr-5v)

3w (fr-pr-3w)

4w (fr-pr-4w)

5w (fr-pr-5w)

6w (fr-pr-6w)

7w (fr-pr-7w)

8w (fr-pr-8w)

9w (fr-pr-9w)

12w (fr-pr-12w)

15w (fr-pr-15w)
<p class="fr-pr-0 fr-background-alt--grey">0 (fr-pr-0)</p> <p class="fr-pr-auto fr-background-alt--grey">auto (fr-pr-auto)</p> <p class="fr-pr-0-5v fr-background-alt--grey">0.5v (fr-pr-0-5v)</p> <p class="fr-pr-1v fr-background-alt--grey">1v (fr-pr-1v)</p> <p class="fr-pr-1-5v fr-background-alt--grey">1.5v (fr-pr-1-5v)</p> <p class="fr-pr-1w fr-background-alt--grey">1w (fr-pr-1w)</p> <p class="fr-pr-3v fr-background-alt--grey">3v (fr-pr-3v)</p> <p class="fr-pr-2w fr-background-alt--grey">2w (fr-pr-2w)</p> <p class="fr-pr-5v fr-background-alt--grey">5v (fr-pr-5v)</p> <p class="fr-pr-3w fr-background-alt--grey">3w (fr-pr-3w)</p> <p class="fr-pr-4w fr-background-alt--grey">4w (fr-pr-4w)</p> <p class="fr-pr-5w fr-background-alt--grey">5w (fr-pr-5w)</p> <p class="fr-pr-6w fr-background-alt--grey">6w (fr-pr-6w)</p> <p class="fr-pr-7w fr-background-alt--grey">7w (fr-pr-7w)</p> <p class="fr-pr-8w fr-background-alt--grey">8w (fr-pr-8w)</p> <p class="fr-pr-9w fr-background-alt--grey">9w (fr-pr-9w)</p> <p class="fr-pr-12w fr-background-alt--grey">12w (fr-pr-12w)</p> <p class="fr-pr-15w fr-background-alt--grey">15w (fr-pr-15w)</p>

Text titles & styles (typography)

To give greater editorial and graphic freedom, without harming the information hierarchy and referencing, we offer several levels of alternative titles (display).

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>

Alternative font (alternative-font)

Use of the Spectral is limited to secondary, minor, or distinguishable information.

Spectral typography (fr-text--alt)
<p class="fr-text--alt">Spectral typography (fr-text--alt)</p>