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>

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.

Vous pouvez soit créer le lien avec les classes du composant, soit l’intégrer dans le composant.

<div class="su-article">
    <a href="#" class="su-source su-cockade-of">Ouest-France</a><br />
    <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.

<ul class="su-articles-list">
    <li>
        <span class="su-source">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

• 20 minutes su-cockade-20m
• Cinq Planètes su-cockade-5p
• Amphiscience su-cockade-a
• Actu.fr su-cockade-af
• API su-cockade-api
• Breton su-cockade-b
• Bretagne Culture Diversité su-cockade-bcd
• Bretons en Cuisine su-cockade-bec
• Billie Jean King Cup su-cockade-bjkc
• Bricoleur Pro su-cockade-bp
• Chemin d’Avenir su-cockade-ca
• Coupe Davis su-cockade-cd
• Comptoir des Pêcheurs su-cockade-cdp
• Clazz radio su-cockade-clr
• Chasse-Marée su-cockade-cm
• Le Courrier de l’Ouest su-cockade-co
• Caroline Pastorelli su-cockade-cp
• Christophe Rodo su-cockade-cr
• Le Drenche su-cockade-d
• Energy Observe su-cockade-eo
• Éditions Ouest-France su-cockade-eof
• Fondation 1Océan su-cockade-f1o
• Foot amateur su-cockade-fa
• Fédération Française de Voile su-cockade-ffv
• FranceLive su-cockade-fl
• Giro d’Italia su-cockade-gi
• Hit West su-cockade-hw
• Infolocale su-cockade-i
• Journal des lycées su-cockade-jdl
• J’aime jardiner su-cockade-jj
• Kifim su-cockade-k
• Les Éclaireurs su-cockade-le
• Le Marin su-cockade-lm
• Lire Magazine su-cockade-lmag
• Lacme Production su-cockade-lp
• MCE TV su-cockade-mce
• Mag des animaux su-cockade-mda
• Mag du chat su-cockade-mdchat
• Mag du chien su-cockade-mdchien
• Mag de la conso su-cockade-mdlc
• Made in Foot su-cockade-mif
• Le Maine Libre su-cockade-ml
• Ôdelices su-cockade-o
• L’Ouest Éclair su-cockade-oe
• Ouest-France su-cockade-of
• Océane radio su-cockade-or
• Pur Beurre su-cockade-pb
• Prix de la démocratie su-cockade-pdld
• Publi Hebdos su-cockade-ph
• Pause maison su-cockade-pm
• Presse Océan su-cockade-po
• Quand partir su-cockade-qp
• Sain et naturel su-cockade-sen
• Territoires Audacieux su-cockade-ta
• Tête à Modeler su-cockade-tam
• The Conversation su-cockade-tc
• Terre de Jardins su-cockade-tdj
• TV5 Monde su-cockade-tm
• TéléNantes su-cockade-tn
• TV Rennes su-cockade-tr
• Voyages à l’Ouest su-cockade-vao
• Voiles et Voiliers su-cockade-vv
• Web TV Culture su-cockade-wtc
• Web TV Tourisme su-cockade-wtt