Skip to content
Learn Netverks

Lesson

Step 13/36 36% through track

colors-labels

Colors and labels

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
beginner

This lesson

This lesson teaches Colors and labels—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Colors and labels in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs. Also complete the hands-on challenge before advancing.

When the previous lesson's MCQs feel easy and you can explain Colors and labels in your own words.

Foundation maps a palette to components and helpers: primary, secondary, success, warning, alert. Apply them to buttons, callouts, and label badges for status chips.

Using palette classes

  • button primary / button hollow secondary
  • callout success — bordered message bands
  • label alert — compact counts and states
  • has-tip — tooltips (needs Foundation JS)

Do not rely on color alone for meaning—add text labels and review CSS color and contrast. Customize palette variables in Sass when brand colors diverge from Zurb defaults.

Important interview questions and answers

  1. Q: primary vs secondary in Foundation?
    A: Semantic roles in the design system—primary for main CTAs, secondary for alternate actions; exact hex values come from Sass settings.
  2. Q: label vs badge?
    A: Foundation uses label for small inline status chips; similar role to Bootstrap badges.

Self-check

  1. Which classes style a hollow warning button?
  2. When is a label better than a full callout?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • Label colors vs buttons?
  • Contrast checked?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36