visual-lab

list-01-giant-numbers

Colonnes à numéro géant

Aligner trois à quatre arguments de même rang en colonnes, chacun ouvert par un numéro ou un chiffre démesuré qui sert à la fois de repère de lecture et de seule tache de couleur du bloc.

listslideweb2380×479pxaucun 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

Bas de slide : les trois causes d'un problème, les trois étapes d'une solution, les quatre chiffres d'une traction. Trois ou quatre colonnes ; à cinq, le numéro cesse d'être un repère et devient une texture.

Éviter quand

Les entrées ne sont pas de même rang (une hiérarchie déguisée en liste), ou chacune demande plus de trois lignes de texte : ce n'est alors plus une liste, c'est une section.

Notes

Trois réglages. 1) RAPPORT D'ÉCHELLE : le numéro doit faire au moins six fois le corps (88 px contre 13 px) ; en dessous, il redevient une puce numérotée ordinaire et le bloc perd son ancrage. 2) FILET PORTÉ À GAUCHE, retiré sur le premier enfant (`:first-child`) : il n'y a jamais de filet en bord de bloc, seulement entre les colonnes — poser une bordure extérieure transformerait la liste en tableau. 3) UNE SEULE COULEUR : le numéro est le seul élément coloré ; sur fond plein il passe au blanc, car ce système ne pose jamais son bleu sur autre chose que du blanc. La même mécanique accepte un rang (01, 02, 03) ou un chiffre réel (412, €38M) : dans le second cas, garder les libellés courts, la variation de largeur des chiffres se voit.

Mots-clés

listenumerotationcolonneschiffrekpiargumentdeckslidefiletsuisseetapes

Le code

fragment — patterns/list-01-giant-numbers.html Télécharger
<!-- list-01-giant-numbers — fragment autonome. Couleurs via --vl-* uniquement. -->
<div class="vl-numgiant-demo">
  <div class="vl-numgiant">
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">01</span>
      <p class="vl-numgiant__body">Fragmented inventory. 68% of small operators still keep
        availability in a spreadsheet, and republish it by hand on four channels.</p>
    </div>
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">02</span>
      <p class="vl-numgiant__body">Commission drift. Marketplace fees moved from 12% to 21% in
        five years, without any matching gain in booking volume.</p>
    </div>
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">03</span>
      <p class="vl-numgiant__body">No direct relationship. The operator never owns the traveller
        record, so repeat business is captured by someone else.</p>
    </div>
  </div>
</div>

<!-- Même mécanique, chiffres réels au lieu d'un rang : la colonne devient un KPI. -->
<div class="vl-numgiant-demo vl-numgiant-demo--fill">
  <div class="vl-numgiant">
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">412</span>
      <p class="vl-numgiant__body">Operators live on the platform, across 9 countries.</p>
    </div>
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">€38M</span>
      <p class="vl-numgiant__body">Gross booking value processed in the last twelve months.</p>
    </div>
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">2.4×</span>
      <p class="vl-numgiant__body">Net revenue retention, driven by inventory growth per operator.</p>
    </div>
    <div class="vl-numgiant__col">
      <span class="vl-numgiant__num">61%</span>
      <p class="vl-numgiant__body">Of bookings now direct — the share we do not charge a fee on.</p>
    </div>
  </div>
</div>

<style>
/* Le numéro est le seul objet coloré de la slide, et il est énorme (88 px pour 13 px de
   corps, soit un rapport de presque 7). Le filet vertical remplace toute carte : pas de
   fond, pas de rayon, pas de bordure extérieure. */
.vl-numgiant-demo {
  padding: 48px; margin-bottom: 24px;
  background: var(--vl-white); color: var(--vl-black);
  font-family: "Helvetica Neue", Inter, Arial, sans-serif;
}
.vl-numgiant-demo--fill { background: var(--vl-blue); color: var(--vl-white); }

.vl-numgiant { display: flex; }
/* Le filet porté par `border-left` et retiré sur le premier enfant : il n'y a donc jamais
   de filet en bord de bloc, seulement ENTRE les colonnes. */
.vl-numgiant__col {
  flex: 1; padding: 0 32px;
  border-left: 1px solid var(--vl-hairline);
}
.vl-numgiant__col:first-child { padding-left: 0; border-left: 0; }
.vl-numgiant-demo--fill .vl-numgiant__col { border-color: var(--vl-hairline-invert); }

.vl-numgiant__num {
  display: block;
  font-size: 88px; line-height: 1; font-weight: 900; letter-spacing: -0.03em;
  color: var(--vl-blue);
}
.vl-numgiant-demo--fill .vl-numgiant__num { color: var(--vl-white); }

.vl-numgiant__body {
  margin: 14px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--vl-ink-muted);
}
.vl-numgiant-demo--fill .vl-numgiant__body { 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-01-giant-numbers.json (télécharger) 
{
  "name": "Colonnes à numéro géant",
  "family": "list",
  "ref": "ref-04-swiss-investor-blue",
  "intent": "Aligner trois à quatre arguments de même rang en colonnes, chacun ouvert par un numéro ou un chiffre démesuré qui sert à la fois de repère de lecture et de seule tache de couleur du bloc.",
  "when_to_use": "Bas de slide : les trois causes d'un problème, les trois étapes d'une solution, les quatre chiffres d'une traction. Trois ou quatre colonnes ; à cinq, le numéro cesse d'être un repère et devient une texture.",
  "avoid_when": "Les entrées ne sont pas de même rang (une hiérarchie déguisée en liste), ou chacune demande plus de trois lignes de texte : ce n'est alors plus une liste, c'est une section.",
  "tags": [
    "liste",
    "numerotation",
    "colonnes",
    "chiffre",
    "kpi",
    "argument",
    "deck",
    "slide",
    "filet",
    "suisse",
    "etapes"
  ],
  "vars": [
    {
      "name": "--vl-blue",
      "role": "couleur du numéro sur fond clair",
      "default": "#1B44D8"
    },
    {
      "name": "--vl-hairline",
      "role": "filet vertical entre colonnes, fond clair",
      "default": "#00000018"
    },
    {
      "name": "--vl-hairline-invert",
      "role": "filet vertical sur fond plein",
      "default": "#FFFFFF33"
    },
    {
      "name": "--vl-ink-muted",
      "role": "corps de texte sous le numéro",
      "default": "#6E6E6E"
    }
  ],
  "slots": [
    "num",
    "body"
  ],
  "notes": "Trois réglages. 1) RAPPORT D'ÉCHELLE : le numéro doit faire au moins six fois le corps (88 px contre 13 px) ; en dessous, il redevient une puce numérotée ordinaire et le bloc perd son ancrage. 2) FILET PORTÉ À GAUCHE, retiré sur le premier enfant (`:first-child`) : il n'y a jamais de filet en bord de bloc, seulement entre les colonnes — poser une bordure extérieure transformerait la liste en tableau. 3) UNE SEULE COULEUR : le numéro est le seul élément coloré ; sur fond plein il passe au blanc, car ce système ne pose jamais son bleu sur autre chose que du blanc. La même mécanique accepte un rang (01, 02, 03) ou un chiffre réel (412, €38M) : dans le second cas, garder les libellés courts, la variation de largeur des chiffres se voit.",
  "id": "list-01-giant-numbers"
}

À côté