Article in a list (Article dans une 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 :

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:;" class="surcharge-storybook">
                    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" 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:;" class="surcharge-storybook">
                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" 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 ainsi que via un intitulé. Pour cela il y a la classe su-sponsored à mettre sur l’article, ainsi que l’attribut aria-description="" pour l’accessibilité. Le contenu de cet attribut peut être par exemple « Article sponsorisé », « Shopping »… Attention, ce contenu sera reprit par le CSS pour être afficher comme intitulé sur l’article !

N. B. – Il y a une gestion particulière de ces articles quand ils sont dans une timeline ou dans une liste d’articles ordonnés. Les informations de sponsorisation d’article (aria-description="") sont alors à mettre sur le titre, et non plus sur l’article comme c'est normalement le cas (la classe reste sur l’article). De plus, on privilégiera un intitulé court.

<!-- 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" aria-description="Article sponsorisé">
            <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:;" class="surcharge-storybook">
                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" 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 ni l’attribut aria-description="".

<!-- 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:;" class="surcharge-storybook">
                    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" 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. 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 ni l’attribut aria-description="".

<div class="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:;" class="surcharge-storybook">
                    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" 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

Il est possible de rajouter un filet de couleur en bas d’une carte, ou d’une photo d’un focus ou d’un teaser avec la classe su-thread. À ce jour, SipaUI ne propose qu’une couleur pour ce filet (la couleur secondaire du thème), puisque l’idée est que chaque site puisse personnaliser les filets aux couleurs de ses thèmes éditoriaux (pour connaître ceux de Ouest-France vous pouvez consulter la rubrique Couleurs. Charge aux CSS du site, ensuite, de surcharger le background de ce filet…

Voir ces composants pour des exemples d’application.

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 1er 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-thread
  • 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

Le code a bien été copié !