FDA-style nutrition panel with a thick rule under calories and indented sub-nutrient rows.
New here? Read the installation guide.
import { Health12 } from "@/components/beste/piece/health12";
<Health12
serving="Serving size 1 cup (240 g)"
servings="About 2 servings"
calories="280"
rows={[
{
"label": "Total fat",
"value": "10 g",
"dv": "13%",
"bold": true
},
{
"label": "Saturated fat",
"value": "2 g",
"dv": "10%",
"indent": true
},
{
"label": "Sodium",
"value": "420 mg",
"dv": "18%",
"bold": true
},
{
"label": "Total carbs",
"value": "34 g",
"dv": "12%",
"bold": true
},
{
"label": "Sugars",
"value": "6 g",
"indent": true
},
{
"label": "Protein",
"value": "16 g",
"bold": true
}
]}
/>Rose-tinted allergy panel with reaction descriptions and severity pills ranging from mild to severe.
Recipe summary row with a warm chef tile, cook time, kcal, difficulty pill, and a dietary-tag row.
Throbbing. Worsens after screen time. No aura. Taken paracetamol 500 mg.
Symptom entry with a severity pill, onset timestamp, and free-form notes on a muted panel.
Upcoming medical visit with provider, specialty, a muted location block, and an italic reason line.