Granola de avena y cacao
| Nutriente | Cantidad | %IR* |
|---|---|---|
| Valor energético | 176 kcal | 9 % |
| Grasas | 6,4 g | 9 % |
| de las cuales saturadas | 1,2 g | 6 % |
| Hidratos de carbono | 24,0 g | 9 % |
| de los cuales azúcares | 5,6 g | 6 % |
| Fibra alimentaria | 4,4 g | |
| Proteínas | 5,2 g | 10 % |
| Sal | 0,08 g | 1 % |
*Ingesta de referencia de un adulto medio (8400 kJ / 2000 kcal).
Un tableau nutritionnel d'emballage avec sa typographie d'étiquette : change le nombre de portions et les chiffres défilent jusqu'à la nouvelle valeur.
<article class="uvq07-nut"><h3>Valeurs nutritionnelles</h3><p class="pd">Granola avoine et cacao</p><div class="sv"><span>Portions de 40 g</span><div class="stp"><button type="button" class="mn" aria-label="Retirer une portion" disabled>−</button><output aria-live="polite">1</output><button type="button" class="pl" aria-label="Ajouter une portion">+</button></div></div><table><thead><tr><th scope="col"><span class="sr">Nutriment</span></th><th scope="col">Quantité</th><th scope="col">%AR*</th></tr></thead><tbody><tr><th scope="row">Valeur énergétique</th><td><b data-v="176" data-d="0">176</b> kcal</td><td data-ir="9">9 %</td></tr><tr><th scope="row">Matières grasses</th><td><b data-v="6.4" data-d="1">6,4</b> g</td><td data-ir="9">9 %</td></tr><tr class="sb"><th scope="row">dont acides gras saturés</th><td><b data-v="1.2" data-d="1">1,2</b> g</td><td data-ir="6">6 %</td></tr><tr><th scope="row">Glucides</th><td><b data-v="24" data-d="1">24,0</b> g</td><td data-ir="9">9 %</td></tr><tr class="sb"><th scope="row">dont sucres</th><td><b data-v="5.6" data-d="1">5,6</b> g</td><td data-ir="6">6 %</td></tr><tr><th scope="row">Fibres alimentaires</th><td><b data-v="4.4" data-d="1">4,4</b> g</td><td data-ir="0"></td></tr><tr><th scope="row">Protéines</th><td><b data-v="5.2" data-d="1">5,2</b> g</td><td data-ir="10">10 %</td></tr><tr><th scope="row">Sel</th><td><b data-v="0.08" data-d="2">0,08</b> g</td><td data-ir="1">1 %</td></tr></tbody></table><p class="ft">*Apport de référence pour un adulte type (8400 kJ / 2000 kcal).</p><span class="bd" aria-hidden="true">Riche en fibres</span></article>Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Les étiquettes alimentaires forment un système typographique fort : titres condensés et gras, filets épais et chiffres tabulaires. Cette carte le suit avec un tableau sémantique, un sélecteur de portions aux limites désactivées et des chiffres qui montent ou descendent avec une animation douce, plus une pastille ronde pour une allégation. Pour sites de recettes, marques alimentaires, planificateurs de repas et fiches produit.
La couleur principale est l'encre des filets et du texte, la seconde la pastille. Modifie les nutriments avec leur valeur par portion et leur apport de référence, et change la taille de portion sur l'étiquette.