Démonstration – Listes d’articles
Vous trouverez ici des exemples de listes d’articles qui utilisent exclusivement les composants du frameworks , et notamment les composants d’articles dans une liste.
N. B. – la mise-en-page de cette page de présentation induit une largeur de 940px pour les iframes de visualisation, ce qui implique que, par défaut vous verrez donc ces visualisations en « mode tablette ». Chacune de ces iframes de visualisation comporte toutefois des boutons pour changer cette largeur et vous permettre de voir le contenu dans 3 tailles différentes :
mobile [360px], tablette [940px], desktop [pleine largeur] et format libre (utilisez le coin inférieur droit pour redimensionner).
Liste verticale de grands teasers
Ce cas correspond à une simple liste de grands teasers empilés, comme on peut en trouver sur une page de locale Ouest-France.
<section class="su-container su-row su-articles-area">
<ul class="su-col-lg-18 su-articles-list">
<li class="su-separator">
<article class="su-articles-list-item su-teaser-big">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-lg su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<p class="su-standfirst">L’actrice Christina Ricci, connue pour son rôle de Mercredi dans les films de « La Famille Addams », figurera au casting de la série Netflix dérivée du phénomène. Tim Burton sera également aux manettes de la mise en scène.</p>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-separator">
<article class="su-articles-list-item su-teaser-big su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-lg su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<p class="su-standfirst">Quelque 8 000 visiteurs venus de plus de 100 pays étaient attendus au Space, salon international de l’élevage, organisé jusqu’à ce jeudi 15 septembre 2022 à Rennes. Une édition plus que jamais placée sous le signe de l’international après deux ans de crise sanitaire.</p>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-separator">
<article class="su-articles-list-item su-teaser-big su-sponsored" aria-description="Article sponsorisé">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-lg su-main-picture">
<img class="su-media" decoding="async" alt="Support smartphone pour voiture" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAxNTEwOGQzYjczOGUyY2ExOTQ0MTYzNGNjM2I1MzQxOTA?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a5e44a9225e604ee17fc93843b7c20c7b05bf55d6a6392f4136894ca191e9f50">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon</a></h2>
<p class="su-standfirst">Vous ne savez jamais où mettre votre téléphone quand vous conduisez ? Si vous utilisez régulièrement le GPS de votre mobile, Amazon a la solution idéale pour vous : un accessoire voiture doté d’une ventouse ultrapuissante. On vous en dit plus sur ce support de téléphone.</p>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li>
<article class="su-articles-list-item su-teaser-big su-live-open">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-lg su-main-picture">
<img class="su-media" decoding="async" alt="Le cercueil de la reine Elizabeth II est actuellement exposé à l’abbaye de Westminster à Londres." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGY4MjE4YzI1MTkxODBiYjZhNjhhNmMzNjgyODQ1OTg?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=f7535c4d3319ebf3bf89e65dd3b23c4b07f3b92b70b26ed99c4e34b8793f4c1b">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
<p class="su-standfirst">Quelque 8 000 visiteurs venus de plus de 100 pays étaient attendus au Space, salon international de l’élevage, organisé jusqu’à ce jeudi 15 septembre 2022 à Rennes. Une édition plus que jamais placée sous le signe de l’international après deux ans de crise sanitaire.</p>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
</article>
</li>
</ul>
</section>
Liste 1 grand focus + 2 focus + 3 focus
Ce cas correspond à une suite de focus (dont un grand) sur une grille : 1 puis 2 puis 3 sur desktop. Les marges entre les articles sont de 30px (su-margin-bottom-l) mais les 3 derniers éléments de la liste ne doivent plus avoir de marge en affichage desktop, on utilise donc pour eux .su-margin-bottom-l-sm-max, sauf pour le dernier où on ne met aucune marge. Il s’agit d’une version raccourcie de la présentation en Une de Ouest-France.
<div class="su-container su-row">
<section class="su-col-lg-18 su-articles-area">
<ul class="su-articles-list su-row">
<li class="su-margin-bottom-l">
<article class="su-articles-list-item su-focus-big">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-ratio-16-7-md su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-col-md-12 su-margin-bottom-l">
<article class="su-articles-list-item su-focus su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-col-md-12 su-margin-bottom-l">
<article class="su-articles-list-item su-focus su-live-open">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Le cercueil de la reine Elizabeth II est actuellement exposé à l’abbaye de Westminster à Londres." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGY4MjE4YzI1MTkxODBiYjZhNjhhNmMzNjgyODQ1OTg?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=f7535c4d3319ebf3bf89e65dd3b23c4b07f3b92b70b26ed99c4e34b8793f4c1b">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
</article>
</li>
<li class="su-col-md-8 su-margin-bottom-l-sm-max">
<article class="su-articles-list-item su-focus 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" decoding="async" alt="Support smartphone pour voiture" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAxNTEwOGQzYjczOGUyY2ExOTQ0MTYzNGNjM2I1MzQxOTA?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a5e44a9225e604ee17fc93843b7c20c7b05bf55d6a6392f4136894ca191e9f50">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
</article>
</li>
<li class="su-col-md-8 su-margin-bottom-l-sm-max">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="" src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGM4MGYxYmJiYjg5NGUzYjA5NTc1YmIwZjFhMzVjODI?width=375&height=210&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=291dd406964b8498c1b4d26b6df19a4444187185cda49a403b719cbd2d7ccbae">
</div>
</figure>
<span class="su-media-icons-video">Article avec vidéo</span>
</div>
<h2 class="su-title"><a href="javascript:;">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
</article>
</li>
<li class="su-col-md-8">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Eau du bassin rennais incite chacun à réduire sa consommation." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5N2FiZmQ2ZTI4ZTZkZWNkYmNmN2RjOTUwOGU3Mjc1MzE?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=802dee12abb30da6c50d363d5ce56662cfb01ea29152bc8a5d5c15b0bf647aab">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Rennes. Pour endiguer la baisse de la ressource, « des gestes simples pour réduire la consommation »</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T20:14:58+02:00">15/09</time>
</div>
</article>
</li>
</ul>
</section>
</div>
Liste 4 teasers
4 petits teasers avec un bouton « Voir + » en mobile pour afficher le dernier. Cette spécificité implique de rajouter un peu de CSS hors SipaUI (cf. début du code).
<style>
#exemple.ouvert .su-hidden-xs,
#exemple.ouvert .su-hidden-sm {
display: block !important;
}
</style>
<section id="exemple" class="su-container su-row su-articles-area">
<ul class="su-col-md-12 su-col-lg-10 su-col-xl-8 su-articles-list">
<li>
<article class="su-articles-list-item su-teaser">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-separator-top">
<article class="su-articles-list-item su-teaser su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-separator-top">
<article class="su-articles-list-item su-teaser su-sponsored" aria-description="Article sponsorisé">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="Support smartphone pour voiture" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAxNTEwOGQzYjczOGUyY2ExOTQ0MTYzNGNjM2I1MzQxOTA?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a5e44a9225e604ee17fc93843b7c20c7b05bf55d6a6392f4136894ca191e9f50">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;"">Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-separator-top su-hidden-xs su-hidden-sm">
<article class="su-articles-list-item su-teaser">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="Des Rennais ont déjà pu découvrir la station Sainte-Anne en avant-première." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5MDkxZWUzM2JkMjAwZjA0NzM1YTY1OTEyNzEzZWUxMjk?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=fe41eb64d880c05c2c38b4e7ffb25f31979f5404e88233c89ae1ff61b273d380">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">EN IMAGES. À Rennes, derrière chacune des stations de la ligne B du métro, un architecte</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
</article>
</li>
</ul>
<button class="su-button su-secondary su-small su-action-icon su-show-more su-block-center su-visible-xs su-visible-sm su-margin-top-m" data-sutoggleclass='[{"klass":"su-active"}, {"parent":"#exemple","klass":"ouvert"}]'>
<span>
Voir <i class="su-icon">plus</i>
</span>
<span>
Voir <i class="su-icon">moins</i>
</span>
</button>
</section>
Liste 4 focus avec séparateurs en mobile
<div class="sipaui">
<section class="su-container su-articles-area">
<ul class="su-articles-list su-row">
<li class="su-col-md-6">
<article class="su-articles-list-item su-focus" aria-description="Article sponsorisé">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Support smartphone pour voiture" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAxNTEwOGQzYjczOGUyY2ExOTQ0MTYzNGNjM2I1MzQxOTA?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a5e44a9225e604ee17fc93843b7c20c7b05bf55d6a6392f4136894ca191e9f50">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;" class="surcharge-storybook">Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
</article>
</li>
<li class="su-col-md-6 su-separator-top-sm-max">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="" src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGM4MGYxYmJiYjg5NGUzYjA5NTc1YmIwZjFhMzVjODI?width=375&height=210&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=291dd406964b8498c1b4d26b6df19a4444187185cda49a403b719cbd2d7ccbae">
</div>
</figure>
<span class="su-media-icons-video">Article avec vidéo</span>
</div>
<h2 class="su-title"><a href="javascript:;" class="surcharge-storybook">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
</article>
</li>
<li class="su-col-md-6 su-separator-top-sm-max">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Eau du bassin rennais incite chacun à réduire sa consommation." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5N2FiZmQ2ZTI4ZTZkZWNkYmNmN2RjOTUwOGU3Mjc1MzE?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=802dee12abb30da6c50d363d5ce56662cfb01ea29152bc8a5d5c15b0bf647aab">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;" class="surcharge-storybook">Rennes. Pour endiguer la baisse de la ressource, « des gestes simples pour réduire la consommation »</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T20:14:58+02:00">15/09</time>
</div>
</article>
</li>
<li class="su-col-md-6 su-separator-top-sm-max">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Des Rennais ont déjà pu découvrir la station Sainte-Anne en avant-première." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5MDkxZWUzM2JkMjAwZjA0NzM1YTY1OTEyNzEzZWUxMjk?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=fe41eb64d880c05c2c38b4e7ffb25f31979f5404e88233c89ae1ff61b273d380">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;" class="surcharge-storybook">EN IMAGES. À Rennes, derrière chacune des stations de la ligne B du métro, un architecte</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
</article>
</li>
</ul>
</section>
</div>
Liste 6 focus en carrousel grille
Ici, on affiche 6 focus horizontalement dans un « carrousel grille ». Ces focus sont médium en mobile (220px) et sur la grille par ¼ en desktop.
Pour suivre la recommandation design de positionner les flèches de navigation desktop au milieu de l’image (verticalement) au lieu de la position normale, nous sommes obligés de rajouter un peu de CSS pour surcharger la position de celles-ci (cf. début du code).
<style>
#test-carrousel.su-carrousel .su-navigation-button {
top: calc(220px * 0.28);
}
@media screen and (min-width: 61.25em) {
#test-carrousel.su-carrousel .su-navigation-button {
top: 0;
margin-top: calc((25% - 15px) * 0.28);
}
}
/* Explication du calcul pour les écrans larges qui correspond à ce cas là :
Les boutons doivent être affichés à mi-hauteur des images qui ont une taille variable définie par la largeur du focus (su-col-lg-6). Il faut donc s’appuyer sur la largeur pour ce calcul.
margin-top: calc((largeur d’une image) * (la moitié du ratio de l’image) )
margin-top: calc((largeur d’un focus) * ((9 / 16) / 2) )
margin-top: calc((largeur d’une colonne su-col-md-6) * (0.5625 / 2) )
margin-top: calc((25% - 15px) * (0.28) ) */
</style>
<div class="su-container">
<section id="test-carrousel" class="su-articles-area su-carrousel su-carrousel-grid su-carrousel-items-m snap-migrate">
<ul class="su-row su-articles-list su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
<li class="su-carrousel-item su-col-md-8 su-col-lg-6">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-carrousel-item su-col-md-8 su-col-lg-6">
<article class="su-articles-list-item su-focus su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-carrousel-item su-col-md-8 su-col-lg-6">
<article class="su-articles-list-item su-live-open su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Le cercueil de la reine Elizabeth II est actuellement exposé à l’abbaye de Westminster à Londres." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGY4MjE4YzI1MTkxODBiYjZhNjhhNmMzNjgyODQ1OTg?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=f7535c4d3319ebf3bf89e65dd3b23c4b07f3b92b70b26ed99c4e34b8793f4c1b">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
</article>
</li>
<li class="su-carrousel-item su-col-md-8 su-col-lg-6">
<article class="su-articles-list-item su-focus 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" decoding="async" alt="Support smartphone pour voiture" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAxNTEwOGQzYjczOGUyY2ExOTQ0MTYzNGNjM2I1MzQxOTA?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a5e44a9225e604ee17fc93843b7c20c7b05bf55d6a6392f4136894ca191e9f50">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
</article>
</li>
<li class="su-carrousel-item su-col-md-8 su-col-lg-6">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="" src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGM4MGYxYmJiYjg5NGUzYjA5NTc1YmIwZjFhMzVjODI?width=375&height=210&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=291dd406964b8498c1b4d26b6df19a4444187185cda49a403b719cbd2d7ccbae">
</div>
</figure>
<span class="su-media-icons-video">Article avec vidéo</span>
</div>
<h2 class="su-title"><a href="javascript:;">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
</article>
</li>
<li class="su-carrousel-item su-col-md-8 su-col-lg-6">
<article class="su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Eau du bassin rennais incite chacun à réduire sa consommation." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5N2FiZmQ2ZTI4ZTZkZWNkYmNmN2RjOTUwOGU3Mjc1MzE?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=802dee12abb30da6c50d363d5ce56662cfb01ea29152bc8a5d5c15b0bf647aab">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Rennes. Pour endiguer la baisse de la ressource, « des gestes simples pour réduire la consommation »</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T20:14:58+02:00">15/09</time>
</div>
</article>
</li>
</ul>
<button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
</section>
</div>
« Événement Tête »
La liste d’article de type événement tête est un type de liste d’article inséré en haut de page lorsque survient un évènement particulier afin de proposer des articles liés à cet événement. Elle est composée d’un grand focus dont l’image de passe de 16/9e (en mobile) à 16/7e (en desktop) et de 3 teasers standards qui portent des séparateurs en mobile et tablette verticale (su-separator-top-md-max). Les marges sont de 20px, mais elles sont presque toutes gérées par les séparateurs, il faut donc juste un su-margin-bottom-m-lg-min pour le focus (pour ajouter une marge en desktop).
<section class="su-container su-row su-articles-area">
<ul class="su-col-lg-24 su-row su-articles-list">
<li class="su-margin-bottom-m-lg-min">
<article class="su-articles-list-item su-focus-big">
<figure>
<div class="su-ratio-16-9 su-ratio-16-7-lg su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-col-lg-8 su-separator-top-md-max">
<article class="su-articles-list-item su-teaser su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-col-lg-8 su-separator-top-md-max">
<article class="su-articles-list-item su-teaser su-live-open">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="Le cercueil de la reine Elizabeth II est actuellement exposé à l’abbaye de Westminster à Londres." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGY4MjE4YzI1MTkxODBiYjZhNjhhNmMzNjgyODQ1OTg?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=f7535c4d3319ebf3bf89e65dd3b23c4b07f3b92b70b26ed99c4e34b8793f4c1b">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
</article>
</li>
<li class="su-col-lg-8 su-separator-top-md-max">
<article class="su-articles-list-item su-teaser">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="" src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGM4MGYxYmJiYjg5NGUzYjA5NTc1YmIwZjFhMzVjODI?width=375&height=210&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=291dd406964b8498c1b4d26b6df19a4444187185cda49a403b719cbd2d7ccbae">
</div>
</figure>
<span class="su-media-icons-video su-small">Article avec vidéo</span>
</div>
<h2 class="su-title"><a href="javascript:;">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
</article>
</li>
</ul>
</section>
« Événement Tête Focus »
Il s’agit d’une version plus « visuelle » de l’Évévénement Tête. Elle est composée d’un grand focus dont l’image passe de 16/9e (en mobile) à 16/7e et de 4 focus standards. Ici, la gestion des marges est particulièrement complexe. Pour le grand focus, c’est simple, elle est là aussi de 20px (su-margin-bottom-l) mais pour les focus standards, les 2 premiers ont une marge de 30px jusqu’à 979px de large (su-margin-bottom-l-md-max), le 3e a une marge de 30px jusqu’à 767px (su-margin-bottom-l-sm-max) et, comme d’habitude, le dernier n’en a aucune…
<section class="su-container su-row su-articles-area">
<ul class="su-col-lg-24 su-row su-articles-list">
<li>
<article class="su-articles-list-item su-focus-big su-margin-bottom-m su-margin-bottom-l-md-max">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-ratio-16-7-md su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-col-md-12 su-col-lg-6">
<article class="su-articles-list-item su-focus su-margin-bottom-l-md-max su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
<li class="su-col-md-12 su-col-lg-6">
<article class="su-articles-list-item su-focus su-live-open su-margin-bottom-l-md-max">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Le cercueil de la reine Elizabeth II est actuellement exposé à l’abbaye de Westminster à Londres." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGY4MjE4YzI1MTkxODBiYjZhNjhhNmMzNjgyODQ1OTg?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=f7535c4d3319ebf3bf89e65dd3b23c4b07f3b92b70b26ed99c4e34b8793f4c1b">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
</article>
</li>
<li class="su-col-md-12 su-col-lg-6">
<article class="su-articles-list-item su-focus su-margin-bottom-l-sm-max">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="" src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5NGM4MGYxYmJiYjg5NGUzYjA5NTc1YmIwZjFhMzVjODI?width=375&height=210&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=291dd406964b8498c1b4d26b6df19a4444187185cda49a403b719cbd2d7ccbae">
</div>
</figure>
<span class="su-media-icons-video">Article avec vidéo</span>
</div>
<h2 class="su-title"><a href="javascript:;">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
</article>
</li>
<li class="su-col-md-12 su-col-lg-6">
<article class="su-articles-list-item su-focus 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" decoding="async" alt="Support smartphone pour voiture" src="https://media.ouest-france.fr/v1/pictures/MjAyNDAxNTEwOGQzYjczOGUyY2ExOTQ0MTYzNGNjM2I1MzQxOTA?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a5e44a9225e604ee17fc93843b7c20c7b05bf55d6a6392f4136894ca191e9f50">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
</article>
</li>
</ul>
</section>
« Événement Tête Épinglée »
Attention : dans ce contexte, les informations de sponsorisation d’article (aria-description="") sont à 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.
<div class="su-container su-row">
<section class="su-col-md-18 su-articles-area">
<article class="su-focus-big su-margin-bottom-m">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-ratio-16-7-md su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
<a class="su-tag su-margin-bottom-m" href="javascript:;">Tag de l’évènement</a>
<ul class="su-articles-list su-timeline">
<li>
<article class="su-articles-list-item su-premium">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item su-live-open">
<div class="su-metadata ">
<span class="su-cockade-po" aria-label="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item">
<div class="su-metadata ">
<span class="su-cockade-po" aria-label="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
<h2 class="su-title"><a href="javascript:;">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
<h2 class="su-title"><a href="javascript:;">EN IMAGES. À Rennes, derrière chacune des stations de la ligne B du métro, un architecte</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item su-sponsored">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
<h2 class="su-title" aria-description="Sponsorisé."><a href="javascript:;">
Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon
</a></h2>
</article>
</li>
</ul>
</section>
</div>
« En continu »
Attention : dans ce contexte, les informations de sponsorisation d’article (aria-description="") sont à 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.
<div class="su-container su-row">
<section class="su-col-lg-8 su-col-xl-6 su-articles-area">
<nav>
<ul class="su-tabs su-margin-bottom-m su-distributed">
<li><a class="en-continu su-tab-on" href="javascript:;" data-suonglet='{"cont":".en-continu","ong":".su-tab-content-1"}'>Une</a></li>
<li><a class="en-continu" href="javascript:;" data-suonglet='{"cont":".en-continu","ong":".su-tab-content-2"}'>Sport</a></li>
</ul>
</nav>
<ul class="en-continu su-tab-content-1 su-tab-on su-articles-list su-timeline">
<li>
<article class="su-articles-list-item su-premium">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item su-live-open">
<div class="su-metadata ">
<span class="su-cockade-po" aria-label="Presse Océan"></span>
<time class="su-date" datetime="2022-09-15T11:36:27+02:00">11h36</time>
</div>
<h2 class="su-title"><a href="javascript:;">DIRECT. Le Royaume-Uni paralysé à cause des funérailles d’Elizabeth II ? Voici ce qui sera fermé lundi</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item">
<div class="su-metadata ">
<span class="su-cockade-po" aria-label="Presse Océan"></span>
<time class="su-date" datetime="2022-09-16T00:40:02+02:00">00h40</time>
</div>
<h2 class="su-title"><a href="javascript:;">VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
<h2 class="su-title"><a href="javascript:;">
EN IMAGES. À Rennes, derrière chacune des stations de la ligne B du métro, un architecte
</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item su-sponsored">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-16T08:02:12+02:00">08h02</time>
</div>
<h2 class="su-title" aria-description="Sponsorisé."><a href="javascript:;">
Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon
</a></h2>
</article>
</li>
</ul>
<ul class="en-continu su-tab-content-2 su-articles-list su-timeline">
<li>
<article class="su-articles-list-item su-premium">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T18:02:00+02:00">18h02</time>
</div>
<h2 class="su-title"><a href="javascript:;">FC Lorient. Prêté par Lyon, Romain Faivre ne pourra pas jouer contre les Gones, dimanche</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item su-premium">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T17:50:27+02:00">17h50</time>
</div>
<h2 class="su-title"><a href="javascript:;">Red Star. Le club annonce le décès de Julien Manzano, ancien capitaine</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item">
<div class="su-metadata ">
<span class="su-cockade-of" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T17:42:27+02:00">17h42</time>
</div>
<h2 class="su-title"><a href="javascript:;">Premier League. Amnesty International remet en cause le rachat de Newcastle par un fond saoudien</a></h2>
</article>
</li>
<li>
<article class="su-articles-list-item">
<div class="su-metadata ">
<span class="su-cockade-ml" aria-label="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T17:35:27+02:00">17h35</time>
</div>
<h2 class="su-title"><a href="javascript:;">Handball. La Sarthoise Manon Houette prolonge l’aventure à Chambray Touraine</a></h2>
</article>
</li>
</ul>
</section>
</div>
Liste d’articles sponsorisés exclusivement (2 teasers horizontaux)
<section class="su-container su-articles-area su-sponsored-articles">
<span class="su-h2 su-with-margin">
Liste d’articles sponsorisés
</span>
<ul class="su-row su-articles-list">
<li class="su-col-md-12">
<article class="su-articles-list-item su-teaser su-margin-bottom-m-sm-max">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</li>
<li class="su-col-md-12">
<article class="su-articles-list-item su-teaser su-margin-bottom-m-sm-max su-premium">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
</div>
</figure>
</div>
<h2 class="su-title"><a href="javascript:;">Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19 </a></h2>
<div class="su-metadata ">
<span class="su-source" aria-description="Ouest-France"></span>
<time class="su-date" datetime="2022-09-15T19:50:00+02:00">19h50</time>
</div>
</article>
</li>
</ul>
</section>
Liste d’articles ordonnés
8 articles ordonnés, sur 2 colonnes en desktop, avec un bouton « Voir + » en mobile pour afficher les 3 derniers. Cette spécificité implique de rajouter un peu de CSS hors SipaUI…
Attention : dans ce contexte, les informations de sponsorisation d’article (aria-description="") sont à 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.
<style>
#exemple2.ouvert .su-hidden-xs,
#exemple2.ouvert .su-hidden-sm,
#exemple2.ouvert .su-hidden-md {
display: flex !important;
}
</style>
<section id="exemple2" class="su-articles-area">
<ol class="su-articles-list su-ranked-list su-columns-desktop-2 su-columns-no-cut">
<li>
<article class="su-articles-list-item">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix
</a>
</h2>
</article>
</li>
<li class="su-separator-top">
<article class="su-articles-list-item su-live-open">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19
</a>
</h2>
</article>
</li>
<li class="su-separator-top">
<article class="su-articles-list-item su-sponsored">
<h2 class="su-title" aria-description="Sponsorisé.">
<a href="javascript:;" class="surcharge-storybook">
Cet accessoire phénomène va vous changer la vie en voiture : il est en promo sur Amazon
</a>
</h2>
</article>
</li>
<li class="su-separator-top">
<article class="su-articles-list-item su-premium">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
EN IMAGES. À Rennes, derrière chacune des stations de la ligne B du métro, un architecte
</a>
</h2>
</article>
</li>
<li class="su-separator-top-md-max">
<article class="su-articles-list-item">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
Red Star. Le club annonce le décès de Julien Manzano, ancien capitaine
</a>
</h2>
</article>
</li>
<li class="su-separator-top su-hidden-xs su-hidden-sm su-hidden-md">
<article class="su-articles-list-item">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
Premier League. Amnesty International remet en cause le rachat de Newcastle par un fond saoudien
</a>
</h2>
</article>
</li>
<li class="su-separator-top su-hidden-xs su-hidden-sm su-hidden-md">
<article class="su-articles-list-item">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
Handball. La Sarthoise Manon Houette prolonge l’aventure à Chambray Touraine
</a>
</h2>
</article>
</li>
<li class="su-separator-top su-hidden-xs su-hidden-sm su-hidden-md">
<article class="su-articles-list-item">
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
VIDÉO. Stade Rennais : « Notre match le plus consistant depuis le début de saison », selon Genesio
</a>
</h2>
</article>
</li>
</ol>
<button class="su-button su-secondary su-small su-action-icon su-show-more su-block-center su-hidden-lg su-hidden-xl su-margin-top-m" data-sutoggleclass='[{"klass":"su-active"}, {"parent":"#exemple2","klass":"ouvert"}]'>
<span>
Voir <i class="su-icon">plus</i>
</span>
<span>
Voir <i class="su-icon">moins</i>
</span>
</button>
</section>
Article vidéo : carte
<section class="su-articles-area" style="background: DimGray; padding: 10px">
<div class="su-row su-articles-list">
<article class="su-col-md-8 su-articles-list-item su-card su-equal">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
<span class="su-media-icons-video">Article vidéo</span>
</div>
</figure>
<time class="su-duration" aria-description="Durée" datetime="2m 25s">2:25</time>
</div>
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série
</a>
</h2>
<div class="su-metadata ">
<span class="su-source su-cockade-of" aria-label="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
<span class="su-views">125 k vues</span>
</div>
</article>
<article class="su-col-md-8 su-articles-list-item su-card su-equal">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
<span class="su-media-icons-video">Article vidéo</span>
</div>
</figure>
<time class="su-duration" aria-description="Durée" datetime="4m 30s">4:30</time>
</div>
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19
</a>
</h2>
<div class="su-metadata ">
<span class="su-source su-cockade-of" aria-label="Ouest-France "></span>
<time class="su-date" datetime="2022-04-03T20:49:31+02:00">03/04</time>
<span class="su-views">235 k vues</span>
</div>
</article>
</div>
</section>
Article vidéo : focus image
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-8 su-articles-list-item su-focus-image">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-portrait su-main-picture">
<img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
<span class="su-media-icons-video">Article vidéo</span>
</div>
</figure>
<time class="su-duration" aria-description="Durée" datetime="2m 25s">2:25</time>
</div>
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série
</a>
</h2>
<div class="su-metadata ">
<span class="su-source su-cockade-of" aria-label="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
<article class="su-col-md-8 su-articles-list-item su-focus-image">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-portrait su-main-picture">
<img class="su-media" decoding="async" alt="Des visiteurs internationaux dans les locaux de l’usine LLDC Algae." src="https://media.ouest-france.fr/v1/pictures/MjAyMjA5YjFlNWJlNjM0NGJhMjhhYWY3Mjk2MzFiN2MyZDBiMGI?width=375&height=210&focuspoint=45%2C77&cropresize=1&client_id=bpeditorial&sign=fbf8310172fb034e822a97084f5d9bf2e034e816736006effff756fe6309ac49">
<span class="su-media-icons-video">Article vidéo</span>
</div>
</figure>
<time class="su-duration" aria-description="Durée" datetime="4m 30s">4:30</time>
</div>
<h2 class="su-title">
<a href="javascript:;" class="surcharge-storybook">
Space. Les visiteurs internationaux de retour après deux années chamboulées par le Covid-19
</a>
</h2>
<div class="su-metadata ">
<span class="su-source su-cockade-of" aria-label="Ouest-France "></span>
<time class="su-date" datetime="2022-04-03T20:49:31+02:00">03/04</time>
</div>
</article>
</div>
</section>