Une slide par type de bloc YAML — démo exampleSite

Studio LowditRéférence Sligo21 · 10 · 2026

Comment lire ce deck

Chaque slide montre un seul type de composition décrit dans le front matter YAML.

Les decks thématiques mélangent ces blocs ; ici, c’est le catalogue visuel pour auteurs et intégrateurs.

Structure Séparer les chapitres

Structure - Titre + texte

  • Listes et gras Markdown
  • Paragraphes courts
  • Un rappel de titre peut venir d’une slide précédente (non montré ici)

Le bloc focus : une phrase qui tient toute la slide.

Statement
Citation ou règle centrale, avec une note en bas de bloc.
Clé YAML : statement.eyebrow · texte · note

Grilles

Grilles - Cartes

Carte A

Titre + texte court.

Carte B

Jusqu’à quatre cartes par slide.

Carte C

Fragments Reveal au clic.

Carte D

Option image: demo-1.svg sur une carte.
Grilles - Étapes numérotées
01

Cadrer

Objectif et hors-périmètre.
02

Produire

Contenu ou livrable.
03

Valider

Recette et décision.
Grilles - Chiffres animés
42indicateur fictif
98 %taux de complétion
3 mintemps de lecture cible
Stat isolé
1 / 6utilisateurs concernés (exemple)Clé YAML : stat (singulier)

Contrastes

Contrastes - Compare — deux colonnes

Colonne neutre

Texte, focus ou image dans chaque colonne.

Colonne accent

color: red · blue · green selon la palette du deck.
Contrastes - Aside — contenu + encart

Bloc principal

Premier panneau : large, à gauche.

Radial Pas une image

Radial - Radial — items autour d’un centre
CentreRôle transversalHTML/CSS Sligo — clé YAML radial
Pilotageplan · suivi
Qualitérecette
Budgetarbitrages
Équiperituels
Clientsfeed-back
Veilleoutils

Image & SVG Fichiers du thème

Le bloc image: affiche un SVG ou PNG (ici demo-2.svg du thème).

Les fichiers demo-*.svg de l’exampleSite sont des graphiques décoratifs sans texte dans le fichier — d’où l’impression « vide ». En deck réel : SVG avec légende intégrée, ou texte Markdown comme ici.

Image & SVG - Clé image — figure centrée
Même source (demo-1.svg), conteneur sligo-svg (plus grand que sligo-media).
Image & SVG - Clé svg — zone d’affichage plus large
Image & SVG - Code source
yaml
slides:
  content:
    - part: "Chapitre"
    - focus: "Une idée par slide."
Image & SVG - Quiz interactif

Quel bloc sépare visuellement les chapitres ?

Fin

Règle d’auteur
Une composition par slide quand vous apprenez ; mélangez-les quand le récit est rodé.
colorway · font · image de couverture : front matter du deck.