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).
Una tabla nutricional de envase con tipografía de etiqueta: cambia las raciones y las cifras ruedan hasta el nuevo valor.
<article class="uvq07-nut"><h3>Información nutricional</h3><p class="pd">Granola de avena y cacao</p><div class="sv"><span>Raciones de 40 g</span><div class="stp"><button type="button" class="mn" aria-label="Quitar una ración" disabled>−</button><output aria-live="polite">1</output><button type="button" class="pl" aria-label="Añadir una ración">+</button></div></div><table><thead><tr><th scope="col"><span class="sr">Nutriente</span></th><th scope="col">Cantidad</th><th scope="col">%IR*</th></tr></thead><tbody><tr><th scope="row">Valor energético</th><td><b data-v="176" data-d="0">176</b> kcal</td><td data-ir="9">9 %</td></tr><tr><th scope="row">Grasas</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">de las cuales saturadas</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">Hidratos de carbono</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">de los cuales azúcares</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">Fibra alimentaria</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">Proteínas</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">Sal</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">*Ingesta de referencia de un adulto medio (8400 kJ / 2000 kcal).</p><span class="bd" aria-hidden="true">Rico en fibra</span></article>Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Las etiquetas de alimentos son un sistema tipográfico potente: títulos condensados y gruesos, filetes anchos y números tabulares. Esta tarjeta lo sigue con una tabla semántica, un selector de raciones con límites desactivados y cifras que suben o bajan con una animación suave, además de una pegatina redonda para el reclamo. Sirve para webs de recetas, marcas de alimentación, planificadores de comidas y fichas de producto.
El color principal es la tinta de filetes y texto; el secundario, la pegatina. Edita los nutrientes con su valor por ración y su ingesta de referencia, y cambia el tamaño de la ración en la etiqueta.