Views (Vues)

Le composant vues permet d’informer les utilisateurs sur le nombre de vues d’un article et sert ainsi d’indicateur de popularité. Il est généralement utilisé pour les vidéos.

Usage

Le nombre de Vues est une métadonnée standard.

• Il est toujours après le titre de l’article.
• Dans une liste d’articles, son affichage est facultatif.
• Dans un détail article, son affichage est aussi facultatif.

Bonnes pratiques

• Si le composant vues est affiché dans les Listes d’Articles, il le sera avec les autres métadonnées (source, date)
• S’il est affiché en Détail Article, il doit l’être avant le corps de l’article.
• Pour un article vidéo, il peut être affiché après la vidéo.
• Au-delà de 999 vues le nombre est arrondi aux centaines et passe en kilo. Ainsi 123 288 deviendra 123,3 k.
• Au-delà de 999 999 vues le nombre est arrondi aux centaines de milliers et passe en méga. Ainsi 4 495 3028 deviendra 4,5 M.

Style & code

Ce composant n’a pas de valeur sémantique HTML, il peut s’agir d’une balise <p> ou d’une simple balise <span> dans laquelle on met le texte donnant l’information chiffrée. Il doit être un enfant de su-metadata afin de récupérer les styles des métadonnées, et doit porter la classe su-views.

Standard

<div class="su-metadata">
    <span class="su-views">125&nbsp;k vues</span>
</div>

Dans un article

Dans un article, il a besoin de la classe su-article en plus pour le passer en mode « contenu éditorial ». Cette classe peut être à côté ou au-dessus de la classe su-metadata.

<div class="su-article">
    <div class="su-metadata">
        <p class="su-views">930&nbsp;k&nbsp;vues</p>
    </div>
</div>
<div class="su-article su-metadata">
    <p class="su-views">930&nbsp;k&nbsp;vues</p>
</div>

Sur fond sombre

En cas de fond sombre, utiliser la classe su-negative.

<section class="su-negative">
    <div class="su-metadata ">
        <span class="su-views">125&nbsp;k&nbsp;vues</span>
    </div>
    <div class="su-article">
        <div class="su-metadata ">
            <span class="su-views">125&nbsp;k&nbsp;vues</span>
        </div>
    </div>
</section>