Exemples de Sections Héros

Cette page présente trois variantes de sections héros que vous pouvez utiliser dans vos templates. Chaque variante est adaptable en termes de couleurs, d'images et de contenu.

1. Hero Standard (texte à gauche, image à droite)

Tiers-lieu étonnant

Rassembler, outiller et activer les imaginaires

Tiers lieux rassemblant dans un espace commun des acteur·ices de la transition, des artisan·es et artisans, des projets engagés dans des enjeux sociaux et/ou environnementaux, des freelancers hors-cadre, ou encore des artistes.

L'Extension c'est quoi?
Rassembler, outiller et activer les imaginaires

Code d'utilisation

{% from "components/hero.njk" import hero %}

{{ hero(
  variant="standard",
  title="Rassembler, outiller et activer les imaginaires",
  subtitle="Tiers-lieu étonnant",
  description="Tiers lieux rassemblant dans un espace commun des acteur·ices de la transition...",
  buttonText="L'Extension c'est quoi?",
  buttonUrl="#",
  buttonType="solid",
  buttonSize="large",
  image="/assets/images/IMG_2096_2.jpg",
  backgroundColor="bg-blue-500"
) }}

2. Hero Centré (avec image en arrière-plan)

Espace de collaboration et créativité

Rejoignez-nous

Espace de collaboration et créativité

Venez découvrir un lieu dédié à l'innovation sociale, aux pratiques collaboratives et à la créativité. Ensemble, créons un futur plus durable et inclusif.

Découvrir nos activités

Code d'utilisation

{{ hero(
  variant="centered",
  title="Espace de collaboration et créativité",
  subtitle="Rejoignez-nous",
  description="Venez découvrir un lieu dédié à l'innovation sociale...",
  buttonText="Découvrir nos activités",
  buttonUrl="#",
  buttonType="contour",
  buttonSize="large",
  image="/assets/images/IMG_2096_2.jpg",
  hasOverlay=true,
  backgroundColor="bg-blue-500"
) }}

3. Hero Split (image et texte côte à côte)

Construisons ensemble

Ateliers participatifs

Construisons ensemble

Notre tiers-lieu propose des ateliers, des événements et des espaces de travail partagés pour faciliter les rencontres, les échanges et les collaborations entre personnes partageant des valeurs communes.

Voir le programme

Code d'utilisation

{{ hero(
  variant="split",
  title="Construisons ensemble",
  subtitle="Ateliers participatifs",
  description="Notre tiers-lieu propose des ateliers, des événements et des espaces de travail partagés...",
  buttonText="Voir le programme",
  buttonUrl="#",
  buttonType="fantome",
  buttonSize="large",
  image="/assets/images/IMG_2096_2.jpg",
  imagePosition="right",
  backgroundColor="bg-blue-500"
) }}

Variante avec image à gauche:

Construisons ensemble

Ateliers participatifs

Construisons ensemble

Notre tiers-lieu propose des ateliers, des événements et des espaces de travail partagés pour faciliter les rencontres, les échanges et les collaborations entre personnes partageant des valeurs communes.

Voir le programme

4. Hero avec Slider (format 9/16) et titre plus grand

Tiers-lieu étonnant

Rassembler, outiller et activer les imaginaires

Tiers lieux rassemblant dans un espace commun des acteur·ices de la transition, des artisan·es et artisans, des projets engagés dans des enjeux sociaux et/ou environnementaux.

Code d'utilisation

{{ hero(
  variant="slider",
  title="Rassembler, outiller et activer les imaginaires",
  subtitle="Tiers-lieu étonnant",
  description="Tiers lieux rassemblant dans un espace commun des acteur·ices de la transition...",
  buttonText="L'Extension c'est quoi?",
  buttonUrl="#",
  buttonType="solid",
  buttonSize="large",
  images=[
    {src: "/assets/images/IMG_2095.jpg", alt: "Espace de coworking"},
    {src: "/assets/images/IMG_2096_2.jpg", alt: "Atelier collaboratif"},
    {src: "/assets/images/IMG_2091_2.jpg", alt: "Événement créatif"}
  ],
  hasOverlay=true,
  backgroundColor="bg-blue-500"
) }}

Paramètres de personnalisation

La macro hero accepte les paramètres suivants:

  • variant: "standard", "centered" ou "split"
  • title: Titre principal
  • subtitle: Texte court au-dessus du titre (optionnel)
  • description: Description détaillée (optionnel)
  • buttonText: Texte du bouton (optionnel)
  • buttonUrl: URL du bouton (optionnel, défaut: "#")
  • buttonType: Type de bouton (défaut: "solid")
  • buttonSize: Taille du bouton (défaut: "large")
  • image: Chemin vers l'image (optionnel)
  • images: Tableau d'objets {src, alt} pour le slider (utilisé uniquement avec variant="slider")
  • hasOverlay: Ajouter un overlay sur l'image (défaut: true)
  • imagePosition: Position de l'image pour le variant "split" ("right" ou "left", défaut: "right")
  • backgroundColor: Classe de couleur d'arrière-plan (défaut: "bg-blue-500")

Vous pouvez adapter chaque héros en modifiant ces paramètres selon vos besoins.