Support component
Meta tags
Compact duration, category or format labels.
Live preview
Light background shown; verify against a tinted or dark surface where the component is used that way in course.
Use when / avoid when
Use when
- Metadata needs to be scannable at a glance beside a title.
Avoid when
- The value is essential instruction — metadata is a label, not the content itself.
Anatomy
- Container (.isq-meta)
- Item (.isq-meta__item)
Variants
States
Responsive behaviour
Wraps to a new line rather than truncating.
Accessibility
- Plain text — no icon-only meta items without a text label.
Implementation
Type: css-foundation
Dependencies: Production CSS only.
Code
HTML
Classes used: .isq-meta, .isq-meta__item, .isq-meta--dark
Governance metadata
| Owner | Design and development steward |
|---|---|
| Status | Approved |
| Version introduced | 1.0.0 |
| Last reviewed | 2026-07 |
| Known limitations | None recorded. |