Style Guide

This is some text inside of a div block.

Classes de Structure

Structure de base définie et flexible que nous pouvons utiliser sur toutes les pages ou la plupart d'entre elles.

page-wrapper

main-wrapper

container + [data-container]

section + [data-section]

button + [button-type]

button + [button-size]

button-nolink

primary

button-group

Wrapper et Flexbox

Les balises HTML définissent les styles d'en-tête par défaut.

*hw

*vw

HTML Heading Tags

Les balises HTML définissent les styles d'en-tête par défaut.

All H1 Headings

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All H2 Headings

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All H3 Headings

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All H4 Headings

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All H5 Headings

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All H6 Headings

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

Autres HTML Tags

Les balises HTML définissent les styles de texte par défaut.

All paragraphs

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif. Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All links

All Links

All quotes

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.
Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.
Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. L'exemple de texte est utilisé à titre indicatif.

Heading Styles

Classes d'en-têtes lorsque le style typographique ne correspond pas à la balise All Headings.

heading-style-h1

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

heading-style-h2

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

heading-style-h3

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

heading-style-h4

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

heading-style-h5

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

heading-style-h6

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

Classes de Texte

Classes de texte lorsque le style typographique ne correspond pas à la balise HTML par défaut.

Tailles de Texte

text-size-large

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

text-size-medium

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

text-size-regular

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

text-size-small

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

text-size-tiny

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

Style de Textes

text-style-2lines

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

text-style-3lines

Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel. Les exemples de texte vous aident à comprendre à quoi peut ressembler un texte réel.

Text Weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Couleurs

Gérer les textes récurrents et les couleurs d'arrière-plan.

Palette de couleurs

[data-color="brand-first"]

[data-color="brand-second"]

[data-color="accent-first"]

[data-color="accent-second"]

[data-color="system-first"]

system-second

system-third

dark

light

grey

Couleurs de Texte

text-color-black

text-color-grey

text-color-white

Couleur Background

background-color-black

background-color-grey

background-color-white

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Webflow elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.