Sources (Sources)

Les sources informent explicitement l’utilisateur de l’origine d’un article. Elles peuvent se présenter avec une cocarde (petite icône ronde d’identification de la marque) ou sans.

Usage

• Le composant sources est une des informations (métadonnées) associées à un article.
• Chaque article est lié à une seule source.
• Elle peut être utilisée dans le *détail article (article complet) ou dans une liste d’articles.
• La source peut être un lien, mais uniquement lorsqu’elle est dans un détail article.

Bonnes pratiques

• Le nom de la marque en toutes lettres.

Style & code

Cas minimal

Pour l’utilisation minimale de la source il suffit d’utiliser la classe su-source pour styler le texte.

<span class="su-source">Ouest-France</span>

Source avec cocarde

Pour ajouter la cocarde à la source il faut ajouter la classes su-cockade-xx (où  « xx » représente la marque) pour afficher la cocarde.

<span class="su-source su-cockade-of">Ouest-France</span>

Version négative :

<span class="su-source su-cockade-of su-negative">Ouest-France</span>
<div class="su-negative">
    <span class="su-source su-cockade-of">Ouest-France</span>
</div>

Source dans un article

Dans un contenu éditorial, la source est légèrement plus grande.

<div class="su-article">
    <span class="su-source su-cockade-of">Ouest-France</span>
</div>

Version négative :

<div class="su-article su-negative">
    <span class="su-source su-cockade-of">Ouest-France</span>
</div>

Source avec lien

Dans un article, il peut être nécessaire de mettre un lien sur la source de l’article pour pointer vers son origine. Toutefois, ce lien doit rester neutre visuellement, il ne peut porter les couleurs de la marque du site puisque les sources peuvent être extérieures au site.

Dans ce cas, il faut ajouter le lien dans le composant.

<div class="su-article">
    <span class="su-source su-cockade-of"><a href="#">Ouest-France</a></span>
</div>

Version négative :

<div class="su-article su-negative">
    <span class="su-source su-cockade-of"><a href="#">Ouest-France</a></span>
</div>

Source dans une liste d’articles

Pour un article dans une liste d’article, le style du texte s’adapte grâce à la classe su-articles-list ou à la classe su-articles-area, au choix, positionnée sur une balise parente.

Pour rappel, une source dans une liste d’article ne doit pas avoir de lien.

<section class="su-articles-area">
    <span class="su-source">Ouest-France</span>
</secion>
<ul class="su-articles-list">
    <li>
        <span class="su-source su-cockade-of">Ouest-France</span>
    </li>
</ul>

Source sans texte dans une liste d’articles

Il est possible d’afficher une cocarde seule, sans texte. Pour cela seule la classe su-cockade-of est nécessaire.

<span class="su-cockade-of"></span>

Source avec texte en aria-description

Ce cas spécial permet d’afficher du contenu aux lecteurs sans que celui-ci ait du poids SEO. Le CSS viendra afficher le contenu de l’aria-description. On peut utiliser la cocarde ou non… Cette solution n’est prévue que pour les listes d’articles, la source étant une information importante dans les articles pour les moteurs de recherche.

<div class="su-articles-list">
    <span class="su-source" aria-description="Ouest-France"></span><br />
    <span class="su-source su-cockade-of" aria-description="Ouest-France"></span>
</div>

Catalogue des cocardes

Vous trouverez la liste des cocardes dans les ressources.