webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Nutrition Facts Label — Free HTML CSS Snippet

Nutrition Label · Cards · Plain HTML & CSS · Live preview

CategoryCards
TagsCSS Only

Copy & paste

Source Code

<div class="wrap">
  <div class="label">
    <div class="lbl-title">Nutrition Facts</div>
    <div class="servings">
      <div class="serv-row"><span>8 servings per container</span></div>
      <div class="serv-row bold"><span>Serving size</span><span>2/3 cup (55g)</span></div>
    </div>
    <div class="thick-rule"></div>
    <div class="amount-row"><span class="tiny-bold">Amount per serving</span></div>
    <div class="calories-row">
      <span class="cal-label">Calories</span>
      <span class="cal-val">230</span>
    </div>
    <div class="med-rule"></div>
    <div class="dv-head"><span>% Daily Value*</span></div>
    <div class="nutri-row"><span><b>Total Fat</b> 8g</span><span class="dv">10%</span></div>
    <div class="nutri-row indent"><span>Saturated Fat 1g</span><span class="dv">5%</span></div>
    <div class="nutri-row indent"><span><i>Trans</i> Fat 0g</span><span class="dv"></span></div>
    <div class="nutri-row"><span><b>Cholesterol</b> 0mg</span><span class="dv">0%</span></div>
    <div class="nutri-row"><span><b>Sodium</b> 160mg</span><span class="dv">7%</span></div>
    <div class="nutri-row"><span><b>Total Carbohydrate</b> 37g</span><span class="dv">13%</span></div>
    <div class="nutri-row indent"><span>Dietary Fiber 4g</span><span class="dv">14%</span></div>
    <div class="nutri-row indent"><span>Total Sugars 12g</span><span class="dv"></span></div>
    <div class="nutri-row indent2"><span>Includes 10g Added Sugars</span><span class="dv">20%</span></div>
    <div class="nutri-row"><span><b>Protein</b> 3g</span><span class="dv"></span></div>
    <div class="thick-rule"></div>
    <div class="vita-row"><span>Vitamin D 2mcg</span><span class="dv">10%</span></div>
    <div class="vita-row"><span>Calcium 260mg</span><span class="dv">20%</span></div>
    <div class="vita-row"><span>Iron 8mg</span><span class="dv">45%</span></div>
    <div class="vita-row last"><span>Potassium 235mg</span><span class="dv">6%</span></div>
    <div class="thin-rule"></div>
    <div class="footnote">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Pixel-accurate FDA 2016-revised Nutrition Facts layout
Signature rule hierarchy: 11px, 5px, 4px, and 1px black bars
Oversized Calories figure matching the modern label emphasis
Nutrient indentation for sub-nutrients (Saturated Fat, Added Sugars)
Right-aligned % Daily Value column via flex space-between
Bold main nutrients, regular indented sub-nutrients
All real text — selectable, translatable, and screen-reader friendly
Zero JavaScript and no images — entirely HTML and CSS

About this UI Snippet

Nutrition Facts Label — FDA-Style Layout in Pure HTML & CSS

Screenshot of the Nutrition Label snippet rendered live

The FDA Nutrition Facts label is one of the most recognisable information designs in the world, with a strict, federally-specified layout. Like the boarding pass, this snippet recreates a real-world document — the modern (2016-revised) Nutrition Facts panel — in pure HTML and CSS — the oversized Calories figure, the characteristic thick black rules, nutrient indentation, right-aligned % Daily Values, and the footnote — accurate enough for food packaging mockups, recipe sites, and e-commerce grocery listings beside a product card.

The signature rule hierarchy

The label's visual structure comes from horizontal rules of different weights, which the snippet reproduces with dedicated divs: an 11px thick black bar separates the major sections, a 5px medium rule sits above Calories, a 4px border under the Calories row, and 1px hairlines divide individual nutrients. This deliberate weight hierarchy is what makes the label instantly recognisable and is mandated by FDA design specifications.

The typographic emphasis

The FDA label uses font weight and size to encode importance. "Nutrition Facts" is set in heavy condensed type with tight negative letter-spacing. The Calories number is enormous (the single most prominent value, reflecting its dietary importance after the 2016 redesign). Main nutrients are bold; sub-nutrients are regular weight and indented. The snippet matches these conventions with font-weight and font-size rather than colour, exactly as the printed label does.

Nutrient indentation

Sub-nutrients nest under their parents through left padding: Saturated and Trans Fat indent under Total Fat, Fiber and Sugars under Total Carbohydrate, and Added Sugars indent further still. This indentation communicates the nutritional hierarchy — that saturated fat is a component of total fat — purely through horizontal offset.

The % Daily Value column

The right-aligned % Daily Value column lets consumers gauge how a serving fits into a 2,000-calorie reference diet. Values are bold and consistently aligned to the right edge using flex justify-content: space-between on each row. Rows without a DV (like Trans Fat and Protein) simply leave the cell empty, matching the real label.

Why pure CSS matters here

Because the label is entirely HTML and CSS with no images, every value is real text — selectable, translatable, screen-reader accessible, and editable from data. A label rendered as an image fails all of these. This makes the snippet suitable for dynamically generated labels where the numbers come from a product database or a recipe nutrition calculation.

Step by step

How to Use

  1. 1
    Update the serving infoEdit the servings per container and serving size at the top. These are the reference basis for every value below.
  2. 2
    Set the caloriesChange the large Calories number to match your product or recipe per serving.
  3. 3
    Fill in the nutrientsUpdate each nutrient row with its amount (grams or milligrams) and its % Daily Value. Keep main nutrients bold and sub-nutrients in the indented rows.
  4. 4
    Update vitamins and mineralsEdit the Vitamin D, Calcium, Iron, and Potassium rows — the four required micronutrients on the modern label — with amounts and daily values.
  5. 5
    Generate from dataFor dynamic labels, bind each value to a product or recipe nutrition object. Compute % Daily Values by dividing each nutrient amount by its FDA reference daily intake and rounding.
  6. 6
    Export for your frameworkClick "JSX" for a React component that accepts a nutrition prop object. Click "Vue" for a Vue 3 SFC. Click "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Recipe site and meal-planning app nutrition panel
Generate a Nutrition Facts label from a recipe's computed nutrition. Sum the nutrients of each ingredient, divide by the number of servings, and bind the per-serving values to the label. Because it is real text, the numbers update live as users adjust serving counts or swap ingredients.
Grocery and food e-commerce product page
Display the official nutrition panel on product detail pages from your product database. Shoppers expect the familiar FDA format, and rendering it as accessible HTML (not an image) means it works with screen readers, translates automatically, and stays crisp at any zoom level.
Food manufacturer packaging mockup tool
Use as the label component in a packaging design tool. Manufacturers and designers can fill in values and preview a compliant Nutrition Facts panel before sending artwork to print. Export the rendered label as an image or PDF for the design proof.
Auto-calculate % Daily Values from amounts
Drive the DV column from data: store the FDA reference daily intakes (e.g., 78g fat, 2,300mg sodium, 275g carbs) and compute each percentage as round(amount / referenceDV * 100). This keeps the label internally consistent and prevents the common error of mismatched amounts and percentages.
Study faithful recreation of a print design in CSS
Reproducing a strict, legally-specified print layout in CSS teaches precise control of rules, weights, spacing, and alignment. The label's rule hierarchy and indentation system are a strong exercise in matching a real-world specification exactly with semantic markup.
Supplement and beverage label variants
Adapt the format to the Supplement Facts panel (used for vitamins and supplements) or a simplified label for beverages. The same rule hierarchy and DV column apply; you adjust which nutrients appear and their reference values to match the relevant FDA label type.

Got questions?

Frequently Asked Questions

It faithfully reproduces the visual layout of the modern (2016-revised) FDA Nutrition Facts label — the rule weights, the oversized Calories, indentation, and the % Daily Value column. For actual regulatory compliance on packaging, the FDA specifies exact typefaces (Helvetica/Arial), minimum point sizes, and precise measurements that you should verify against the current Code of Federal Regulations. Use this as an accurate, accessible visual template; confirm exact print specifications before producing real food packaging.

Each percentage is the nutrient amount divided by its FDA reference Daily Value, times 100, rounded to a whole number. The reference DVs for a 2,000-calorie diet include: Total Fat 78g, Saturated Fat 20g, Cholesterol 300mg, Sodium 2,300mg, Total Carbohydrate 275g, Dietary Fiber 28g, Added Sugars 50g, Calcium 1,300mg, Iron 18mg, Potassium 4,700mg, and Vitamin D 20mcg. For example, 8g of fat is 8/78 ≈ 10%. Store these reference values and compute the column from your amounts to keep everything consistent.

A text-based label is selectable, translatable by the browser, readable by screen readers, crisp at any zoom or print resolution, and — most importantly — generatable from data. An image of a label is none of these: it cannot adapt to different products, fails accessibility checks, and blurs when scaled. Building it in HTML and CSS means a single component renders a correct, accessible label for any product whose nutrition data you have.

Accept a nutrition prop object with serving info, calories, an array of nutrients (each with name, amount, unit, dailyValue, and indent level), and the vitamins. Render the fixed structural rules as static elements and map over the nutrient array to emit the rows, applying an indent class based on each nutrient's level. Compute the % Daily Values inside the component from the amounts and a reference-DV lookup so the label stays consistent with the source data.