Focus (Focus)
Le composant focus est une des formes de présentation d’un Article dans une liste. Il est donc un enfant de celui-ci et récupère ses attributs de base. Il sert à mettre en avant des articles en donnant une certaine importance à l’image. Il est généralement utilisé en Une et en haut de certaines pages de listes d’articles.
Usage
- L’utilisateur peut accéder par le tap ou le clic à la page détail de l’article
- Un focus affiche le contenu d’un seul sujet
Spécifications
Il existe 3 types de focus :
- Focus standard
- Grand focus
- Focus image
Un focus est constitué de plusieurs éléments :
- Une image
- Un titre
- Une source (facultatif)
- Une date (facultatif)
- Une icône média (facultatif)
Style & code
Dépendances :
- Classe
sipauisur un parent (par exemple le<body>), - composant Article-in-list (article dans une liste),
- composant Titles (titres),
- composant Date (date),
- composant Sources (sources),
- … (tous les composants inclus dans un article)
Focus standard
Le focus standard ne nécessite que la classe su-focus sur l’article pour gérer les marges attendues.
Version avec un titre d’article en h2
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-12 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>
</div>
</section>
Version avec un titre d’article en <p>
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-12 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>
<p class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix
</a>
</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>
</div>
</section>
Version avec une icône de média
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-12 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>
<span class="su-media-icons-video">Article avec vidéo</span>
<p class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix
</a>
</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>
</div>
</section>
Version sans image
Il peut arriver qu’un article soit sans image. Afin de préserver l’aspect du focus en mode desktop, il faut garder la balise <figure> et le <div class="su-main-picture">, la balise <img> étant remplacée par un <span class="su-visually-hidden">Image absente</span> qui permet une compréhension de la structure et donc une meilleure accessibilité.
En affichage sur mobile, la zone grise de l’image absente disparaît.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-12 su-articles-list-item su-focus">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<span class="su-visually-hidden">Image absente</span>
</div>
</figure>
</div>
<p class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix
</a>
</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>
</div>
</section>
Focus avec filet thématique
Grâce au composant Article-in-list, il est possible d’ajouter un filet en bas de la photo d’un focus. À ce jour, SipaUI ne propose qu’une couleur pour ce filet (cf. l’explication dans le composant Article-in-list). Pour ajouter ce filet, ajouter une classe su-thread, à côté de su-focus. Charge aux CSS de votre site, ensuite, de surcharger le background de ce filet…
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-12 su-articles-list-item su-focus su-thread">
<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>
</div>
</section>
Grand focus
Le grand focus, inversant la photo et le texte, ne nécessite que la classe su-focus-big sur l’article pour gérer les marges attendues, le changement de taille de titre en fonction de l’écran et le changement d’ordonnancement. Pas besoin d’adapter le DOM.
Version avec un titre d’article en h2
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-focus-big">
<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>
</div>
</section>
Version sans image
Dans ce cas, vous avez 2 options :
- supprimer la balise
<figure>et son contenu, - comme pour les cartes ou le focus standard, garder la balise
<figure>et le<div class="su-main-picture">**, la balise<img>étant remplacée par un<span class="su-visually-hidden">Image absente</span>qui permet une compréhension de la structure et donc une meilleure accessibilité.
La première option, la plus simple et la meilleure, oblige à avoir une gestion différenciée de l’absence d’image par rapport au focus standard…
La seconde option existe pour n’avoir qu’une seule façon de gérer l’absence d’image et simplifier la création de template. Elle est toutefois moins bonne d’un point de vue performance puisqu’elle génère du DOM inutile et surtout, l’absence de prise en charge du sélecteur :has sur de vieux navigateurs fait que la zone réservée à l’image sera, quand même, affichée sur ceux-ci.
Option 1
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-focus-big">
<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>
</div>
</section>
Option 2
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-focus-big">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<span class="su-visually-hidden">Image absente</span>
</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>
</div>
</section>
Focus pleine page
Le focus pleine page, comme le grand focus, inverse la photo et le texte en mobile. Par contre, pour éviter un média trop grand quand il est est positionné dans un bloc pleine page, le texte passe à droite à partir du format tablette. On utilisera pour cela la classe su-focus-fullpage. Là non-plus, il n’est pas besoin d’adapter le DOM. Ce focus peut avoir un chapeau qui sera masqué en mobile.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-24 su-articles-list-item su-focus-fullpage">
<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>
<p class="su-standfirst">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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>
</div>
</section>
Focus image
Le focus image, insère toutes les informations par-dessus l’image. Cela peut poser problème quand ces informations nécessitent un espace supérieur à ce que permet l’image*. Et même dans le cas où tout tient au plein sur l’image, il peut y avoir des problèmes de lisibilité du texte ou de visibilité de l’image. C'est pourquoi il est conseillé de ne pas se servir de cette version du composant pour de petits focus ni de passer ce focus en 16:7. Par ailleurs, une troncature sera appliquée au titre s’il excède 3 lignes.
* Comme vous pourrez le constater ci-dessous, il pourra arriver certains cas où la dernière ligne de texte du titre pourra couper le bas des caractères…
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-10 su-articles-list-item su-focus-image">
<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>
<span class="su-media-icons-video">Article avec vidéo</span>
<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>
</div>
</section>
Exemple avec un titre de plus de 3 lignes
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-10 su-articles-list-item su-focus-image">
<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>
<span class="su-media-icons-video">Article avec vidéo</span>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</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>
</div>
</section>
Exemple en forçant un titre de maximum 2 lignes
Pour un petit focus image, il est possible de forcer le nombre de ligne maximum à 2 avec la classe su-max-line-2 au même niveau que la classe su-focus-image.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-10 su-articles-list-item su-focus-image su-max-line-2">
<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>
<span class="su-media-icons-video">Article avec vidéo</span>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</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>
</div>
</section>
Version premium
Il est possible de créer des focus image premium (réservés aux abonnées) en ajoutant la classe su-premium sur l’article (cf. Premium title…), mais ce type d’article n’est pas compatible avec la troncature automatique (au-delà de 3 lignes en standard ou de 2 lignes avec su-max-line-2).
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-10 su-articles-list-item su-focus-image su-premium">
<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>
<span class="su-media-icons-video">Article avec vidéo</span>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</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>
</div>
</section>
Version sans image
Un « Focus image » sans image serait paradoxal, mais au cas où cela arriverait, comme pour le composant Carte, il faut garder la structure <figure> + <div class="su-main-picture">**, la balise <img> étant remplacée par un <span class="su-visually-hidden">Image absente</span> qui permet une compréhension de la structure et donc une meilleure accessibilité.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-10 su-articles-list-item su-focus-image">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<span class="su-visually-hidden">Image absente</span>
</div>
</figure>
<span class="su-media-icons-video">Article avec vidéo</span>
</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>
</div>
</section>
Focus sur fond sombre
Il est possible de mettre un focus sur un fond foncé, grâce à la classe su-negative à mettre à côté de la classe de focus.
<section class="su-articles-area" style="background: DimGray; padding: 10px">
<div class="su-row su-articles-list">
<article class="su-col-md-12 su-articles-list-item su-focus su-negative">
<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>
</div>
</section>
Liste des classes disponibles
su-focussu-focus-bigsu-focus-fullpagesu-focus-imagesu-max-line-2su-negative
Classes annexes
su-articles-area(dépendant du composant Article-in-list (article dans une liste))su-articles-list(dépendant du composant Article-in-list (article dans une liste))su-articles-list-item(dépendant du composant Article-in-list (article dans une liste))su-thread(dépendant du composant Article-in-list (article dans une liste))su-metadata(dépendant du composant Article-in-list (article dans une liste))su-ratio-…(dépendant du composant Picture (image))su-main-picture(dépendant du composant Picture (image))su-media-container(dépendant du composant Picture (image))su-title(dépendant du composant Titles (titres))su-premium(dépendant du composant Premium-title (titre premium))su-date(dépendant du composant Date (date))su-source(dépendant du composant Sources (sources))su-cockade-…(dépendant du composant Sources (sources))