---
name: html-component
description: Builds one self-contained, accessible UI component in a single HTML file, ready to paste into any site. Use for hero banners, pricing cards, feature grids, testimonials, navbars and other sections.
---
# HTML component

## Read first
Spec.md for what the component is, its content, its states and its look; the reference and illustration wired in.

## Build
- One HTML file: semantic markup, a <style> block and, only if needed, a small <script>. No frameworks or external files except web fonts.
- Everything scoped under one root class, so it can be pasted anywhere without clashing.
- Colours, radii and spacing as CSS custom properties on the root, so it's easy to restyle.
- Responsive from 320 px to full width, with the layout changing at one breakpoint at most.
- Hover, focus-visible and active states for everything clickable; a respectful prefers-reduced-motion.
- The wired illustration shown whole, with rounded corners where it sits on a card.

## Look
- One type scale (e.g. 48 / 20 / 15) and one accent colour from the spec, for the primary action only.
- Spacing on a 4 or 8 px grid, generous inside the component; a radius and border that match the reference.
- The illustration large and given room, beside or above the words, never squeezed into a corner.

## Copy
Real words from the spec, short and specific. One primary action.

## Avoid
Lorem ipsum, fixed widths that break on phones, inline styles everywhere, and animation that never stops.