Article in list (Article dans liste)

Le composant article présenté ici sert de base à toutes les présentations possibles des articles dans une liste (focus, teaser…). Il ne peut toutefois pas être utilisé seul ! Un article dans une liste est forcément un focus, un teaser… C’est pourquoi l’apparence de ce « composant » ne correspond pas à un état finalisé.

Usage

Les listes d’articles sont les éléments constitutifs d’un site éditorial. En excluant les pages d’article elles-mêmes, elles constituent la quasi totalité du contenu affiché dans ces sites. Elles sont donc très structurantes et répondent à divers besoins.

Comme leur nom l’indique, elles sont composées d’un ensemble d’articles proposés au lecteur. Ces articles, identifiés sous le vocable articles dans une liste, peuvent avoir diverses présentations afin de pourvoir répondre à ces besoins.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
Helpers (classes d’aide),
composant Titles (titres),
composant Date (date),
composant Sources (sources),
… (tous les composants inclus dans un article)

Article dans une liste standard

Une liste d’articles et les articles inclus comportent 4 classes pour différencier les zones :

su-articles-area détermine la zone complète de la liste d’articles (généralement une <section>) qui contient la liste d’article, son titre et éventuellement d’autres éléments liés à cette liste (boutons…).
su-articles-list délimite la liste seule. Elle peut être un <ul>, un <div>…
su-articles-list-item s’applique sur l’article à proprement parlé. Elle permet d’étendre la zone de clic du <a> du titre sur l’ensemble de l’article.
su-metadata pour la zone contenant les métadonnées (source, date).

Avec une vraie liste HTML

<!-- CODE QUI NE PEUT ÊTRE UTILISÉ EN L’ÉTAT. NÉCESSITE UNE CLASSE DE TYPE D’ARTICLE : FOCUS, CARD…-->
<section class="su-articles-area">
    <h2 class="su-h2 su-with-margin">Titre de la liste</h2>
    <ul class="su-row su-articles-list">
        <li class="su-col-md-12">
            <article class="su-articles-list-item">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-16-9 su-main-picture">
                            <img class="su-media" alt="Le groupe Tomm-Kozh animera la soirée de musique bretonne" src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzMTM3NTU0YjM3MWNlNmNmMTRjN2VhMzEzYWUyZTI5OGI?width=630&amp;height=354&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=aef291b5d15eb30cd85bdf84d0ce30af77aeeaf7d554d8d37f47ebe073933df0">
                        </div>
                    </figure>
                </div>
                <h2 class="su-title">
                    <a href="javascript:;">
                    Saint-Gildas-de-Rhuys. Brezhoneg e Rewis promeut la culture bretonne dans la Presqu’île
                    </a>
                </h2>
                <div class="su-metadata ">
                    <span class="su-source su-cockade-of" aria-description="Ouest-France "></span>
                    <time class="su-date" datetime="2022-03-24T12:00:11+01:00">12h00</time>
                </div>
                <div style="background: rgba(255,0,0, .7); color: white; position: absolute; top: 10px; left: 0; width: 100%; padding: 5px;">Cas minimal qui ne peut exister en l’état. Nécessite une classe de type d’article&nbsp;: focus, card ou teaser.</div>
            </article>
        </li>
    </ul>
</section>

Sans liste HTML

<!-- CODE QUI NE PEUT ÊTRE UTILISÉ EN L’ÉTAT. NÉCESSITE UNE CLASSE DE TYPE D’ARTICLE : FOCUS, CARD…-->
<section class="su-articles-area">
    <h2 class="su-h2 su-with-margin">Titre de la liste</h2>
    <div class="su-row su-articles-list">
        <article class="su-col-md-12 su-articles-list-item">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="Le groupe Tomm-Kozh animera la soirée de musique bretonne" src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzMTM3NTU0YjM3MWNlNmNmMTRjN2VhMzEzYWUyZTI5OGI?width=630&amp;height=354&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=aef291b5d15eb30cd85bdf84d0ce30af77aeeaf7d554d8d37f47ebe073933df0">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                Saint-Gildas-de-Rhuys. Brezhoneg e Rewis promeut la culture bretonne dans la Presqu’île</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
            <div class="su-metadata ">
                <span class="su-source su-cockade-of" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-03-24T12:00:11+01:00">12h00</time>
            </div>
            <div style="background: rgba(255,0,0, .7); color: white; position: absolute; top: 10px; left: 0; width: 100%; padding: 5px;">Cas minimal qui ne peut exister en l’état. Nécessite une classe de type d’article&nbsp;: focus, card ou teaser.</div>
        </article>
    </div>
</section>

Articles sponsorisés

Article seul

Les articles sponsorisés sont identifiés visuellement par une couleur de fond, ainsi que via un intitulé explicite. Pour cela vous devez utiliser la classe su-sponsored sur l’article, ainsi qu’un badge contenant l’information. Le contenu de cet badge peut être par exemple « Article sponsorisé », « Shopping »…

L’ancien système qui affichait le contenu de l’attribut aria-description="" est devenu obsolète depuis la version 7.4. Il est toutefois maintenu pour la rétrocompatibilité. Il sera supprimé lors dans la prochaine version majeure de SipaUI.

<!-- CODE QUI NE PEUT ÊTRE UTILISÉ EN L’ÉTAT. NÉCESSITE UNE CLASSE DE TYPE D’ARTICLE : FOCUS, CARD…-->
<section class="su-articles-area">
    <h2 class="su-h2 su-with-margin">Titre de la liste</h2>
    <div class="su-row su-articles-list">
        <article class="su-col-md-12 su-articles-list-item su-sponsored">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="Le groupe Tomm-Kozh animera la soirée de musique bretonne" src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzMTM3NTU0YjM3MWNlNmNmMTRjN2VhMzEzYWUyZTI5OGI?width=630&amp;height=354&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=aef291b5d15eb30cd85bdf84d0ce30af77aeeaf7d554d8d37f47ebe073933df0">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                Saint-Gildas-de-Rhuys. Brezhoneg e Rewis promeut la culture bretonne dans la Presqu’île</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
            <div class="su-metadata ">
                <span class="su-source su-cockade-of" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-03-24T12:00:11+01:00">12h00</time>
            </div>
            <div style="background: rgba(255,0,0, .7); color: white; position: absolute; top: 60px; left: 0; width: 100%; padding: 5px;">Cas minimal qui ne peut exister en l’état. Nécessite une classe de type d’article&nbsp;: focus, card ou teaser.</div>
        </article>
    </div>
</section>

Liste sponsorisée

Les articles sponsorisés peuvent aussi être regroupés dans une liste dédiée. Dans ce cas là, c’est toute la zone de liste qui portera l’identification visuelle et textuelle. Pour cela il faut ajouter la classe su-sponsored-articles sur un parent de la liste d’article. Dans ce cas, les articles ne doivent pas porter la classe su-sponsored.

<!-- CODE QUI NE PEUT ÊTRE UTILISÉ EN L’ÉTAT. NÉCESSITE UNE CLASSE DE TYPE D’ARTICLE : FOCUS, CARD…-->
<main class="su-row">
    <section class="su-articles-area su-sponsored-articles su-col-sm-5 su-col-md-12">
        <h2 class="su-h2 su-with-margin">Liste d’articles sponsorisés</h2>
        <div class="su-articles-list">
            <article class="su-articles-list-item">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-16-9 su-main-picture">
                            <img class="su-media" alt="Le groupe Tomm-Kozh animera la soirée de musique bretonne" src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzMTM3NTU0YjM3MWNlNmNmMTRjN2VhMzEzYWUyZTI5OGI?width=630&amp;height=354&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=aef291b5d15eb30cd85bdf84d0ce30af77aeeaf7d554d8d37f47ebe073933df0">
                        </div>
                    </figure>
                </div>
                <h2 class="su-title">
                    <a href="javascript:;">
                    Saint-Gildas-de-Rhuys. Brezhoneg e Rewis promeut la culture bretonne dans la Presqu’île
                    </a>
                </h2>
                <div class="su-metadata ">
                    <span class="su-source su-cockade-of" aria-description="Ouest-France "></span>
                    <time class="su-date" datetime="2022-03-24T12:00:11+01:00">12h00</time>
                </div>
                <div style="background: rgba(255,0,0, .7); color: white; position: absolute; top: 60px; left: 0; width: 100%; padding: 5px;">Cas minimal qui ne peut exister en l’état. Nécessite une classe de type d’article&nbsp;: focus, card ou teaser.</div>
            </article>
        </div>
    </section>
</main>

Page d’articles sponsorisés

Les articles sponsorisés peuvent enfin être regroupés sur une page dédiée à ce genre d’articles. Là aussi vous pouvez utiliser la classe su-sponsored-articles à mettre au même niveau que la classe sipaui (sur le <body> p. ex.). Là aussi, les articles ne doivent pas porter la classe su-sponsored.

<div class="sipaui su-sponsored-articles">
    <!-- CODE QUI NE PEUT ÊTRE UTILISÉ EN L’ÉTAT. NÉCESSITE UNE CLASSE DE TYPE D’ARTICLE : FOCUS, CARD…-->
    <section class="su-articles-area">
        <h2 class="su-h2 su-with-margin">Page d’articles sponsorisés</h2>
        <div class="su-row su-articles-list">
            <article class="su-col-md-12 su-articles-list-item">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-16-9 su-main-picture">
                            <img class="su-media" alt="Le groupe Tomm-Kozh animera la soirée de musique bretonne" src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzMTM3NTU0YjM3MWNlNmNmMTRjN2VhMzEzYWUyZTI5OGI?width=630&amp;height=354&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=aef291b5d15eb30cd85bdf84d0ce30af77aeeaf7d554d8d37f47ebe073933df0">
                        </div>
                    </figure>
                </div>
                <h2 class="su-title">
                    <a href="javascript:;">
                    Saint-Gildas-de-Rhuys. Brezhoneg e Rewis promeut la culture bretonne dans la Presqu’île
                    </a>
                </h2>
                <div class="su-metadata ">
                    <span class="su-source su-cockade-of" aria-description="Ouest-France "></span>
                    <time class="su-date" datetime="2022-03-24T12:00:11+01:00">12h00</time>
                </div>
                <div style="background: rgba(255,0,0, .7); color: white; position: absolute; top: 60px; left: 0; width: 100%; padding: 5px;">Cas minimal qui ne peut exister en l’état. Nécessite une classe de type d’article&nbsp;: focus, card ou teaser.</div>
            </article>
        </div>
    </section>
</div>

Article avec un filet thématique

A cause de son conflit avec les barres de progression et sa faible utilisation, cette fonctionnalité est devenue obsolète avec SipaUI 7.4. Elle sera donc complètement supprimée à partir de SipaUI 8. En attendant, bien qu’elle ne soit plus documentée, pour la rétrocompatibilité, son code est toujours présent dans SipaUI 7.

Teaser avec séparateur

Il est possible d’ajouter un séparateur entre des articles quand on veut couper visuellement l’empilement des articles, soit sur tous les supports en ajoutant la classe su-separator (pour un séparateur en-dessous l’article) ou su-separator-top (pour un séparateur au-dessus l’article), soit juste sur mobile ou tablette verticale en ajoutant la classe su-separator-sm-max, su-separator-top-sm-max, su-separator-md-max ou su-separator-top-md-max.

En théorie, la présence d’un séparateur est à gérer directement par le développeur, en fonction des contraintes du design. Il faut donc pouvoir gérer chaque élément de la liste d'articles en fonction de son ordonnancement dans celle-ci. Or, ce n’est pas toujours possible. SipaUI propose donc une classe pour forcer le masquage du séparateur sur le premier ou le dernier élément (cas le plus courant) malgré la présence d’une classe su-separator ou su-separator-top sur celui-ci. Il s’agit de la classe su-no-ending-separator qui supprime le séparateur du dernier article quand on utilise su-separator et sur le 1^er article quand on utilise su-separator-top.

Attention, cette classe supprime aussi l'effet des marges su-margin-… posées à côté d’une classe su-separator….

Voir le composant Teaser pour un exemple d’application de toutes ces classes.

Liste des classes disponibles

su-articles-area
su-articles-list
su-articles-list-item
su-metadata
su-sponsored
su-sponsored-articles
su-separator
su-separator-top
su-separator-sm-max
su-separator-top-sm-max
su-separator-md-max
su-separator-top-md-max
su-no-ending-separator

Classes annexes

su-title (dépendant du composant Titles (titres))
su-media-container (dépendant du composant Picture (image))
su-source (dépendant du composant Sources (sources))
su-date (dépendant du composant Date (date))