Static preview placeholder
Preview: building a lesson page
Use an iframe with a title or a labelled placeholder when video is not loaded.
Media components
Documented media, course, article, gallery, breadcrumb, and pagination classes use existing --hds-* tokens and no external CSS dependencies.
Media components
Build course and media pages with plain HTML.
Use token-backed videos, cards, lesson lists, article grids, galleries, breadcrumbs, and pagination without external CSS or JavaScript dependencies.
Responsive thumbnails
Cards keep readable spacing and preserve aspect ratio across grid sizes.
Article and video cards
Use metadata rows for duration, format, or publication details.
Media launch checklist
64% complete
- 1. Structure semantic media cards12 min
- 2. Add labelled video frames18 min
- 3. Publish gallery and pagination9 min
Download-free assets
Every pattern imports only /v1/css/starthds.css and /v1/js/starthds.js.
Label video controls clearly
Buttons and iframe embeds should have names that describe the media action.
Use intrinsic grids
Media, course, article, and gallery grids use minmax() to wrap without breakpoints.
