Block : cards block

Ce block permet de créer une série de « cards » au sens du framework Bootstrap.

Ces « cards » sont des conteneurs flexibles et extensibles, alignés sur une grille, ne possédant pas de dimension intrinsèque, et occupant donc tout l’espace disponible. Elles peuvent se composer d’un en-tête, d’un corps et d’un pieds, permettant de gérer facilement l’alignement vertical de ces éléments.

Contenu

  • Title (texte – facultatif) : le titre global du block, occupant toute sa largeur
  • Cards (groupe répétables – obligatoire) : la définition des différentes « cards » composant le block

Chaque card est définie par :

  • Title (string) : son titre
  • Card header (contenu) : son en-tête
  • Image (image- facultatif) : définir une une image lui servant de thumbnail. Cette image se trouve classiquement au dessus de son corps
  • Card body (contenu) : son corps
  • Card footer (contenu) : son pieds de page
  • Card link (groupe) : permet de lier la carte à une url, interne (Internal link) ou externe (External link), et de définir si ce lien ouvre un nouvel onglet (Open in new tab)
  • Class(es) (string) : permet d’attribuer une ou plusieurs classes css à la carte

 

Réglages

  • Display type (choix) : définit le positionnement des cartes
    – grid : grille Bootstrap classique, définit en lignes,
    – columns : grille définie en colonnes
    – deck : grille de cartes de même hauteur et largeur. La mise en page s’ajustera automatiquement au fur et à mesure que vous insérez plus de cartes. Les cartes sont affichées verticalement sur de petits écrans (moins de 576 px). Elles sont espacées par un espace.
    – group : idem à deck, mais sans espace latéral les séparant
  • Cards per lines (nombre) : le nombre de cartes à afficher par lignes (mode « grid ») ou le nombre de colonnes (mode « columns »). Paramètre inopérant pour les modes deck ou group. Ce nombre peut être précisé pour les résolutions desktop (lg), intermédiaires (md) ou  mobiles (sm).
  • Cards options (groupe) : définit les options générales des cartes – voir plus loin
  • Cards header ? (choix) : afficher ou masquer l’en-tête des cartes
  • Cards header options (groupe) : si « card header » est sur « yes », définit des options pour l’en-tête des cartes – voir plus loin
  • Cards footer ? (choix) : afficher ou masquer le pieds des cartes
  • Cards footer options (groupe) : si card footer est sur « yes », définit des options pour le pieds des cartes – voir plus loin

Les options générales des cartes (cards options) :

  • Cards background (couleur) : définit la couleur de fond des cartes
  • Text color (couleur) : définit la couleur des textes des cartes
  • Cards border (choix) : active ou désactive les bordures des cartes
  • Cards border settings (groupe) : permet de définir la couleur (Color) et l’épaisseur (Width) des bordures si le critère précédent a été réglé sur l’activation de ces bordures
  • Border radius (nombre) : définit l’arrondi des angles des cartes, la valeur 0 donnant un angle droit
  • Show title (choix) : permet de définit l’emplacement du titre des cartes : aucun, header, body ou footer
  • Title tag (choix) : définit le balisage du titre des cartes
  • Image position (choix) : si une image est associée à la carte, définit sa position : top (en haut du corps de la carte), bottom (en bas), overlay (en image de fond).

Les options des en-têtes (Cards header options) et pieds des cartes (Cards footer options)

  • Background (couleur) : définit la couleur d’arrière plan
  • Text color (couleur) : définit la couleur de texte
  • Min height (string) : définit la valeur de la hauteur minimale, par défaut sur « auto »
  • Border (choix) : active ou non la bordure inférieure (Cards header options) ou supérieure (Cards footer options)
  • Border settings (groupe) : permet de définir la couleur (Color) et l’épaisseur (Width) de cette bordure