Les tuiles sont une façon élégante et souvent imagée de mettre en valeur un lien vers une autre page, en complément des liens, boutons et call to action.
Tuiles
Liste de tuile
Une liste de tuile utilise les mixins list : list à minima et list_v pour une liste verticale.
Composition d'une tuile
- Chaque tuile est identifiée a minima par la classe tile.
- Elle peut aussi comporter une classe de taille (tile_1-2, tile_1-3 etc.)
- Une tuile contient obligatoirement un lien (tile__link) qui enveloppe le reste.
- Selon les modèles, une tuile peut contenir un titre, une intro, une vignette, un bouton read more. Pour plus de détail, voir les différents modèles de tuile ci-après.
<ul class="list tiles"> <li class="tile"> <a class="tile__link"> <div class="vignette">* <div class="tile__content"> <p class="tile__pre-title">* <p class="tile__title">** <div class="tile__intro">* <p class="button__wrap">* <span class="button button_round small warning button_read-more">* * factultatif ** p ou h4 en fonction de l'effet recherché, de la taille des tuiles...
Vignette, tags etc.
Sur les tuiles avec vignette, celles-ci jouent un rôle important pour afficher des tags. Se référer aux composants vignette et au composant tag.
class="tiles list"
See the Pen tiles - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
list list_v* tiles
tile tile_1-2, tile_1-3, tile_2-3, tile_1-4, tile_3-4 tile__link tile__content tile__title tile__intro * facultatif
Tuiles image
Les tuiles image servent à mettre en valeur les propositions éditoriales fortes des sites de Terre de Liens.
On les utilise sur les pages importantes comme la page d'accueil, en ouverture vers des contenus selectionnés, en rapport avec la page où elles sont situées, généralement sur une seule ligne.
On ne les utilise pas au sein de grandes listes. Pour cet usage on préfèrera les tuiles texte-image.
class="tile tile_image"
See the Pen tile - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
tile tile_image vignette crédit tags tile__container ⚠️ classe propre à ce type de tuile tile__content tile__title tile__intro button read-more
Tuiles Text-média
Elle existent en format vertical ou horizontal en fonction de besoin de mise en page, de la largeur disponible, du nombre de tuiles à afficher...
class="tile tile_text-image_h"
See the Pen tile text-media - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
class="tile tile_text-image_v"
See the Pen tile text-media_h - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
tile tile_text-image_v / tile_text-image_h vignette crédit tags tile__content tile__title tile__intro button read-more
Tuile(s) dans un hero
La Tuile hero est en fait une simplification de la tuile image, qui ne garde que le texte et le bouton read-more.
On peut en afficher une seule ou bien plusieurs à l'intérieur d'une class tiles
class="tile tile_hero" avec 1 tuile
See the Pen tile hero - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
class="tile tile_hero" avec 2 tuiles
See the Pen tile hero x3 - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
tile tile_hero tile__content tile__title tile__intro button read-more
Tuiles icon-label
Petite tuile simple utile pour donner accès à des ressources, des sites, des pages ou des applis (comme dans le lanceur d'appli).
À gauche, on peut utiliser une icon Font Awesome ou bien une petite image.
class="tile tile_icon-label"
See the Pen tile icon-label - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
tile
tile_icon-label
tile__icon ⚠️ classe propre à ce type de tuile
tile__content
tile__title
tile__intro