Color Icons Others Spacing Typography

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>