Petits composants

Des composants ponctuels pour agrémenter l'interface.

Deux petits composants pour faciliter l'insersion de logos dans les pages.

<a class="logo logo_TdL">
    <img />

<ul class="logos list">
  <li>
    <a class="logo">
      <img />

class="logo"

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

logo
logo_TdL

class="logos"

On peut utilier la mixin text_size pour diminuer ou augmenter la taille des logos de toute la ligne.

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

logos-line

logo
vertical
horizontal

Favicon

Pour le site de Terre de liens et ses applications qui n'ont pas d'icone.

Pictogrammes

Les maquettes ont été réalisées avec la librairie de pictogrammes Font Awesome.

Figures

Images légendées (ou non) dans le corps d'une page.

On peut tout à fait utiliser des figures dans un diaporama.

Dans l'exemple ci-dessous, la légende est courte, un h5 est utilisé pour la mettre en valeur. Ceci est à éviter sur des légende de plus de deux lignes.

<figure>
    <img>
        <figcaption>

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

Tags

A utiliser dans les tuiles, les champs select multiples, avec du texte à l'intérieur ou des pictogrammes.

<ul class="tags list">
    <li class="tag>

<p class="tags">
    <a class="tag>

<ul class="tags list">
    <li class="tag tag_icon>
        <i class="fas fa-file-pdf"></i>

<span class="tag>
    <a class="button icon tight primary">
        <span class="button__icon">
            <i class="fal fa-times">

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

<ul> / <p>*
Pour réunir des tags
tags
list
list_v*

<a> / <span> / <li>
tag
tag_icon
info*
success*
warning*
danger*

<a>*
Pour pouvoir retirer le tag (d'une liste par exemple)
icon


* facultatif

Pastille nombre

<div class="number-sticker-wrap">*
    <span class="number-sticker">  

* facultatif

class="number-sticker"

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

number-sticker-wrap
number-sticker