Client-First en français — Version 2.1

Guide de style

Client-First est un ensemble de lignes directrices et de stratégies créées par Finsweet pour vous aider à construire des sites Webflow.

Classes pour la 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-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group

Titres

Les balises HTML définissent les styles d'en-tête par défaut. Utilisez les classes d'en-têtes lorsque le style typographique ne correspond pas à la balise HTML par défaut.

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h1

Sample text helps you understand how real text may look.

H2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

H3

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.

heading-style-h3

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.

H4

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

heading-style-h4

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

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.
heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.

H6
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. 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.
heading-style-h6

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. 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.

Autres Tags HTML

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

Tous les paragraphes

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.

Tous les liens
All Links
Toutes les citations
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.
Toutes les listes ordonnées
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Toutes les listes non-ordonnées
  • 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.

Classes de texte

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

Tailles de texte

text-size-large

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

text-size-medium

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

text-size-xregular

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.

text-size-regular

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.

text-size-small

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

text-size-tiny

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

Styles de texte

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines
This CSS style is not supported for Rich Texts on iOS.

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 text-style-2lines

text-style-3lines
This CSS style is not supported for Rich Texts on iOS.

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. 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.

Graisses du texte

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Alignements du texte

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Boutons

Système de classes combinées pour les boutons.

button
Button Text
button
is-secondary
Button Text
button
is-small
Button Text
button
is-secondary
is-small
Button Text
button
is-secondary
is-small
Button Text
button
is-large
Button Text
button
is-large
is-secondary
Button Text
button
is-icon
is-small
Button Text
button
is-icon
is-small
is-secondary
Button Text

Filtres

Système de classes combinées pour les filtres (domaines d'activité).

tags
Collectivité

Couleurs

Gérer les couleurs récurrentes de texte et d'arrière-plan.

Couleurs de texte

text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
text-color-alternate

Couleurs d'arrière-plan

background-color-primary
background-color-secondary
background-color-tertiary
background-color-alternate

Largeurs maximales

Utilisez la propriété CSS max-width pour limiter le contenu interne à une largeur maximale.

max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Paddings

Système d'espacement - Classes de padding. [padding-direction] + [padding-size].

Direction de padding

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Taille de padding

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-gigantic
padding-xgigantic
padding-custom1
padding-custom2
padding-custom3

Marges

Système d'espacement - Classes de marges. [margin-direction] + [margin-size].

Direction des marges

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Taille des marges

margin-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

Spacers

Système d'espacement utilisant des blocs pour le projet.

spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge

Icones

Unifier la taille des icônes. icon-height définit la hauteur des icônes. icon-1x1 définit à la fois la hauteur et la largeur des icônes.
icon-embed est une classe qui permet d'ajuster la hauteur de ligne et de conserver la taille prédéfinie dans l'embed.

icon-embed
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Images

Style par défaut des images

Défaut
Radius

Classes utilitaires

Les classes que nous aimons utiliser dans la plupart de nos projets pour construire plus rapidement. 

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
z-index-3
display-inlineflex
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen

Webflow éléments

Éléments Webflow natifs pré-configurés avec des classes Client-First.

form_component

Exemple de composant pour un formulaire.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
text-rich-text

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 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.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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.
nav_component