Preparé pour Tive

Guide de style

Typography

HTML heads-en-têtes

Rubrique 1

Rubrique 2

Rubrique 3

Rubrique 4

Rubrique 5

Rubrique 6

Title Classes

En-tête-XXLarge

en-tête-xlarge

en-tête large

rubrique : médium

rubrique-petit

rubrique-xsmall

Other HTML tags

All Paragraphes (HTML Balise) A Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

All links

Bloquer une citation

Pas de liste à puces
Pas de liste à puces

Pas de liste à puces
Pas de liste à puces

Pas de liste à puces
Pas de liste à puces
Pas de liste à puces

Text Tailles

UNE Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

Text ponderation

poids du texte en gras

poids du texte : medium

normal text weight

light text

text thickness

Espacements entre les lettres du texte

text letter space
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

text spacement of letters on all the width
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

espace normal entre les lettres et le texte
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

serrement espacement entre les lettres et les textes
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

espace des lettres et des textes
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

Text Lines Hauts

hauteur de la ligne de texte x hauteur
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

hauteur de la ligne de texte
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

hauteur de ligne de texte normale
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

short text height
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

text-lineheight-xshort
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

hauteur de ligne de texte : aucune
Lorem ipsum dolor sit amet, consécration adipiscine, élite. Suspendez divers éléments de votre histoire. 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. Aujourd'hui, je n'ai pas de vie risus tristique posuère.

Text styles

style de texte en italique

barré text style

majuscules text style

text-style-nowrap

text style citation

text style link

style de texte - 2 lines

style de texte - 3 lines

text style désactivé

Text colors

couleur du texte : noir

couleur du texte : blanc

Text Alignement

text alignment to left

text alignment center

text alignment to right

Text enrichi

Rubrique 1

Rubrique 2

Rubrique 3

Rubrique 4

Rubrique 5

Rubrique 6

Ceci est une citation en bloc

L'élément de texte enrichi vous permet de créer et de mettre en forme des titres, des paragraphes, des guillemets, des images et des vidéos au même endroit au lieu d'avoir à les ajouter et à les mettre en forme individuellement. Il vous suffit de double-cliquer pour créer facilement du contenu.

Il s'agit d'un lien vers l'intérieur d'un texte enrichi

Elément de liste
Elément de liste
Elément de liste

Elément de liste
Elément de liste
Elément de liste

Rubrique 1

Rubrique 2

Rubrique 3

Rubrique 4

Rubrique 5

Rubrique 6

Ceci est une citation en bloc

Il s'agit d'un lien vers l'intérieur d'un texte enrichi

Elément de liste
Elément de liste
Elément de liste

Elément de liste
Elément de liste
Elément de liste

Colors

Color Scale

Bleu 600

#4285f5

bleu

#091733

blanc

#FFFFFF

Color of fond

.fond couleur-bleu

.fond couleur-noir

.fond couleur-blanc

User interface elements

Boutons

Bouton

Elements of form

Merci ! Votre candidature a été reçue !

Oups ! Une erreur s'est produite lors de l'envoi du formulaire.

Onglets

Icônes

.icon-xxsmall

.icon-xsmall

.icon-petite

.icon-medium

.icon-large

.icone-xlarge

.icon-1x1-xxpetite

.icon-1x1-xpetite

.icon-1x1-petit

.icone-1x1-medium

.icone-1x1-large

.icône-1x1-xlarge

Des images

Hauteur/width of the image 2:1

Hauteur/width of the image 16:9

Hauteur/width of the image 3:2

Hauteur/width of the image 4:3

Hauteur/width of the image 1:1

Fade-ins

Fade In 1st

Fade In 2nd

Fade In 3rd

Fade In 4e

Fade In 5th

Fade In 6ème

Fade In, 1st to right

Fade In, 2nd to right

Fade In, 3e à droite

Fade In, 4th to right

Fade In, 5e à droite

Fade In, 6e à droite

Rubrique Fade-on 0.4

Rubrique Fade-in 0.6

Révèle

Afficher l'image à partir de la gauche

Afficher l'image à partir de la droite

Afficher l'image du haut

Afficher l'image depuis le bas

Espacement

Direction de la marge

.margin-top

.margin-bottom

.marge gauche

.marge droite

.horizontal margin

.marge verticale

Marge size

.marge-0

.petite marge

.margin-xxsmall

.margin-xsmall

.margin-small

.marge moyenne

.marge large

.margin-xlarge

.margin-xxlarge

.énorme marge

.margin-xhuge

.margin-xxhuge

.margin-custom1

.margin-custom2

.margin-custom3

Direction du rembourrage

.haut rembourré

. fond rembourré

.padding-left

.padding-right

.rembourrage horizontal

.rembourrage vertical

Rembourrage size

. remboursement-0

.petit rembourrage

.padding-xxsmall

.padding-xsmall

.small rembourrage

.middle rembourrage

.rembourrage large

.rembourrage x large

.rembourrage XXL

.énorme rembourrage

.padding-xhuge

.padding-xxhuge

.padding-custom1

.padding-custom2

.padding-custom3

Disposition

Récipient

.grand container

.conteneur-support

.petit container

Maximal largers

.max-width-full

.max-width-full-tablet

.max-width-full-mobile-landscape

portrait entièrement mobile à largeur maximale

.max-width-xxsmall

.max-width-xsmall

.max-width-small

.max-width-medium

.max-width-large

.max-largeur-xlarge

.max-width-xxlarge

Other classes

Reactivity

.masquer - masquer sur tous les appareils

.masque-tablette - masquer à partir de la résolution de la tablette

.masque-mobile-landscape - masquer à partir de la résolution paysage mobile

.masque-portrait-mobile - masquer à partir de la résolution portrait mobile

.spectacle - affichage sur tous les appareils

.show-tablet - display from the tablet resolution

.show-mobile-landscape - affichage à partir de la résolution paysage mobile

.afficher-portrait-mobile - affichage à partir de la résolution portrait mobile

Utilité

.z-index-1 - rapproche un élément du z-index, avec z-index à 1

.z-index-2 - rapproche un élément du z-index, avec z-index à 2

.align-center - définit les marges gauche et droite sur automatique, centre un élément dans son div parent

.espace propre - définit tous les espacements à 0, y compris les marges et le remplissage

.div-square - crée et gère la dimension 1:1 d'une division. La magie du CSS

.couche - définit la position absolue avec 0 % de tous les côtés - ajoutez cette classe à un div pour qu'il augmente la taille totale de l'élément parent, et assurez-vous que le div parent contient « position : relative »

. decliquable - définit les événements de pointeur sur aucun événement, empêche toute interaction par clic et survol avec un élément

. cliquable - définit les événements du pointeur sur automatique, permet toutes les interactions par clic et survol avec un élément

.overflow-hidden - définit le débordement sur masqué

.overflow-scroll - définit le débordement pour faire défiler

.overflow-auto - automatic débordement rule

La nymphe Jived Fox saisit une valse rapide.

Commencez Commencez Commencez

La nymphe Jived Fox saisit une valse rapide.

Commencez Commencez Commencez Commencez