Channel (Canal)

Le composant canal permet d’informer les utilisateurs sur la provenance d’un média au sens de programme de diffusion, de chaîne… Il s’agit donc d’une information différente et complémentaire à la source.

Usage

• Le composant canal est toujours avant le titre du média.
• Dans un contexte multi-canaux, son affichage est obligatoire.

Bonnes pratiques

• Il ne devrait pas s’afficher sur plus d’une ligne, ce qui implique l’utilisation d’une troncature.

Style & code

Standard

Le composant canal est très simple. Il s’agit d’un <p> portant la classe su-channel. Toutefois, pour respecter la bonne pratique de limiter sa hauteur à une ligne, il est nécessaire d’ajouter aussi la classe su-truncate-1.

<p class="su-channel su-truncate-1">Le canal à l’orange</p>

Sur fond sombre

En cas de fond sombre, utiliser la classe su-negative sur un parent ou sur lui-même.

<div class="su-negative">
    <p class="su-channel su-truncate-1">Le canal à l’orange</p>
</div>

Avec lien

Un canal peut contenir un lien qui renvoie vers un page liée à ce canal.

<p class="su-channel su-truncate-1"><a href="javascript:;">Le canal à l’orange</a></p>

Sur fond sombre

En cas de fond sombre, utiliser la classe su-negative sur un parent ou sur lui-même.

<div class="su-negative">
    <p class="su-channel su-truncate-1">Le canal à l’orange</p>
    <p class="su-channel su-truncate-1"><a href="javascript:;">Le canal à l’orange</a></p>
</div>

Canal dans un article

La version « editoriale » du canal est plus grande grâce à la classe su-article posée sur un parent.

<article class="su-article">
    <p class="su-channel su-big su-truncate-1"><a href="javascript:;">Le canal à l’orange</a></p>
</article>

Sur fond sombre

<article class="su-article su-negative">
    <p class="su-channel su-big su-truncate-1"><a href="javascript:;">Le canal à l’orange</a></p>
</article>