haut

Cover (Couverture)

Le composant cover permet d’afficher la une de journaux, de magazines, de livres… Il peut inclure quelques informations complémentaires ou des boutons d’action. Il est conçu pour des espaces restreints et peut être utilisé dans une liste ou un carrousel.

Usage

  • Par le tap ou le clic sur l’image ou le texte l’utilisateur peut accéder au détail du produit.
  • Si un seul bouton est présent, il fera la même action que celle sur l’image ou le texte.
  • Si 2 boutons sont présents, l’action sur le bouton primaire sera identique à celle sur l’image ou le texte.

Spécifications

Une couverture est constituée de plusieurs éléments :

  • L’image du produit
  • Un titre (facultatif)
  • Une description (facultatif)
  • Un bouton d’action primaire (facultatif)
  • Un bouton d’action secondaire (facultatif)

Bonnes pratiques

  • Ne pas ajouter de contenu (comme une icône-média, un badge…) sur la photo de couverture, il rendrait celle-ci complexe à comprendre et pourrait être en compétition avec le texte potentiellement présent sur la photo de produit.

Style & code

Dépendances :

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

Couverture standard

Le composant couverture peut être affiché avec différents contenus facultatifs.

N. B. – Étant prévu pour un affichage étroit, dans les exemples ci-dessous on bloque sa largeur à 300px maximum.

Versions basique

On construit une couverture avec un bloc (<div>, <li>…) auquel on ajoute la classe su-cover. L’image portant la classe su-media est placée à l’intérieur, encapsulée dans un lien <a class="su-content-area"> puis une <figure class="su-media-container">.

<div class="su-cover" style="max-width: 300px;">
    <a href="javascript:;" class="su-content-area">
        <figure class="su-media-container">
            <img alt="Couverture de l'Édition du Soir" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
        </figure>
    </a>
</div>

Version avec un titre

À cette version basique, on peut ajouter un titre avec, au choix (en fonction du SEO attendu), un paragraphe <p class="su-title"> ou un <hn class="su-title"> (hn pour h2, h3…)

<div class="su-cover" style="max-width: 300px;">
    <a href="javascript:;" class="su-content-area">
        <figure class="su-media-container">
            <img alt="Couverture de l'Édition du Soir" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
        </figure>
        <p class="su-title">Titre</p>
    </a>
</div>
<hr  />
<div class="su-cover" style="max-width: 300px;">
    <a href="javascript:;" class="su-content-area">
        <figure class="su-media-container">
            <img alt="Couverture de l'Édition du Soir" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
        </figure>
        <h2 class="su-title">Titre</h2>
    </a>
</div>

Si le titre est trop long, il sera tronqué avec insertion de « … » au delà de la 2de ligne.

<div class="su-cover" style="max-width: 300px;">
    <a href="javascript:;" class="su-content-area">
        <figure class="su-media-container">
            <img alt="Couverture de l'Édition du Soir" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
        </figure>
        <p class="su-title">Titre trop long. Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz</p>
    <a>
</div>

Version avec un titre et description

On peut aussi compléter avec une description : <p class="su-description"> (comme le titre, celle-ci est tronquée après 2 lignes).

<div class="su-cover" style="max-width: 300px;">
    <a href="javascript:;" class="su-content-area">
        <figure class="su-media-container">
            <img alt="Couverture de l'Édition du Soir" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
        </figure>
        <h2 class="su-title">Titre</h2>
        <p class="su-description">Description</p>
    </a>
</div>

Version avec titre, description et bouton(s)

Enfin, il est possible de rajouter des boutons sous le contenu. Il peut s’agir d’un seul bouton primaire ou d’un bouton primaire suivi d’un bouton secondaire. Ces boutons peuvent bien sûr être des lien <a> ou des <button>. Ils doivent être inclus dans un <div class="su-buttons-area">.

<div class="su-cover" style="max-width: 300px;">
    <a href="javascript:;" class="su-content-area">
        <figure class="su-media-container">
            <img alt="Couverture d'Édition du Soir" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
        </figure>
        <h2 class="su-title">Titre</h2>
        <p class="su-description">Description</p>
    </a>
    <div class="su-buttons-area">
        <button class="su-button su-primary">Bouton primaire</button>
        <button class="su-button su-secondary">Bouton secondaire</button>
    </div>
</div>

Couvertures dans une liste

Grâce à la grille, le composant peut être intégré dans une liste en colonne ou même un carrousel pour présenter plusieurs produits. Dans ce cas le bloc du composant peut être directement un <li> de la liste.

Pour uniformiser la hauteur du visuel malgré les variations de hauteur des couvertures, il est nécessaire de les encadrer avec des classes de gestion du ratio et de l’orientation de l’image. Il faut donc rajouter les classes su-portrait su-ratio-4-3 à côté de su-media-container.

<ul class="su-row su-row-gap">
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du N°220 - Mai 2025" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media" >
            </figure>
            <h2 class="su-title">Bretons</h2>
            <p class="su-description">Description</p>
        </a>
    </li>
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du Vendredi 25 avril 2025" src="https://media.ouest-france.fr/v1/pictures/81611c84c910af7075928f3144d99d6a-11881733.jpg?width=360&amp;client_id=eds&amp;sign=96f97fc70258a3e2efbe4b1d8e3ee1e1d108eea338693a1fbc7d8520546bc7f8" class="su-media">
            </figure>
            <h2 class="su-title">le marin + titre trop long sur 2 lignes</h2>
            <p class="su-description">Description</p>
        </a>
    </li>
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du lundi 2 juin 2025" src="https://media.ouest-france.fr/v1/pictures/d9e3fe9939b18b4d1001db04516d7728-file?client_id=cmsfront&sign=ed4877caebc90172ebdd348b6204abf9bb04f349891aca2650065873209b600a" class="su-media">
            </figure>
            <h2 class="su-title">Journal Ouest-France</h2>
            <p class="su-description">Description</p>
        </a>
    </li>
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du Jeudi  mai 2025" src="https://media.ouest-france.fr/v1/pictures/5682a60b3140060e4563e2ba4928824d-file?client_id=cmsfront&sign=e5fbc327dfdc35dd1a0c611d31437243242e0fffb76914c67aa7e192a45d022c" class="su-media">
            </figure>
            <h2 class="su-title">Livres</h2>
            <p class="su-description">Description</p>
        </a>
    </li>
</ul>

N. B. – Afin d’éviter l’effet d’escalier visuel que provoquerait des titres / descriptions sur un nombre variable de ligne quand la couverture intègre en plus des boutons, les boutons se calent en bas du composant couverture le plus haut.

<ul class="su-row su-row-gap">
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du N°220 - Mai 2025" src="https://media.ouest-france.fr/v1/pictures/4fb02403e8831f40702c858ac51b0c36-file?client_id=cmsfront&sign=7e351edb70e71f9a1620802cafcab5473bf2a32c8ead3a8bff46cd96e3195173" class="su-media">
            </figure>
            <h2 class="su-title">Bretons</h2>
            <p class="su-description">Description</p>
        </a>
        <div class="su-buttons-area">
            <button class="su-button su-primary">Bouton primaire</button>
        </div>
    </li>
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du Vendredi 25 avril 2025" src="https://media.ouest-france.fr/v1/pictures/81611c84c910af7075928f3144d99d6a-11881733.jpg?width=360&amp;client_id=eds&amp;sign=96f97fc70258a3e2efbe4b1d8e3ee1e1d108eea338693a1fbc7d8520546bc7f8" class="su-media">
            </figure>
            <h2 class="su-title">le marin + titre trop long sur 2 lignes</h2>
            <p class="su-description">Description</p>
        </a>
        <div class="su-buttons-area">
            <button class="su-button su-primary">Bouton primaire</button>
        </div>
    </li>
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du lundi 2 juin 2025" src="https://media.ouest-france.fr/v1/pictures/d9e3fe9939b18b4d1001db04516d7728-file?client_id=cmsfront&sign=ed4877caebc90172ebdd348b6204abf9bb04f349891aca2650065873209b600a" class="su-media">
            </figure>
            <h2 class="su-title">Journal Ouest-France</h2>
            <p class="su-description">Description</p>
        </a>
        <div class="su-buttons-area">
            <button class="su-button su-primary">Bouton primaire</button>
        </div>
    </li>
    <li class="su-col-sm-3 su-col-md-6 su-cover">
        <a href="javascript:;" class="su-content-area">
            <figure class="su-media-container su-portrait su-ratio-4-3">
                <img alt="Couverture du Jeudi  mai 2025" src="https://media.ouest-france.fr/v1/pictures/5682a60b3140060e4563e2ba4928824d-file?client_id=cmsfront&sign=e5fbc327dfdc35dd1a0c611d31437243242e0fffb76914c67aa7e192a45d022c" class="su-media">
            </figure>
            <h2 class="su-title">Livres</h2>
            <p class="su-description">Description</p>
        </a>
        <div class="su-buttons-area">
            <button class="su-button su-primary">Bouton primaire</button>
        </div>
    </li>
</ul>

Liste des classes disponibles

  • su-cover
  • su-content-area
  • su-media-container
  • su-buttons-area

Classes annexes

Le code a bien été copié !