Demo Pages
Demo pages are fully assembled pages that use the design system exactly as a production site would. Unlike the documentation pages, demos load the design system styles and scripts directly — without Starlight’s documentation shell — so you can see the real output.
Use these demos to:
- See how components work together in a complete layout.
- Inspect the HTML source for real-world markup patterns.
- Copy and adapt the page structure for new projects.
Available Demos
Section titled “Available Demos”| Demo | Description |
|---|---|
| Homepage | A program landing page with a university header, site header with action buttons, hero section, carousel, video embed, request-info form, and footer. |
How to Use a Demo
Section titled “How to Use a Demo”- Open a demo link above.
- Use your browser’s developer tools to inspect the HTML and see which classes are applied.
- Refer back to the component and utility documentation for details on each class.
- Copy sections of markup into your own project as a starting point.