Styles de texte

Tout ce qu'il faut pour mettre en forme sobrement des contenus texte.

Styles de base

Les éléments de base ont été stylés de façon la plus légre possible afin de premettre d'en faire une base solide et stable au reste du CSS, et de pouvoir être utilisé sans ajout de classe dans le corps des pages.

See the Pen base - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

p
a
h1, h2, h3, h4, h5, h6
ul, ol
blockquote, cite

Mixins de texte

Elles permettent de faire de petite corrections de mise en forme ponctuelles sans toucher au CSS global et créer de nouvelles classes.

class="text_size"

See the Pen Text little - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

text_size

x-small
small
large
x-large

Text color

La classe a privilégier est text_color qui est plus résiliente.

Les autres classes sont mises à disposition au cas où il faudrait faire co-exister plusieurs couleurs (par exemple dans un tableau).

See the Pen Text colors by Margot Nadot (@MagNadAnn) on CodePen.

text_color
text_green
text_blue
text_red
text_yellow

text_charcoal
text_cream
text_pearl
text_white

Text align

Sur mobile, text_left et text_right sont annulées pour revenir à leur alignement hérité (souvent le centrage) pour s'adapter élégamment à la mise en une seule colonne.

See the Pen Text align - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

text_left
text_center
text_right

class="text_on-photo"

Mise en scène ici dans un hero.

See the Pen Text on photo - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

text_on-photo

Listes simples améliorées

See the Pen list simple - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

list-simple_arrow
list-simple_long-arrow
list-simple_double-arrow

Texte en colonnes

Classes text_columns_2 ou text_columns_3 pour entourer le texte à répartir en colonnes sur les grands écrans

⚠️ Ne pas utiliser sur des sections de texte trop longue : il ne faut pas que l'internaute ait à re-scroller vers le haut pour remonter en haut de la deuxième colonne.

class="text_columns"

See the Pen text columns - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

text_columns_2
text_columns_3

Exergues

Classe à placer autour du passage que l'on souhaite mettre (très) en valeur.

La fonction d'une exergue est d'accrocher le regard et l'intérêt de l'internaute et de lui donner envie de se plonger dans le contenu.

class="exergue"

See the Pen exergue - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

exergue