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).
A packaging nutrition table with label typography: change the number of servings and the figures roll to the new values.
<article class="uvq07-nut"><h3>Nutrition facts</h3><p class="pd">Oat and cocoa granola</p><div class="sv"><span>40 g servings</span><div class="stp"><button type="button" class="mn" aria-label="Remove a serving" disabled>−</button><output aria-live="polite">1</output><button type="button" class="pl" aria-label="Add a serving">+</button></div></div><table><thead><tr><th scope="col"><span class="sr">Nutrient</span></th><th scope="col">Amount</th><th scope="col">%RI*</th></tr></thead><tbody><tr><th scope="row">Energy</th><td><b data-v="176" data-d="0">176</b> kcal</td><td data-ir="9">9 %</td></tr><tr><th scope="row">Fat</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">of which saturates</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">Carbohydrate</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">of which sugars</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">Fibre</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">Protein</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">Salt</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">*Reference intake of an average adult (8400 kJ / 2000 kcal).</p><span class="bd" aria-hidden="true">High in fibre</span></article>Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
Food labels are a strong typographic system: condensed heavy titles, thick rules and tabular numbers. This card follows it with a semantic table, a serving stepper with disabled limits and figures that count up or down with an eased animation, plus a round sticker for a claim. It works for recipe sites, food brands, meal planners and product pages.
The main color is the ink of rules and text, the second the sticker. Edit the nutrients with their value per serving and reference intake, and change the serving size in the label.