Standfirst (Chapeau)

Le chapeau est un texte d’introduction relativement court dont les objectifs sont essentiellement de compléter le titre, afin d’apporter un supplément d’information et de susciter le désir d’en lire plus. Il s’agit le plus souvent d’une synthèse du sujet qui va être développé. Il est positionné juste après le titre dans une liste d’article ou un détail article et c’est l’élément le plus important après ce titre et la photo.

Usage

Le chapeau se positionne toujours après le titre principal de l’article.
Il est facultatif.

Bonnes pratiques

Le chapeau ne doit pas être un résumé de l’intégralité de l’article (ce qui pourrait dissuader de la lecture de cet article).
Il ne doit pas être composé du début de l’article.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>).

Le chapeau est réservé au contenu éditorial. Il est donc lié aux classes su-article et su-articles-list qui englobent ces zones. Il est identifié par la classe su-standfirst. L’essentiel de son style est porté par cette classe unique su-standfirst. Toutefois, la taille du texte dépend de la situation du chapeau, (liste d’articles ou détail article).

Chapeau dans une liste d’articles

<div class="su-articles-list">
    <article>
        <p class="su-standfirst">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
</div>

Chapeau dans un article complet

<article class="su-article">
    <p class="su-standfirst">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Chapeau sur fond sombre

En ajoutant la classe su-negative sur le chapeau ou sur un parent, il est possible de l’adapter à un fond sombre.

<div class="su-articles-list">
    <article class="su-negative">
        <p class="su-standfirst">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
</div>

Liste des classes disponibles

su-standfirst
su-articles-list (zone éditoriale d’une liste d’article)
su-article (zone éditoriale d’un article complet)
su-negative