Modules
Un module est un ensemble de textes et/ou de composants organisés dans une structure prédéfinie. Les modules s'utilisent comme des templates prêts à l'emploi pour construire rapidement des pages de contenu dans Figma ainsi que dans notre CMS LifeRay.
Les modules sont répartis dans plusieurs grandes catégories en fonction de leur objectif. Voici les différentes catégories :
Structurer la page
-

Business product summary
Bloc situé en dessous du jumbotron qui permet d’afficher les tags et les liens utiles liés à la page.
-

Header
Haut de page intégrant logo, navigation et éléments de connexions.
-

Jumbotron
Grand bloc visuel en haut de page qui introduit le contenu de la page.
-

Footer
Bas de page contenant navigation, liens et informations utiles.
-

Search
Module permettant à l’utilisateur d’effectuer une recherche ciblée sur le site.
Présenter un contenu informatif/éditorial
-

Text cards
Bloc combinant texte introductif et cartes de contenu variées.
-

Text image
Bloc combinant un texte et une image alignés côte à côte.
-

Text img bg blue
Variante “text image” avec un fond foncé.
-

Text narrow
Bloc de texte en colonne étroite.
-

Text video
Bloc combinant une zone de texte et une vidéo intégrée.
-

Title data
Bloc associant un texte et des données chiffrées clés.
-

Title image
Bloc combinant un texte et une image centrée.
-

Iframe
Bloc permettant d’afficher un contenu externe.
-

Vidéo
Module vidéo permettant de diffuser un contenu multimédia intégré.
Présenter plusieurs contenus informatifs/éditoriaux
-

Accordion
Bloc combinant une intro et une liste empilée de headers qui affiche ou masque des contenus associés.
-

Blog card
Liste d’articles de blog avec une mise en page minimale.
-

Cards article
Liste d’articles de blog avec une mise en page plus fournie (image, auteur, etc…)
-

Cards event
Liste d’événements à venir ou passés, placés dans un carousel.
-

Cards inline
Bloc avec trois colonnes de cartes personnalisables.
-

CTA Masonry
Ensemble de blocs visuels redirigeant vers divers contenus.
-

File
Module permettant de lister et proposer des fichiers téléchargeables (PDF, XLS, etc.).
-

Half image BG card
Bloc graphique combinant texte, image et liens sur fond visuel.
-

Redirection
Liste de contenus liés redirigeant vers d’autres pages utiles.
-

Tabs offers
Liste de contenus liés filtrables grâce à un système d’onglets.
-

Title 3 cols
Blocs de textes divisés en trois colonnes équilibrées.
-

Title text 2 cols
Blocs de textes divisé en deux colonnes équilibrées.
Présenter des fonctionnalités/services clés
-

Compare
Présentation de fonctionnalités ou d’avantages en trois colonnes avec icônes et textes.
-

Features list
Liste claire présentant les fonctionnalités clés ou avantages d’une offre.
-

Services
Liste présentant les différents services proposés par Post.
-

Stepper
Présentation graphique des étapes d’un processus à suivre.
-

Swiper
Carousel horizontal permettant de faire défiler plusieurs contenus.
-

Tools
Liste de liens vers les outils pratiques et plateformes utiles.
Mettre en avant une offre/produit
-

Logo list
Liste filtrable de logos, ex. chaînes TV ou partenaires.
-

Movie preview
Bloc visuel présentant le catalogue de VOD.
-

Plan
Bloc présentant les caractéristiques d’une ou plusieurs offres.
-

Product offer detail
Fiche détaillée présentant les caractéristiques d’une offre.
-

Product offer detail image cover
Fiche produit avec couverture visuelle large et mise en avant impactante.
-

Promote
Card visuelle mettant en avant une offre promotionnelle.
-

TV Programs
Liste actualisée des programmes TV en direct ou à venir.
Comparer des offres/produits
-

Cards offer
Carousel interactif permettant de mettre en avant plusieurs offres.
-

Compare pack
Tableau visuel en quatre colonnes pour comparer différentes offres (eboo).
-

Compare product
Tableau visuel en quatre colonnes pour comparer différents produits simples.
-

Compare product table
Tableau détaillé pour comparer fonctionnalités et options de plusieurs produits.
-

Compare speed-test
Comparatif visuel permettant de tester et comparer la vitesse réseau.
-

Mobile phone plan
Comparateur dédié aux offres et abonnements mobiles.
-

Option
Liste détaillant les offres ou les options disponibles pour une offre.
-

Plan selection
Comparateur interactif pour sélectionner une offre parmi plusieurs (POP Internet).
Créer de la confiance
-

Quote
Bloc de citation mettant en avant une parole clé.
-

Testimonial
Carousel de témoignage clients.
-

Title respect
Bloc textuel présentant les valeurs ou engagements de l’entreprise.
-

Logo text
Bloc combinant logos de partenaires et texte explicatif.
Conversion (CTA)
-

Contact expert
Bloc mettant en avant les experts et invitant l’utilisateur à les contacter.
-

CTA
Bloc court avec un message impactant et un ou deux boutons d’action.
-

CTA Brochure
Bloc pour télécharger ou consulter une ou deux brochures.