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).
Eine Nährwerttabelle wie auf der Verpackung: Ändere die Portionen und die Zahlen rollen zum neuen Wert.
<article class="uvq07-nut"><h3>Nährwertangaben</h3><p class="pd">Hafer-Kakao-Granola</p><div class="sv"><span>Portionen à 40 g</span><div class="stp"><button type="button" class="mn" aria-label="Eine Portion weniger" disabled>−</button><output aria-live="polite">1</output><button type="button" class="pl" aria-label="Eine Portion mehr">+</button></div></div><table><thead><tr><th scope="col"><span class="sr">Nährstoff</span></th><th scope="col">Menge</th><th scope="col">%RM*</th></tr></thead><tbody><tr><th scope="row">Brennwert</th><td><b data-v="176" data-d="0">176</b> kcal</td><td data-ir="9">9 %</td></tr><tr><th scope="row">Fett</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">davon gesättigte Fettsäuren</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">Kohlenhydrate</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">davon Zucker</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">Ballaststoffe</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">Eiweiß</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">Salz</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">*Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kJ / 2000 kcal).</p><span class="bd" aria-hidden="true">Ballaststoffreich</span></article>Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Lebensmitteletiketten sind ein starkes typografisches System: schmale, fette Titel, breite Linien und tabellarische Ziffern. Diese Karte folgt ihm mit einer semantischen Tabelle, einem Portionsregler mit deaktivierten Grenzen und Zahlen, die weich hoch- oder herunterzählen, dazu ein runder Sticker für eine Aussage. Passt zu Rezeptseiten, Lebensmittelmarken, Essensplanern und Produktseiten.
Die Hauptfarbe ist die Tinte von Linien und Text, die zweite der Sticker. Trage die Nährstoffe mit Wert pro Portion und Referenzmenge ein und passe die Portionsgröße im Etikett an.