Sections

Conseils

Une <section> est un élément HTML utilisé pour regrouper du contenu et des composants. Le composant de section inclut les fonctionnalités suivantes :

• Section : Un élément HTML qui agit comme un conteneur pour le contenu et les composants.
• Conteneur : Les conteneurs sont utilisés à l’intérieur des sections pour structurer les mises en page et définir la largeur maximale des contenus.
• Espacement : Les valeurs d’espacement prédéfinies sont utilisées pour appliquer un remplissage vertical au contenu.
• Couleur de fond ou image : L’arrière-plan du composant de section peut être blanc (couleur par défaut), gris ou une image.

Section

Il s’agit de l’élément par défaut utilisé pour englober le contenu et les composants d’une page. Il est caractérisé par un fond blanc et un conteneur réactif qui vous permet de créer des système de grille.

En-tête de section

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<section>
	<div class="container">
		<h2>En-tête de section</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		</p>
	</div>
</section>

Section grise

La section grise peut être utilisée avec la plupart des types de contenu et de composants. Vous devez cependant l’éviter lorsque la section contient des blocs de contenu avec icônes et des tableaux.

<section class="gnb-section-gray">
	<div class="container">
		<h2>En-tête de section</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		</p>
	</div>
</section>

Section avec image

Les sections avec une image de fond peuvent uniquement être utilisées avec certains types de composants, dont les boutons, les cartes, les différents types d’accordéons , et les blocs de contenu (sans icônes).

Ajoutez l’image de fond personnalisée à l’aide de code CSS intraligne. L’image sera redimensionnée en fonction de la largeur de l’écran. La taille d’image idéale a une largeur comprise entre 1440 et 1920 pixels, une hauteur maximale de 1080 pixels et est optimisée pour ne pas dépasser 160 ko. Ce composant ajoutera une couche noire pour s’assurer qu’il y a suffisamment de contraste entre l’image et le texte. Toutefois, les images pâles ou lumineuses ne sont pas recommandées. Votre image personnalisée ne doit pas contenir de texte, de logo ou d’illustration ni apparaître floue, déformée ou pixelisée.

Vous pouvez utiliser un outil en ligne gratuit et accessible en source libre Squoosh pour rogner, optimiser et redimensionner vos images.

<section class="gnb-section-image" style="background-image: url(img/votre-image.jpg)">
	<div class="container">
		<h2>En-tête de section</h2>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Espacement des sections

Les sections sont généralement précédées et suivies d’espaces blancs de taille suffisante, assurés par les éléments enfants. La marge supérieure des titres <h2> crée par exemple un espace blanc uniforme au-dessus des sections. D’autres éléments, comme les balises <p>, les composants ou les balises qui englobent des groupes de composants, sont dotés de marges inférieures qui fournissent suffisamment d’espace au bas de la section.

Lorsque les éléments enfants de la section ne prévoient pas suffisamment d’espace blanc, vous pouvez utiliser des classes utilitaires d’espacement pour appliquer plus de remplissage à la section.

Classes utilitaires

Les classes utilitaires sont appliquées à l’élément <section>. Elles peuvent être appliquées de manière uniforme aux parties supérieure et inférieure ou être agencées de manière à appliquer plus ou moins de remplissage aux deux parties. Elles assurent un meilleur équilibre visuel et tiennent compte de l’espacement déjà fourni par les éléments enfants de la section.

Exemple 1

Dans cet exemple, la section ne comporte pas de titre. Il est recommandé d’attribuer un titre <h2> à toutes les nouvelles sections, de sorte que l’espace vertical requis soit inclus au haut de chaque section. Dans ce cas, vous devez ajouter un peu de remplissage à l’aide des classes utilitaires.

Exemple 2

L’ajout d’une classe utilitaire .padding-top-lg à la section vous permet d’ajouter l’espace blanc manquant en haut de la section.