Typographie

Fontes

TWK Lausanne

Headings + Body

Type : Sans Serif
Poids de l'échantillon : Normal (400), Medium (500)

Headings

H1 Headings

Élément

H2 Headings

Élément

H3 Headings

Élément

H4 Headings

Élément

H5 Headings
Élément
H6 Headings
Élément
h1
Classe
h2
Classe
h3
Classe
h4
Classe
h5
Classe
h6
Classe

Corps

paragraphe-1.5

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

paragraphe-1.125

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

paragraphe

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

paragraphe-0.9

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

eyebrow
Lorem Ipsum
Toutes les listes commandées
  1. Exemple de liste d'ordres
  2. Exemple de liste d'ordres
Toutes les listes non classées
  • Exemple de liste non ordonnée
  • Exemple de liste non ordonnée

Couleur

Arrière-plan

Blanc

#ffffff
u-bg-whte

Black

#1a1a1a
u-bg-black

Texte

Aa

Black

#1a1a1a
u-text-black
Aa

Gris foncé

#302f2c
u-text-darkgray
Aa

Blanc

#FFFFFF
u-text-white

Composants

Boutons

Bouton
Bouton

Défaut

bouton
Bouton
Bouton

Petit par défaut

bouton
cc-small
Bouton

Secondaire

bouton
cc-secondary
Bouton

Secondaire + Icône droite

bouton
cc-secondary
Bouton

Secondaire + Icône Gauche

bouton
cc-secondary
Bouton

Lumière par défaut

bouton
cc-tertiaire
Bouton

Lumière par défaut + icône droite

bouton
cc-tertiaire
Bouton

Lumière par défaut + icône gauche

bouton
cc-tertiaire
Bouton

Défaut Light Small

bouton
cc-tertiaire
cc-small
Bouton

Blanc par défaut

bouton
cc-tertiaire
cc-small
Suivez-nous sur

Blanc par défaut

bouton
cc-tertiaire
cc-small
Texte

Lien texte

Tous les liens
Texte

Lien de texte Light

u-text-white

Carte

Défaut

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

Texte riche

Tête 1

Tête 2

Tête 3

Heading 4

Tête 5
Tête 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote (même taille de police que le paragraphe-1.25)

Liste des commandes

  1. Item 1
  2. Item 2
  3. Item 3

Liste non ordonnée

  • Item A
  • Item B
  • Item C

Lien texte

Texte en gras

Emphase

Superscript

Subscript

Prevent Style Clean Up

C'est là que vous pouvez stocker les éléments et les classes utilisés dans le code personnalisé afin d'éviter que leurs classes/styles ne soient nettoyés.

Utilities

Marge

Top

u-mt-0
margin-top : 0 ;
u-mt-1
margin-top : 1rem ;
u-mt-2
margin-top : 2rem ;
u-mt-3
margin-top : 3rem ;
u-mt-auto
margin-top : auto ;

Bottom

u-mb-0
margin-bottom : 0 ;
u-mb-1
margin-bottom : 1rem ;
u-mb-2
margin-bottom : 2rem ;
u-mb-3
margin-bottom : 3rem ;

Autres

u-m-0
marge : 0 ;
u-mlr-auto
margin : 0 auto ; (centers element))
u-mr-1
margin-right : 1rem ;
u-mr-0.5
margin-right : 0.5rem ;
u-ml-1
margin-left : 1rem ;

Padding

Top

u-pt-0
padding-top : 0 ;
u-pt-1
padding-top : 1rem ;
u-pt-2
padding-top : 2rem ;
u-pt-3
padding-top : 3rem ;

Bottom

u-pb-0
padding-bottom : 0 ;
u-pb-1
padding-bottom : 1rem ;
u-pb-2
padding-bottom : 2rem ;
u-pb-3
padding-bottom : 3rem ;

Autres

u-p-0
padding : 0 ;
u-p-1
padding : 1rem ;

Débordement

u-overflow-hidden
débordement : masqué ;
u-overflow-visible
overflow : visible ;

Mise en page

Section

section

Conteneur

conteneur

Grille