Consigne d’utilisation du Typologue
Ne modifiez pas ces pages, utilisez les éléments ou copiez/collez-les pour vos tests.
Bandeau de titre avec une vague en bas
Encart avec texte sur fond bleu
Texte courant en texte-inverse, liens et bouton en jaune.
Bande pleine largeur avec texte mis en forme
Titre h2 - Lorem ipsum dolor sit amet
Paragraphe simple - 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. Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Titre H3 - Lorem ipsum dolor sit amet
Paragraphe simple - 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. Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Titre H4 - Lorem ipsum dolor sit amet
Paragraphe simple - 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. Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Titre H5 - Lorem ipsum dolor sit amet
Paragraphe simple - 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. Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Titre H6 - Lorem ipsum dolor sit amet
Paragraphe simple - 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. Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Chapô - Vestibulum mauris erat, varius id lacus ac, hendrerit mattis lectus.
Donec sed mauris justo. Donec consectetur turpis justo, id sodales est vitae. Proin blandit interdum nulla, eu auctor purus malesuada quis.
Paragraphe simple - 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. Duis aute irure dolor in reprehenderit in voluptate velit cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Contenu - un texte gras, un texte italique , un texte souligné, un texte normal un english word .
Un autre contenu avec un texte exposant et un texte indice.
texte en couleur
Un autre contenu avec un lien simple, un lien vers un fichier, un lien vers un email
Un lien interne avec style particulier 01
Un lien externe avec style particulier 02
- Liste numérotée
- Liste numérotée
- Liste numérotée
- Liste numérotée
- Liste numérotée
- Liste à puce
- Liste à puce
- Liste à puce
- Liste à puce
- Liste à puce
Une citation - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget leo metus. Ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget leo metus. Vestibulum mauris erat, varius id lacus ac...
| Titre colonne | Titre colonne | Titre colonne | Titre colonne | Titre colonne |
|---|---|---|---|---|
| Contenu | Contenu | Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu | Contenu | Contenu |
| Titre colonne | Contenu | Contenu | Contenu | Contenu |
|---|---|---|---|---|
| Titre colonne | Contenu | Contenu | Contenu | Contenu |
| Titre colonne | Contenu | Contenu | Contenu | Contenu |
| Titre colonne | Contenu | Contenu | Contenu | Contenu |
|---|---|---|---|---|
| Titre colonne | Contenu | Contenu | Contenu | Contenu |
| Titre colonne | Contenu | Contenu | Contenu | Contenu |
Conteneur en 2 colonnes (50 % / 50 %)
Titre de section sans sous-titre
Titre de section avec sous-titre
Sous-titre de section modifiable
Conteneur en 2 colonnes (33 % / 66 %)
Image seule dans une colonne étroite
Texte dans une colonne large
À La Réunion, 80% des habitants connaissent les écogestes, mais ne les appliquent pas systématiquement. La CIVIS a ainsi défini comme objectif principal de rendre les écogestes simples, automatiques et intégrés au quotidien, tout en adoptant une approche ludique, amusante, et positive.
Conteneur en 2 colonnes (75 % / 25 %)
Texte dans la colonne principale
Pour mener à bien cette initiative écologique, la CIVIS a choisi de créer tout un univers autour des écogestes avec un style ludique et évocateur pour ses administrés. Pour que chaque geste soit bien ancré, la CIVIS a opté pour une série de vidéos mettant en scène des personnages typiques de La Réunion, chaque bonne habitude faisant l’objet d’un épisode.
La CIVIS est ainsi fière de présenter la famille LÉO, une famille créole multigénérationnelle vivant dans le Sud de l’île.
Entre humour, tradition et modernité, les administrés pourront suivre les aventures comiques et touchantes de Jean, Aurélie, leurs enfants Clément et Mimi, ainsi que Mémé Luce et Pépé Marcel.
Image dans la colonne principale
Lecteur PDF dans la colonne latérale
Texte dans la colonne latérale
La CIVIS cible également les jeunes générations pour qu’elles adoptent dès leur plus jeune âge des comportements responsables, avec des outils adaptés.
Elle s’est donc rapprochée des écoles élémentaires du territoire pour s’associer à cette campagne de sensibilisation. Les classes participantes recevront un kit éducatif et divertissant comprenant notamment un cahier d’activité et un jeu des 7 familles sur les écogestes.
Deux colonnes pour accès rapides et bannières
Bannières avec liens
Conteneur en 3 colonnes (33 % / 33 % / 33 %)
Encart dans la première colonne
Académie de La Réunion
Encart dans la deuxième colonne
CROUS La Réunion & Mayotte
Encart dans la troisième colonne
Département de La Réunion
Conteneur en 4 colonnes (25 % / 25 % / 25 % / 25 %)
Encart sur fond bleu
Texte courant en texte-inverse, liens et bouton en jaune.
Encart sur fond jaune
Texte en texte-secondaire, bouton sombre.
Encart sur fond neutre
Le fond des encarts et des bandes alternées.
Encart sur fond marine
L'encart sombre des pages validées : service référent, démarche liée.
Section numérotée avec compteur de contenus
Texte dans une section numérotée
Le compteur porte sur les contenus réellement présents dans la section.
Composition avec sommaire et colonne principale
Section numérotée avec accordéons
Texte d’introduction dans un accordéon
Différents sites présentent les aides disponibles et leurs conditions d'accès.
Conteneur en 3 colonnes (33 % / 33 % / 33 %)
Encart dans la première colonne
Académie de La Réunion
Encart dans la deuxième colonne
CROUS La Réunion & Mayotte — Dossier Social Étudiant
Encart dans la troisième colonne
Département de La Réunion
Téléphone mis en avant N° Vert Info Étudiants — Département de La Réunion
TEST
Section numérotée avec contenus imbriqués
Texte d’introduction dans un accordéon
Plusieurs possibilités s'offrent à toi :
Conteneur en 3 colonnes (33 % / 33 % / 33 %)
Encart dans la première colonne
Demande via le Dossier Social Étudiant, dès janvier.
Encart dans la deuxième colonne
Offres à Saint-Pierre et autour du campus.
Encart dans la troisième colonne
Une solution souple et économique.
TESTé
Section numérotée avec documents
Texte et liste dans un accordéon
Respecte les « 5 R » !
- Refuse — Tout produit dont tu n'as pas besoin
- Réduis — La quantité et la nocivité de tes déchets
- Réemploie — Répare et donne plutôt que jeter
- Réutilise — Un matériau pour un autre usage
- Recycle — En triant selon les consignes
Fichiers à télécharger dans un accordéon
- guide-du-tri-2026.pdfpdf · 14 Mo
Section numérotée avec accordéons
Texte dans un accordéon
Le réseau France Services t'accompagne dans tes démarches (CAF, Assurance maladie, impôts…) et t'oriente vers le bon interlocuteur. Tu peux aussi te rapprocher des assistant·e·s social·e·s du CROUS et de l'Université, ou vérifier tes droits sur mesdroitssociaux.gouv.fr et 1jeune1solution.gouv.fr.
Deux colonnes avec actualité et accès rapides
Titre au-dessus d’une liste d’actualités
Actualité sélectionnée dans News
Bande de contenus avec une vague en haut
Texte dans une bande à vague
<wx<wx
Trois colonnes avec vagues en haut et en bas
Conteneur en 2 colonnes (50 % / 50 %)
En travaux · Saint-Pierre
Texte avec titre de section
En travaux
Partager :