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.
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.
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