Boutons, liens, etc.

La possibilité de relier les pages les unes aux autres est la fonctionnalité qui est au coeur de la naissance du web au début des années 1990.

Pour ce faire, les interfaces sont outillées de liens plus ou moins sophistiqués : du simple lien dans un texte, au Call to action, en passant par le lien proposé dans un menu et de nombreux types de boutons.

Liens

Les liens s'affiche simplement avec la balise html <a> de manière à pouvoir être saisie simplement dans le corps d'un article. Il n'est nécessaire d'ajoutar aucune classe CSS.

<a>

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

<a class="img-link" >

À placer autour de l'image qui doit porter un lien

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

img-link

Boutons

Le composant bouton...

fonctionne avec la balise <a> et la <button>
existe sous3 formes : basic, icon et round
comporte 2 extentions le read-more et le expand
propose 5 déclinaisons colorées : primary, secundary, success, warning, danger
existe en 5 tailles : par défaut, small, x-small, large x-large

class="button basic"

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

<a></a>
<button></button>

class="button icon"

Les button icon sont conçu avec une marge autour qui les rend plus facilement cliquables et propose un espacement harmonieux.

Une version tight permet d'afficher le bouton avec encombrement minimal. Utile par exemple dans un tag.

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

button
icon
tight*

button__icon
Pour contenir le pictogramme et le styler correctement

* facultatif

x-large
large
[sans classe de taille]
small
x-small

class="button round"

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

primary
secundary
success
warning
danger

class="button_read-more"

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

button
round
read-more

class="button_expand"

Ce bouton est contenu dans un composant qui a deux états : shrinked ou expanded. En fonction de l'état de son container, le bouton pointe vers le haut ou le bas.

Il est construit sur la base d'un button icon.

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

is-shrinked
is-expanded

button
icon
expand

Call to action

Le call to action est une manière de mettre en valeur les actions les plus importantes que l'on veut amener lea visiteurice à accomplir.

Sur les sites de Terre de Liens, il occupe toute la largeure de page.

Thèmes et enchaînements

Deux thèmes sont proposés afin de gérer au mieux l'enchaînement avec les sections situées juste au dessus et juste au dessous.

Une attention toute particulière doit être apportée en bas de page où plusieurs bandeaux se succèdent parfois dans les zonings. Il n'est pas souhaitable de placer coup sur coup deux sections avec une trame.

Nous proposons ici de n'utiliser que ces deux thèmes. En cas de besoin, consultez les mixins d'arrière plan pour d'autres déclinaisons.

Thèmes et couleur du texte

Les composants plus complexe que les <a>, les <p> ou les titres (<h3>, <h4>...) nécessiteront probablement que vous appeliez explicitement leur version dark. Se référer à la documentation de chaque composant.

Par exemple ici, sur fond bleu, le bouton utilise son thème secundary.

<section class="fw-section CTA__wrap bg-trame_champs_light bg-l-cream">
    <div class="chimney">*
        <div class="section__container CTA__container">
            <h3 class="CTA__title">
            <div class="CTA__content">

* facultatif

class="CTA__wrap bg-theme_01"

See the Pen Call to Action theme 1- TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

class="CTA__wrap bg-blue_light"