Component showcase
Every component and layout variant of theme-astro, rendered by the real theme on sample data.
- 128 components in the inventory
- 134 cards (a family such as cards|rows counts per layout)
- 130 rendered live in 61 sample builds
- 117 in use
- 15 unused
- 2 lead-only
How to read a card
- Two previews of the same sample site: desktop (1280px, scaled to fit) and mobile (390px). On a narrow screen use the Mobile/Desktop toggle.
- Badges: in use (a demo site uses it, or for section layouts it sits in the seeded pool), unused (no demo site uses it yet), lead-only (exists only on branch lead-webexpress). Category pages filter by badge.
- How to pin is the
theme.jsonsnippet that forces the layout in a real site. Other fields: source files, the content it reads, the sites that use it, and the quality-gate codes that police it. - Previews load when scrolled near and unload when far; hero previews start on click because most run WebGL.
- Serve this folder over HTTP (iframes need same-origin to scroll to the target);
file://shows each demo from its top.
Categories
| Category | Cards | Live | Covers |
|---|---|---|---|
| Heroes | 27 | 26 | Landing hero effects (theme.json effect). Click to load: each one starts WebGL or heavy motion. |
| Page heroes | 7 | 7 | Openers of internal pages (theme.json pageHero), shown on a product page with a spec table and a 4-page group. |
| Navigation | 6 | 6 | Header layouts and the desktop mega-menu. |
| Footers | 11 | 11 | Eleven closing footers. |
| Contact blocks | 7 | 6 | Six contact layouts and the parts they share. |
| About | 6 | 6 | About and text-section layouts. |
| Services | 9 | 9 | Offer, menu and catalogue layouts. |
| Galleries | 9 | 9 | Photo galleries, the logo wall and the whole-image banner. |
| Stats | 2 | 2 | Number rows. |
| Testimonials | 4 | 4 | Review layouts. |
| FAQ | 2 | 2 | Question and answer layouts. |
| Team and media | 7 | 7 | Team, video, list, CV, location, highlight and downloads sections. |
| Page teasers | 3 | 3 | Landing blocks that link to internal pages. |
| Health blocks | 6 | 5 | Blocks woven into health-vertical landings. |
| UI primitives | 28 | 27 | Shared building blocks, each shown inside a section that renders it, plus the marquee band, heading styles and the floating WhatsApp button. |
Not rendered
- hero-support:hero copy components: support components that render inside the maker heroes (see the 3D heroes above)
- contact-parts:shared parts: shared parts that render inside every contact layout (see the contact blocks)
- health:health slot dispatcher: dispatcher with no visual of its own; it places the other health blocks
- layout:Base: page shell of every demo, not a component with its own look