Typographie

Styles de texte

u-text-style-display

Intitulé

u-text-style-h1

Intitulé

u-text-style-h2

Intitulé

u-text-style-h3

Intitulé

u-text-style-h4

Intitulé

u-text-style-h5
Intitulé
u-text-style-h6
Intitulé
u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Poids

u-weight-regular

Lorem ipsum dolor

u-poids-moyen

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Hauteur de ligne

u-line-height-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-huge

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Espacement entre les lettres

espacement-entre-les-lettres-u-réduit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

espacement-entre-lettres-u-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pince de ligne

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Alignement

début de l'alignement u

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignement-centré

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alignment-end

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Transformation de texte

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Encadrement du texte

u-text-wrap-default

Retour à l'en-tête normal. Utile pour réinitialiser le retour à l'en-tête d'un élément enfant si l'élément parent utilise les propriétés « balance » ou « pretty ».

u-text-wrap-balance

Permet de maintenir une largeur de ligne uniforme et constante pour un maximum de six lignes de texte. Idéal pour les contenus courts.

u-text-wrap-pretty

Garantit qu'il y ait plus d'un mot sur la dernière ligne du texte. Idéal pour les contenus longs.

Éléments typographiques

u-rich-text

Intitulé

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figure
Liste ordonnée
  1. Liste ordonnée
  2. quand on n'est pas à l'intérieur
  3. de texte enrichi
  1. Liste ordonnée
  2. lorsqu'on est à l'intérieur
  3. de texte enrichi
Liste non ordonnée
  • Liste non ordonnée
  • quand on n'est pas à l'intérieur
  • de texte enrichi
  • Liste non ordonnée
  • lorsqu'on est à l'intérieur
  • de texte enrichi
Citations en bloc
Citation en bloc lorsqu'elle ne se trouve pas à l'intérieur d'un élément de texte enrichi
Citation en bloc à l'intérieur d'un élément de texte enrichi
u-titre-accent

Titre : mot accentué

Couleur

Thèmes

u-theme-inherit
u-theme-light
u-theme-dark
u-theme-brand

Couleur du texte

u-color-inherit

Lorem ipsum dolor

u-couleur-délavée

Lorem ipsum dolor

Couleur d'arrière-plan

u-fond-transparent
u-background-1
u-background-2
u-arrière-plan-squelette

Flexbox

Utilitaires de direction Flex

u-flex-horizontal-wrap
u-flex-vertical-nowrap
u-flex-horizontal-nowrap
u-flex-vertical-wrap

Align Self Utilities

u-align-self-inherit
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Utilitaires d'alignement des éléments

u-align-items-inherit
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Outils d'alignement du contenu

u-justify-content-inherit
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around

Utilitaires Flex Basis

u-flex-shrink
u-flex-grow
u-flex-sans-rétrécissement

Grille

Services liés au réseau électrique

u-grid-autofit
u-grid-remplissage-automatique
u-grid-custom
u-grid-breakout
u-grid-subgrid

Utilitaires de début de colonne

u-column-start-auto
u-column-start-1
u-column-start-2
u-column-start-3
u-column-start-4
u-column-start-5
u-column-start-6
u-column-start-7
u-column-start-8
u-column-start-9
u-column-start-10
u-column-start-11
u-column-start-12

Utilitaires de colonnes

u-column-span-full
u-column-span-indent
u-column-span-1
u-column-span-2
u-column-span-3
u-column-span-4
u-column-span-5
u-column-span-6
u-column-span-7
u-column-span-8
u-column-span-9
u-column-span-10
u-column-span-11
u-column-span-12

Utilitaires de début de ligne

u-row-start-auto
u-row-start-1
u-row-start-2
u-row-start-3
u-row-start-4
u-row-start-5
u-row-start-6

Utilitaires Row Span

u-row-span-1
u-row-span-2
u-row-span-3
u-row-span-4
u-row-span-5
u-row-span-6

Utilitaires de commande

u-commande-en-premier
u-commande-dernière

Tailles

Gap Utilities

u-gap-inherit
u-gap-gouttière
u-gap-0
u-gap-1
u-gap-2
u-gap-3
u-gap-4
u-gap-5
u-gap-6
u-gap-7
u-gap-8

Utilitaires d'espacement entre les lignes

u-gap-row-inherit
u-gap-row-gutter
u-gap-row-0
u-gap-row-1
u-gap-row-2
u-gap-row-3
u-gap-row-4
u-gap-row-5
u-gap-row-6
u-gap-row-7
u-gap-row-8

Principaux services publics en termes de marge

u-margin-top-auto
u-margin-top-gutter
u-margin-top-text
u-margin-top-0
u-margin-top-1
u-margin-top-2
u-margin-top-3
u-margin-top-4
u-margin-top-5
u-margin-top-6
u-margin-top-7
u-margin-top-8

Utilitaires de marge inférieure

u-margin-bottom-auto
u-margin-bottom-gutter
u-margin-bottom-text
u-margin-bottom-0
u-margin-bottom-1
u-margin-bottom-2
u-margin-bottom-3
u-margin-bottom-4
u-margin-bottom-5
u-margin-bottom-6
u-margin-bottom-7
u-margin-bottom-8

Utilitaires de remplissage

u-padding-sitemargin
u-rembourrage-caniveau
u-padding-0
u-padding-1
u-padding-2
u-padding-3
u-padding-4
u-padding-5
u-padding-6
u-padding-7
u-padding-8
u-padding-small
u-padding-main
u-padding-large

Utilitaires de blocs de remplissage

u-padding-block-sitemargin
u-padding-block-gutter
u-padding-block-0
u-padding-block-1
u-padding-block-2
u-padding-block-3
u-padding-block-4
u-padding-block-5
u-padding-block-6
u-padding-block-7
u-padding-block-8
u-padding-block-small
u-padding-block-main
u-padding-block-large

Utilitaires de remplissage en ligne

u-padding-inline-sitemargin
u-padding-inline-gutter
u-padding-inline-0
u-padding-inline-1
u-padding-inline-2
u-padding-inline-3
u-padding-inline-4
u-padding-inline-5
u-padding-inline-6
u-padding-inline-7
u-padding-inline-8

Principaux utilitaires de remplissage

u-padding-top-sitemargin
u-padding-top-gutter
u-padding-top-0
u-padding-top-1
u-padding-top-2
u-padding-top-3
u-padding-top-4
u-padding-top-5
u-padding-top-6
u-padding-top-7
u-padding-top-8
u-padding-top-small
u-padding-top-main
u-padding-top-large
u-padding-top-pagetop

Fonctions de remplissage du bas

u-padding-bottom-sitemargin
u-padding-bottom-gutter
u-padding-bottom-0
u-padding-bottom-1
u-padding-bottom-2
u-padding-bottom-3
u-padding-bottom-4
u-padding-bottom-5
u-padding-bottom-6
u-padding-bottom-7
u-padding-bottom-8
u-padding-bottom-small
u-padding-bottom-main
u-padding-bottom-large
u-padding-bottom-pagetop

Utilitaires de remplissage à gauche

u-padding-left-sitemargin
u-padding-left-gutter
u-padding-left-0
u-padding-left-1
u-padding-left-2
u-padding-left-3
u-padding-left-4
u-padding-left-5
u-padding-left-6
u-padding-left-7
u-padding-left-8

Utilitaires de remplissage à droite

u-padding-right-sitemargin
u-padding-right-gutter
u-padding-right-0
u-padding-right-1
u-padding-right-2
u-padding-right-3
u-padding-right-4
u-padding-right-5
u-padding-right-6
u-padding-right-7
u-padding-right-8

Utilitaires de rayon de bordure

u-radius-none
u-radius-inherit
u-radius-small
u-radius-main
u-rayon-arrondi

Utilitaires de format d'image

u-ratio-auto
u-ratio-2-1
u-ratio-16-9
u-ratio-3-2
u-ratio-5-4
u-ratio-1-1
u-ratio-4-5
u-ratio-2-3

Divers

Utilitaires d'affichage

u-display-block
u-display-inline-block
u-display-inline-flex
u-display-inline-grid
u-display-inline
u-affichage-contenu
u-display-none
u-hide-if-empty-cms

Utilitaires Overflow

u-overflow-visible
u-overflow-hidden
u-overflow-clip
u-overflow-x-auto
u-overflow-y-auto
u-overflow-hidden-left

Utilitaires Z-Index

u-zindex-négatif
u-zindex-0
u-zindex-unset
u-zindex-1
u-zindex-2
u-zindex-3

Services publics de Position

u-position-static
u-position-relative
u-position-absolute
u-position-fixe
u-position-sticky

Element Utilities

u-grid-wrapper
u-grid
u-content-wrapper
u-image-wrapper
u-image
u-height-full
u-iframe-wrapper
u-iframe
u-overlay
u-eyebrow-{wrapper-layout-marker-text}
u-text
u-button-wrapper
u-video
u-svg
u-path
profilé en U
u-container
u-container-small
u-container-full
u-embed-js
u-embed-css

Autres utilitaires

u-width-auto
u-min-width-auto
u-max-width-none
u-max-width-full
u-width-full
u-height-full
u-height-auto
u-text-trim-off
u-button-wrapper
u-margin-inline-auto
u-margin-trim
u-ignore-trim
u-pointer-on
u-pointer-off
u-object-fit-cover
u-object-fit-contain
u-min-height-screen
u-cover
u-cover-absolute
u-sr-only

Composants

Boutons