Color Icons Others Spacing Typography

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>