visual-lab

list-03-two-column-toc

Sommaire numéroté 2 colonnes

Faire tenir un sommaire de dix à quatorze sections sur une seule slide, en deux colonnes numérotées, lisible d'un coup d'œil et refermable aussitôt.

listslideweb886×560pxaucun benchmark

Télécharger le .zip

Le fragment RÉEL, dans son propre document, sur le sol de sa charte — pas une image. Ce que vous voyez est exactement ce que vous collerez.

Employer quand

Deck long qu'on présente à quelqu'un qui doit savoir combien de temps ça va durer : investisseur, comité, client. Idéalement 10 à 14 entrées.

Éviter quand

Moins de huit entrées (une seule colonne suffit et la deuxième sonne creux), ou entrées de longueur très inégale : à 11 px en capitales, une entrée qui passe sur deux lignes casse l'alignement des filets.

Notes

Trois pièges, tous vérifiés au rendu. 1) ORDRE DE REMPLISSAGE : la grille CSS remplit par lignes, donc le HTML s'écrit 01, 07, 02, 08… pour obtenir 01-06 à gauche et 07-12 à droite. Écrire les entrées dans l'ordre naturel donne 01-02 côte à côte — le sommaire devient illisible sans qu'aucune règle CSS n'ait l'air fausse. 2) BLOC CENTRÉ, PAS ÉTIRÉ : `align-content: center` sur des lignes serrées ; répartir les six lignes sur toute la hauteur (`space-between`) éloigne chaque filet de son entrée et l'espace se lit comme un oubli. 3) NUMÉRO EN RETRAIT : le chiffre est en gris, le libellé en plein — l'inverse fait lire la numérotation avant les sections. La colonne de titre à 40 % laisse volontairement du vide sous elle : c'est la respiration qui signale une slide de transition.

Mots-clés

sommairetocagendanumerotationcolonnesdeckslidenavigationfiletsuisse

Le code

fragment — patterns/list-03-two-column-toc.html Télécharger
<!-- list-03-two-column-toc — fragment autonome. Couleurs via --vl-* uniquement. -->
<div class="vl-toc-demo">
  <div class="vl-toc-demo__title">
    <h2 class="vl-toc__head">Table of<br>content</h2>
    <p class="vl-toc__note">Twelve sections, twenty minutes. The numbers start on section eight.</p>
  </div>

  <!-- Ordre de lecture : les entrées sont écrites 01, 07, 02, 08… car la grille remplit par
       LIGNES. C'est ce qui donne 01-06 à gauche et 07-12 à droite sans quitter le HTML. -->
  <ol class="vl-toc">
    <li><span>01</span><span>Table of content</span></li>
    <li><span>07</span><span>Team</span></li>
    <li><span>02</span><span>Problem</span></li>
    <li><span>08</span><span>Traction</span></li>
    <li><span>03</span><span>Product</span></li>
    <li><span>09</span><span>Competition</span></li>
    <li><span>04</span><span>Solution</span></li>
    <li><span>10</span><span>Financials</span></li>
    <li><span>05</span><span>Market</span></li>
    <li><span>11</span><span>Roadmap</span></li>
    <li><span>06</span><span>Business model</span></li>
    <li><span>12</span><span>Ask / closing</span></li>
  </ol>
</div>

<style>
/* Un sommaire de deck n'est pas une liste de liens : il se lit en un coup d'œil et se
   referme. D'où 11 px en capitales, un filet par entrée, et rien d'autre. */
.vl-toc-demo {
  display: flex; gap: 64px; align-items: stretch;
  padding: 48px; min-height: 560px;
  background: var(--vl-blue); color: var(--vl-white);
  font-family: "Helvetica Neue", Inter, Arial, sans-serif;
}
.vl-toc-demo__title { flex: 0 0 40%; }
.vl-toc__head {
  margin: 0;
  font-size: 76px; line-height: 0.92; font-weight: 900;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.vl-toc__note {
  margin: 28px 0 0; max-width: 34ch;
  font-size: 13px; line-height: 1.5; color: var(--vl-ink-muted-invert);
}

/* Bloc compact CENTRÉ dans la hauteur (`align-content: center`). Étirer les 6 lignes sur
   toute la hauteur détache chaque filet de son entrée et l'écart se lit comme un accident. */
.vl-toc {
  flex: 1; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
  align-content: center;
}
.vl-toc li {
  display: flex; gap: 20px; padding: 22px 0;
  border-bottom: 1px solid var(--vl-hairline-invert);
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Le numéro s'efface, le libellé porte : l'inverse ferait lire la numérotation avant les
   sections. */
.vl-toc li span:first-child { color: var(--vl-ink-muted-invert); }
</style>
tokens de la charte — systems/ref-04-swiss-investor-blue.json Télécharger
:root {
  --vl-bg: #D9D2C7;
  --vl-board: #D9D2C7;
  --vl-blue: #1B44D8;
  --vl-black: #0D0D0D;
  --vl-white: #FFFFFF;
  --vl-ink-muted: #6E6E6E;
  --vl-ink-muted-invert: #D3D3D3;
  --vl-hairline: #00000018;
  --vl-hairline-invert: #FFFFFF33;
  --vl-ph-a: #C9C9C9;
  --vl-ph-b: #5A5A5A;
  --vl-margin: 48px;
}
les métadonnées — patterns/list-03-two-column-toc.json (télécharger) 
{
  "name": "Sommaire numéroté 2 colonnes",
  "family": "list",
  "ref": "ref-04-swiss-investor-blue",
  "intent": "Faire tenir un sommaire de dix à quatorze sections sur une seule slide, en deux colonnes numérotées, lisible d'un coup d'œil et refermable aussitôt.",
  "when_to_use": "Deck long qu'on présente à quelqu'un qui doit savoir combien de temps ça va durer : investisseur, comité, client. Idéalement 10 à 14 entrées.",
  "avoid_when": "Moins de huit entrées (une seule colonne suffit et la deuxième sonne creux), ou entrées de longueur très inégale : à 11 px en capitales, une entrée qui passe sur deux lignes casse l'alignement des filets.",
  "tags": [
    "sommaire",
    "toc",
    "agenda",
    "numerotation",
    "colonnes",
    "deck",
    "slide",
    "navigation",
    "filet",
    "suisse"
  ],
  "vars": [
    {
      "name": "--vl-blue",
      "role": "fond plein de la slide de sommaire",
      "default": "#1B44D8"
    },
    {
      "name": "--vl-hairline-invert",
      "role": "filet sous chaque entrée",
      "default": "#FFFFFF33"
    },
    {
      "name": "--vl-ink-muted-invert",
      "role": "numéro d'entrée, en retrait du libellé",
      "default": "#D3D3D3"
    }
  ],
  "slots": [
    "head",
    "note",
    "entries"
  ],
  "notes": "Trois pièges, tous vérifiés au rendu. 1) ORDRE DE REMPLISSAGE : la grille CSS remplit par lignes, donc le HTML s'écrit 01, 07, 02, 08… pour obtenir 01-06 à gauche et 07-12 à droite. Écrire les entrées dans l'ordre naturel donne 01-02 côte à côte — le sommaire devient illisible sans qu'aucune règle CSS n'ait l'air fausse. 2) BLOC CENTRÉ, PAS ÉTIRÉ : `align-content: center` sur des lignes serrées ; répartir les six lignes sur toute la hauteur (`space-between`) éloigne chaque filet de son entrée et l'espace se lit comme un oubli. 3) NUMÉRO EN RETRAIT : le chiffre est en gris, le libellé en plein — l'inverse fait lire la numérotation avant les sections. La colonne de titre à 40 % laisse volontairement du vide sous elle : c'est la respiration qui signale une slide de transition.",
  "id": "list-03-two-column-toc"
}

À côté