Standfirst (Chapeau)

Le chapeau est un texte généralement court dont les objectifs sont essentiellement de compléter le titre, d’apporter un supplément d’information et de susciter le désir d’en lire plus, par exemple en résumant le propos qui va être développé. C’est l’élément le plus important après le 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’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" style="background: DimGray; padding: 10px">
    <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