Callouts are Foundation’s bordered message panels—cousins to Bootstrap alerts. Base class callout plus primary, secondary, success, warning, or alert for semantic color.
Usage patterns
- Page-level announcements and policy notes
- Nested tips inside article body copy
closablecallouts with close button (requires Foundation JS)
Include visible text for status—not color alone. Pair with lead or headings when the callout is the hero message on a landing section.
Self-check
- Which class combination creates a warning callout?
- When is a callout more appropriate than a
label?