skip to content

Nutrition Facts label

in production

Tags:

The Nutrition Facts label found on packaged foods and beverages is your daily tool for making informed food choices that contribute to healthy lifelong eating habits.

Examples

Without table

Nutrition Facts
4 servings per container
Serving size 1 ½ cup (208g)
Amount Per Serving
240 Calories
% Daily Value 1
Total Fat 4g
5%
Saturated Fat 1.5g
8%
Trans Fat 0g
Cholesterol 5mg
2%
Sodium 430mg
19%
Total Carbohydrate 46g
17%
Dietary Fiber 7g
25%
Total Sugars 4g
Includes 2g Added Sugars
4%
Protein 11g
Vitamin D 2mcg
10%
Calcium 260mg
20%
Iron 6mg
35%
Potassium 240mg
6%
  1. 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. Back to reference

HTML code

<aside id="abbr-container">
  <h4 id="abbr-heading">Abbreviations list</h4>
  <ul class="abbr-list" aria-labelledby="abbr-heading">
    <li>g = <span id="abbr-g">grams</span></li>
    <li>mg = <span id="abbr-mg">milligrams</span></li>
    <li>mcg = <span id="abbr-mcg">micrograms</span></li>
  </ul>
</aside>
<div id="facts" class="nfl-front">
  <div class="facts_title">Nutrition Facts</div>
  <div class="facts_serving_pre">4 servings per container</div>
  <div class="facts_serving_size">Serving size 1 &frac12; cup (208g)</div>
  <div class="facts_box">
    <div class="fact_row_norule"><small>Amount Per Serving</small></div>
    <div class="fact_row calories"><span class="data calorieamt">240</span> <strong>Calories</strong></div>
  </div>
  <!--.facts_box-->
  <div class="facts_box thin">
    <div class="fact_row txt_right">
      <a href="#footnote-1" id="ref-footnote-1">
        <small id="daily-value">% Daily Value</small>
        <sup><span class="visually-hidden">. Go to footnote </span>1</sup>
      </a>
    </div>
    <div class="fact_row"><strong>Total Fat</strong> 4g <div class="daily-value bold">5%</div></div>
    <div class="fact_row sub">Saturated Fat 1.5g <div class="daily-value bold">8%</div></div>
    <div class="fact_row sub"><em>Trans</em> Fat 0g</div>
    <div class="fact_row"><strong>Cholesterol</strong> 5mg <div class="daily-value bold">2%</div></div>
    <div class="fact_row"><strong>Sodium</strong> 430mg <div class="daily-value bold">19%</div></div>
    <div class="fact_row"><strong>Total Carbohydrate</strong> 46g <div class="daily-value bold">17%</div></div>
    <div class="fact_row sub">Dietary Fiber 7g <div class="daily-value bold">25%</div></div>
    <div class="fact_row sublv2">Total Sugars 4g</div>
    <div class="fact_row sublv3">Includes 2g Added Sugars <div class="daily-value bold">4%</div></div>
    <div class="fact_row"><strong>Protein</strong> 11g</div>
  </div>
  <!--.facts_box-->
  <div class="facts_box">
    <div class="fact_row">Vitamin D 2mcg <div class="daily-value">10%</div></div>
    <div class="fact_row">Calcium 260mg <div class="daily-value">20%</div></div>
    <div class="fact_row">Iron 6mg <div class="daily-value">35%</div></div>
    <div class="fact_row">Potassium 240mg <div class="daily-value">6%</div></div>
  </div>
  <!--.facts_box-->
  <div class="facts_descr">
    <h4 id="footnotes-title"
        class="visually-hidden">Footnotes</h4>
    <ol aria-labelledby="footnotes-title">
      <li id="footnote-1">
        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.
        <a href="#ref-footnote-1">
          Back to reference<span class="visually-hidden"> 1</span>
        </a>
      </li>
    </ol>
  </div>
</div>

CSS code

/* Nutrition Label */
#facts {
  margin-top: 20px;
  margin-right: 1rem;
  z-index: 10;
  background: #fff;
  border: 1px solid #000;
  padding: 20px 0px;
  font-size: 1rem;
  line-height: 1rem;
  box-shadow: 4px 10px 10px rgba(0, 0, 0, .2);
  width: 300px;
  font-family: 'Atkinson Hyperlegible', 'NeueBlk';
}

.on-label-blue #facts {
  border: 2px solid #000;
}

#facts .facts_title {
  font-family: 'Atkinson Hyperlegible', 'NeueBlk';
  font-size: 1.825rem;
  font-weight: bolder;
  color: #231f20;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
}

#facts .facts_serving_pre {
  font-size: .75rem;
  padding: 10px;
}

#facts .facts_serving_size {
  padding: 5px 10px;
  font-size: .975rem;
  font-weight: bold;
}

#facts .calories {
  padding-top: 4px;
  padding-bottom: 12px;
  font-size: 1.25em !important;
  line-height: 1em !important;
  position: relative;
  font-weight: bold;
}

#facts .calorieamt {
  background-color: transparent;
  font-size: 1.8em !important;
  font-weight: bolder;
}

#facts .txt_right {
  text-align: right;
}

#facts .facts_box {
  border-top: 13px solid #231f20;
  margin-left: 10px;
  margin-right: 10px;
}

#facts .facts_box.thin {
  border-width: 5px;
}

#facts .fact_row {
  padding-bottom: 2px;
  padding-top: 5px;
  font-size: 14px;
  line-height: 14px;
  border-bottom: 1px solid #838181;
  position: relative;
}

#facts .fact_row_norule {
  padding-bottom: 2px;
  padding-top: 5px;
  font-size: 14px;
  line-height: 14px;
  position: relative;
}

#facts .fact_row.pinkbg {
  background: #feeab8;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

#facts .fact_row.bluebg {
  background: #ebf3c0;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

#facts .fact_row.pinkbg.sub {
  padding-left: 28px;
}

#facts .fact_row.bluebg.sub {
  padding-left: 28px;
}

#facts .fact_row.sub {
  padding-left: 18px;
}

#facts .fact_row.sublv2 {
  margin-left: 18px;
}

#facts .fact_row.sublv3 {
  padding-left: 36px;
}

#b_box #b_content #facts .plus_in_label,
#b_box #b_content #facts .minus_in_label {
  width: 40px;
  position: absolute;
  top: 23px;
  left: -33px;
  z-index: 2;
  display: none;
}

#b_box #b_content #facts .fact_row.pinkbg.withicon:before {
  content: "\0020";
  background: #fab2dc;
  width: 35px;
  height: 100%;
  border-top: 1px solid #fab2dc;
  position: absolute;
  top: 0;
  left: -39px;
  z-index: 1;
  display: none;
}

#b_box #b_content #facts .fact_row.bluebg.withicon:before {
  content: "\0020";
  background: #b2e7fa;
  width: 35px;
  height: 100%;
  border-top: 1px solid #b2e7fa;
  position: absolute;
  top: 0;
  left: -39px;
  z-index: 1;
  display: none;
}

#b_box #b_content #facts .fact_row.pinkbg.withicon.withicon_min:before,
#b_box #b_content #facts .fact_row.bluebg.withicon.withicon_min:before {
  width: 19px;
  left: -23px;
  display: none;
}

#b_box #b_content #facts .plus_in_label_min,
#b_box #b_content #facts .minus_in_label_min {
  width: 20px;
  position: absolute;
  top: 2px;
  left: -16px;
  z-index: 2;
  display: none;
}

#facts .fact_row small {
  font-size: 12px;
  line-height: 12px;
  color: #000;
}

#facts .fact_row div,
#facts .data {
  float: right;
}

#facts strong {
  color: #000;
}

#facts .facts_descr {
  padding-left: 20px;
  padding-right: 10px;
  font-size: 11px;
  line-height: 12px;
  margin: 8px 0 8px;
  position: relative;
  color: #000;
}

#facts .facts_descr ol {
  margin-left: 0;
  padding-inline-start: 0;
}

#facts .facts_table {
  margin-left: 10px;
  margin-right: 10px;
  color: #000;
}

#facts table {
  width: 100%;
}

#facts table th,
#facts table td {
  font-size: 11px;
  line-height: 11px;
}

#facts table th {
  text-align: left;
  padding-bottom: 1px;
}

#facts table td {
  padding: 3px 0 0px;
  vertical-align: bottom;
}

#facts table tbody {
  border-top: 1px solid #4c4849;
}

#facts a {
  border-bottom: 0;
  color: #000;
  text-decoration: none;
  transition: all .5s;
  position: relative;
  z-index: 10;
}

#facts a.light {
  background: #FF0;
  text-decoration: underline;
  box-shadow: 0 0 0px 2px #FF0;
}

#facts a:hover {
  text-decoration: underline;
}

#facts .daily-value.bold {
  font-weight: bold;
}

/* End of Facts */

References

W3C SVG