Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Tableau à lignes alternées avec une ligne de médiane et une ligne mise en avant.
Entrées attendues
Prêt à coller
Remplacez les quinze valeurs de charte par les vôtres, décrivez votre contenu, et rendez la slide. Votre texte ne passe par aucun serveur tiers : il reste dans votre conversation.
Tu produis une slide au format HTML, à la charte ci-dessous. Applique le skill sans l'interpréter.
## Ma charte
--brand-paper: #FFFFFF /* fond de slide */
--brand-ink: #101F2C /* encre principale */
--brand-ink-2: #5B6875 /* encre secondaire */
--brand-wash: #EEF2F5 /* aplat neutre */
--brand-accent: #0E6B8A /* accent, avec parcimonie */
--brand-accent-soft: #DDEDF3 /* accent adouci */
--brand-rule: #D7DEE4 /* filets */
--brand-radius: 4px /* rayon unique */
--brand-line: 1px /* épaisseur de filet unique */
--brand-display: "…" /* police des titres */
--brand-body: "…" /* police du corps */
/* les quatre suivantes ne servent qu'aux composants qui portent une image */
--brand-img-voile: linear-gradient(180deg, rgba(16,31,44,.72) 0%, rgba(16,31,44,.42) 55%, rgba(16,31,44,.66) 100%);
/* voile posé sur l'image, obligatoire */
--brand-img-ink: #FFFFFF /* encre du texte posé SUR l'image */
--brand-img-filtre: grayscale(.35) contrast(1.06) brightness(.95)
/* traitement, identique pour toute image */
--brand-img-teinte: rgba(14,107,138,.22)
/* teinte projetée, en mélange multiply */
Remplacez ces quinze valeurs par les vôtres.
L'encre d'image ne se déduit ni du papier ni de l'encre : elle se lit contre le
voile, qui reste sombre même sur une charte sombre.
## Le skill de @table-comparables
# @table-comparables
Tableau à lignes alternées avec une ligne de médiane et une ligne mise en avant.
## Quand l'employer
Comparer des lignes homogènes sur trois à cinq colonnes chiffrées.
## Les entrées attendues
- `titre`
- `colonnes`
- `lignes`
- `ligne médiane`
- `ligne cible`
## Les règles
1. La première colonne est textuelle et alignée à gauche, toutes les autres sont chiffrées et alignées à droite.
2. La ligne de médiane prend la teinte de repos, la ligne cible prend la teinte d'accent adoucie.
3. Les décimales sont constantes sur toute une colonne.
4. Au-delà de neuf lignes, le tableau passe sur deux slides.
## À ne pas lui demander
- Colorer une ligne en rouge ou en vert : la mise en avant passe par la teinte d'accent, jamais par une couleur d'alerte.
- Ajouter une bordure verticale entre les colonnes.
## Tokens de charte employés
Ce composant n'écrit aucune couleur, aucune police, aucun rayon ni aucune
épaisseur de filet en dur. Il lit uniquement :
`--brand-paper`, `--brand-ink`, `--brand-ink-2`, `--brand-wash`,
`--brand-accent`, `--brand-accent-soft`, `--brand-rule`, `--brand-radius`,
`--brand-line`, `--brand-display`, `--brand-body`.
Ce composant lit ces onze valeurs et s'y conforme sans interprétation. La
charte complète en compte quinze : les quatre autres règlent le traitement des
images et ne servent qu'aux composants qui en portent une.
## Le composant
```html
<style>
.c{position:absolute;inset:0;background:var(--brand-paper);color:var(--brand-ink);
font-family:var(--brand-body);padding:72px 88px 104px;box-sizing:border-box;display:flex;
flex-direction:column}
.c h2{font-family:var(--brand-display);font-size:46px;line-height:1.08;letter-spacing:-.026em;
font-weight:600;margin:0;max-width:24ch}
.c h2.t-fort{font-size:68px;line-height:1.02;letter-spacing:-.035em;max-width:17ch}
.c h2.t-menu{font-size:34px;line-height:1.14;letter-spacing:-.018em;max-width:30ch}
.c .sub{color:var(--brand-ink-2);font-size:19px;margin:14px 0 0;max-width:62ch;line-height:1.45}
.c .foot{position:absolute;left:88px;right:88px;bottom:40px;display:flex;justify-content:space-between;
font-size:13px;color:var(--brand-ink-2)}
.c .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-accent);
font-weight:600;margin:0 0 18px}
/* image : voile, filtre et teinte viennent tous de la charte */
.c .img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
filter:var(--brand-img-filtre)}
.c .voile{position:absolute;inset:0;background:var(--brand-img-voile)}
.c .teinte{position:absolute;inset:0;background:var(--brand-img-teinte);mix-blend-mode:multiply}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<table style="width:100%;border-collapse:collapse;margin-top:44px;font-size:15px">
<tr>{{#cols}}<th style="text-align:{{align}};padding:0 0 12px;font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--brand-ink-2);font-weight:600;
border-bottom:var(--brand-line) solid var(--brand-rule)">{{lib}}</th>{{/cols}}</tr>
{{#rows}}
<tr style="{{style}}">{{#cells}}<td style="text-align:{{align}};padding:13px 0;
border-bottom:var(--brand-line) solid var(--brand-rule)">{{v}}</td>{{/cells}}</tr>
{{/rows}}
</table>
<div class="foot"><span>{{source}}</span><span>{{page}}</span></div>
</div>
```
## Mon contenu
Remplacez les valeurs entre accolades par les vôtres, puis rendez la slide en
1280 × 720. Ne changez aucune règle graphique du composant.Les règles
Rien n'est caché derrière une inscription. Le fichier de règles est ce qui empêche le modèle d'improviser, et vous devez pouvoir le juger avant de payer quoi que ce soit.
# @table-comparables Tableau à lignes alternées avec une ligne de médiane et une ligne mise en avant. ## Quand l'employer Comparer des lignes homogènes sur trois à cinq colonnes chiffrées. ## Les entrées attendues - `titre` - `colonnes` - `lignes` - `ligne médiane` - `ligne cible` ## Les règles 1. La première colonne est textuelle et alignée à gauche, toutes les autres sont chiffrées et alignées à droite. 2. La ligne de médiane prend la teinte de repos, la ligne cible prend la teinte d'accent adoucie. 3. Les décimales sont constantes sur toute une colonne. 4. Au-delà de neuf lignes, le tableau passe sur deux slides. ## À ne pas lui demander - Colorer une ligne en rouge ou en vert : la mise en avant passe par la teinte d'accent, jamais par une couleur d'alerte. - Ajouter une bordure verticale entre les colonnes. ## Tokens de charte employés Ce composant n'écrit aucune couleur, aucune police, aucun rayon ni aucune épaisseur de filet en dur. Il lit uniquement : `--brand-paper`, `--brand-ink`, `--brand-ink-2`, `--brand-wash`, `--brand-accent`, `--brand-accent-soft`, `--brand-rule`, `--brand-radius`, `--brand-line`, `--brand-display`, `--brand-body`. Ce composant lit ces onze valeurs et s'y conforme sans interprétation. La charte complète en compte quinze : les quatre autres règlent le traitement des images et ne servent qu'aux composants qui en portent une.
Même famille · Preuve
Relevé dans 13 documents · Lefty, Ace & Tate
Quatre indicateurs avec libellé, valeur et phrase de lecture.
type: chiffres clés · charte: héritée
Relevé dans 9 documents · Arkive Inc., Combo
Oppose deux options ligne à ligne sur les mêmes critères. La colonne retenue prend l'accent, jamais une couleur de validation.
type: comparatif · charte: héritée
Relevé dans 16 documents · GHARAGE GmbH & Co. KG, Artsy
Un graphique en barres et la lecture qui l'accompagne, côte à côte. Le titre porte la conclusion, la figure la démontre.
type: graphique · charte: héritée
Vu dans des présentations réelles
6 pages relevées dans la galerie
Chaque vignette est la page réelle du document, créditée à son éditeur, avec la leçon qui explique pourquoi la mise en page tient. Le composant ci-dessus la refait à votre charte.
Grille tarifaire commentée à gauche
La moitié droite passe sur un aplat teinté et porte la grille service, durée, fourchette de prix, pendant que la gauche reste blanche et répond aux objections avant qu'elles ne montent. Afficher ses tarifs dans un deck de présentation devient tenable parce que le commentaire encadre le chiffre au lieu de le laisser nu.
Échelle d'intensité sous une bande continue
Une seule image panoramique montre six cas rangés du plus discret au plus spectaculaire, et six colonnes de critères se calent dessous, chacune sous son cas. La règle et sa preuve se lisent sur le même axe horizontal, ce qu'un tableau de critères seul ne permet pas.
Benchmark où la taille dit l'écart
Le tableau compare trois colonnes sur cinq critères, et les deux lignes les plus spectaculaires sont composées en très grand corps pendant que les autres restent en texte courant. L'écart se voit avant d'être lu, et le tableau garde sa rigueur ligne à ligne pour qui veut vérifier.
Le tableau porte sa ligne d'écart
Le tableau donne les valeurs de 2021, celles de 2022, puis une troisième ligne qui affiche directement l'écart entre les deux. Le lecteur n'a aucune soustraction à faire, donc il retient la progression au lieu de vérifier les chiffres.
Table de correspondance à colonne pivot
La colonne de gauche liste les quatre piliers maison sur un aplat de couleur vive, les colonnes suivantes rangent les référentiels externes en neutre. Le lecteur voit d'un coup ce que l'entreprise revendique en propre et à quoi cela se raccroche.
Ligne de total inversée
Dans un tableau de seize colonnes de chiffres, la ligne de synthèse est retournée en noir sur blanc pendant que les autres restent en gris sur noir. Un seul contraste suffit à désigner la ligne qui compte, sans gras ni encadré ni couleur supplémentaire.
Nous construisons votre socle de marque et déclinons toute la bibliothèque à vos couleurs, vos polices et vos mesures. Vous en devenez propriétaire, sans licence ni abonnement imposé.