Nutrition Facts Label
The FDA is changing the nutrition facts labels. The new design emphasizes calories and adds additional sugar information. Former First Lady Michelle Obama had been instrumental in the push for the new labels. The changes were set to appear by July 26, 2018, but the Trump administration has delayed the rollout to give companies more time to comply. Read more about the new label requirements at fda.gov.
We've created several versions of the nutrition facts label. The code below uses HTML5 and SASS. It's flexible and can easily be modified to create additional variations. Take a look at:
- Standard Vertical
- Simplified Display
- Tabular Format
- Bilingual Label
Use these components in your food and nutrition-related projects.
The Obama administration's new food labels will make it easier to know about calories and added sugars, a reflection of the shifting science behind nutrition.
Our Approach
Instead of using tables to create the nutrition facts label, we used flexbox for columns and alignment. We tried to use as little CSS as possible, creating reusable classes instead of targeting specific elements with their own class.
We weren't concerned about making the standard vertical component responsive because we don't see it getting small enough to require mobile specific code. The example width is set at 260 pixels but is very flexible and can be made wider or slightly narrower. The tabular format is responsive and at the mobile size, turns into the standard vertical. The bilingual label becomes narrower on the phone.
Standard Vertical
Simplified Display
Tabular Format
Bilingual Label
Example Blog Usage
The nutrition facts label is easily recognized as a source of information for the consumer. Using it in your blog, or other food-related projects will add a highly recognizable and useful component.
Kahoots Creative Group is recognized as a top design agency in Chicago.
On May 20, 2016, the FDA announced the new Nutrition Facts label for packaged foods to reflect new scientific information, including the link between diet and chronic diseases such as obesity and heart disease. The new label will make it easier for consumers to make better informed food choices. — fda.gov