Guide de style

Typographie
HTML Headings Tags
HTML tags define default Heading styles.
Toutes les têtes H1

Tête 1

All H2 Headings

Tête 2

Toutes les têtes H3

Tête 3

Toutes les têtes H4

Heading 4

Toutes les têtes H5
Tête 5
Toutes les têtes H6
Tête 6
Classes d'en-tête
Classes d'en-tête lorsque le style typographique ne correspond pas à la balise HTML par défaut.
heading-style-h1

Heading-style-h1

heading-style-h2

Heading-style-h2

heading-style-h3

Heading-style-h3

heading-style-h4

Heading-style-h4

heading-style-h5

Heading-style-h5

heading-style-h6

Heading-style-h6

Autres balises HTML
Les balises HTML définissent des styles de texte par défaut.
Tous les paragraphes

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.

Tous les liens
Tous les liens
All Block Quotes
Bloc Quote
Toutes les listes non classées
  • Pas de bullet list

  • Pas de bullet list

Toutes les listes non classées
  • Pas de bullet list

  • Pas de bullet list

Toutes les listes commandées
  1. Pas de bullet list

  2. Pas de bullet list

  3. Pas de bullet list

Text Sizes
Classes de taille de texte lorsque la taille typographique ne correspond pas à la balise HTML par défaut.
text-size-large

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.

text-size-medium

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.

text-size-regular

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.

text-size-small

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.

text-size-tiny

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.

Text Weights
Classes de poids de texte lorsque le poids typographique ne correspond pas à la balise HTML par défaut.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Styles de texte
Classes de style de texte lorsque le style typographique ne correspond pas à la balise HTML par défaut.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
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.
text-style-3lines
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. 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.
text-style-muted
text-style-muted
Text Alignment
Classes d'alignement de texte lorsque l'alignement typographique ne correspond pas à la balise HTML par défaut.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Texte riche
text-rich-text

Tête 1

Tête 2

Tête 3

Heading 4

Tête 5
Tête 6
This is a block quote

L'élément de texte riche vous permet de créer et de mettre en forme des en-têtes, des paragraphes, des citations, des images et des vidéos en un seul endroit au lieu de devoir les ajouter et les mettre en forme individuellement. Il suffit de double-cliquer pour créer facilement du contenu.

Ceci est un lien à l'intérieur d'un texte riche

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Background Color
Gérer les couleurs d'arrière-plan récurrentes.
background-color-black
background-color-white
background-color-gray
Palette de couleurs Click and paste
Text Color
Gérer les couleurs récurrentes du texte.
text-color-white
text-color-white
text-color-black
text-color-black
Palette de couleurs Click and paste
Éléments d'interface utilisateur
Boutons
bouton
bouton
is-small
bouton
is-secondary
bouton
is-secondary
is-small
bouton
is-link
Pour l'utiliser sur un fond sombre, utilisez simplement la classe d'extension is-alternate
bouton
is-alternate
bouton
is-alternate
is-small
bouton
is-secondary
is-alternate
bouton
is-secondary
is-small
is-alternate
bouton
is-link
is-alternate
Bouton
Boutons avec icônes
bouton
is-icon
bouton
is-small
is-icon
bouton
is-secondary
is-icon
bouton
is-secondary
is-small
is-icon
bouton
is-link
is-icon
Éléments de forme
field-label
entrée de formulaire
entrée de formulaire
is-text-area
entrée de formulaire
is-select-input
form-checkbox
form-radio
bouton
Merci à vous ! Votre soumission a bien été reçue !
Oups ! Quelque chose s'est mal passé lors de la soumission du formulaire.
Icônes (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Icônes (HTML Embed)
Les icônes HTML embarquées vous permettent de contrôler la couleur des icônes au survol.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Classes de structure
Structure de base définie et flexible que nous pouvons utiliser sur toutes ou la plupart des pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
groupe de boutons
Largeurs maximales
Utiliser la propriété CSS de largeur maximale pour contenir le contenu interne à une largeur maximale.
max-width-full
max-width-full-tablet
max-width-full-portrait
max-width-full-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Classes de direction
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Classes de taille
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Margins
Classes de direction
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Classes de taille
marge-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Classes d'utilité
Des classes utilitaires utiles que nous aimons utiliser dans la plupart de nos projets pour construire plus rapidement.
hide
Cet élément est masqué
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
couche
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto