Live title (Titre En direct)

Un article en direct est un article à contenu mis à jour en continu en fonction des évènements, pendant une période précise (comme pour une rencontre sportive, un débat…). Son titre se base bien sûr, sur le composant Tiles (titres), mais il comporte une identification particulière grâce à l’ajout d’une icône.

Usage

• Une icône permet d’identifier visuellement un article en direct.
• Une animation sur cette icône peut être utilisée pour intensifier son importance.
• Un texte « DIRECT » peut aussi être ajouté entre l’icône et le début du titre, à la fois pour expliciter le contexte et pour donner l’information aux lecteurs d’écran.

Bonnes pratiques

• Une fois le direct terminé, le titre perd sa spécificité et donc l’icône comme le texte « DIRECT ».

Style & code

Comme le composant titre standard, le composant titre en direct est utilisé dans 2 cas :

• dans un article affiché dans une liste d’articles
• dans la page d’un détail article (article complet).

Il est bien sûr construit à partir du composant titre standard auquel on ajoute sa spécificité en direct.

Article dans une liste

Un article en direct, est un type d’article à part, il garde donc toujours ce type et c'est pourquoi il portera toujours une classe su-live-open ou su-live-closed (suivant son statut, ouvert ou fermé). En fonction de ce statut, l’icône illustrant les articles en direct sera affichée ou non sur un article enfant de su-articles-list. Par contre, le mot « DIRECT » dont la présence est liée aussi au statut ne dépend pas de ce composant mais du texte enregistré avec l’article.

Contrairement à l’icône des articles premium, celle du direct ne peut être affichée qu’en début de titre. La classe su-title du composant Titles (titres) est aussi indispensable dans cas de figure.

<div class="su-articles-list">
    <article class="su-articles-list-item su-live-open">
        <h2 class="su-title"><a href="">DIRECT. Giro 2023 : Thibaut Pinot fait le ménage dans le final, Warren Barguil décroché</a></h2>
    </article>
    <article class="su-articles-list-item su-live-closed">
        <h2 class="su-title"><a href="">Giro 2023 : Thibaut Pinot fait le ménage dans le final, Warren Barguil décroché</a></h2>
    </article>
</div>

Détail article

Pour le titre direct d’un détail article, il suffit d’ajouter la classe su-live-open ou su-live-closed à côté de la classe su-article. Ces classes fonctionnent de la même façon que le cas ci-dessus d’un article dans une liste. À ce jour la charte prévoit que l’icône soit animée en détail article. Cela reste toutefois une capacité optionnelle grâce à la classe su-animated-icon à positionner sur le même élément que la classe su-live. Cette classe peut d’ailleurs être ajoutée à un article dans une liste, même si c’est déconseillé pour éviter le côté « sapin de Noël » en cas de nombreux articles en direct…

<article class="su-article su-live-open su-animated-icon">
    <h1>DIRECT. Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>
</article>
<article class="su-article su-live-closed su-animated-icon">
    <h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>
</article>