Primary and secondary actions
A wrapping pair of actions with a clear visual order and equal touch targets.
View exampleHTML & CSS resources
Useful patterns, open to inspection.
Browse sixteen practical examples, read the exact HTML and CSS, then open either file pair in Agate and make it your own.
Featured examples
6 useful places to begin
Each example has a working preview, readable source, and a direct path into the IDE.
- Article preview card A semantic article teaser with restrained metadata and one obvious reading path.
- Accessible FAQ disclosure A compact FAQ that opens and closes with native browser controls and no JavaScript.
- Primary action button A strong link-style action with clear hover and keyboard-focus states.
- Responsive feature grid A card grid that finds useful column widths automatically and stays readable on small screens.
- Responsive hero section A focused page opening with fluid type, readable copy, and actions that adapt to small screens.
- Wrapping site header A small site header whose identity and navigation wrap cleanly without a menu script.
Browse the library
16 patterns, written to be opened
Start with a category, read the source in place, or open any example in Agate to change it.
No examples match those filters. Clear the search or choose another category.
02 examples
Buttons
Actions, groups, states, and visible keyboard focus.
Primary action button
A strong link-style action with clear hover and keyboard-focus states.
View example02 examples
Cards
Readable containers for articles, profiles, and small ideas.
Article preview card
A semantic article teaser with restrained metadata and one obvious reading path.
View examplePricing card group
Three comparable plans with semantic lists, a clearly named recommendation, and responsive columns.
View example02 examples
Forms
Labels, fields, instructions, and clear submission patterns.
Labeled contact form
A compact form with persistent labels, useful instructions, and visible field focus.
View exampleNewsletter signup form
A focused email signup with a persistent label, useful expectations, and a flexible action row.
View example01 example
Layouts
Page structure, alignment, spacing, and useful responsive shifts.
Split feature section
A two-part feature layout that becomes a natural reading sequence on narrow screens.
View example02 examples
Typography
Headings, measures, labels, and comfortable reading rhythm.
Accessible data table
A clearly labeled comparison table with proper headers, aligned values, and safe narrow-screen scrolling.
View exampleReadable article opening
A measured article introduction with a clear label, title, summary, and byline.
View example02 examples
Effects
Flat borders, offsets, emphasis, and purposeful visual details.
Offset border callout
A flat emphasis panel made from solid borders and one decorative color block.
View exampleAccessible FAQ disclosure
A compact FAQ that opens and closes with native browser controls and no JavaScript.
View example02 examples
Responsive
Components that adapt without hiding their underlying structure.
Responsive feature grid
A card grid that finds useful column widths automatically and stays readable on small screens.
View exampleResponsive hero section
A focused page opening with fluid type, readable copy, and actions that adapt to small screens.
View exampleVisual CSS tools
Build a palette, then take the CSS.
Choose, name, and arrange colors with native browser controls, then copy a complete block of CSS custom properties. Your palette stays on this device.
Open the color palette builder:root {
--color-primary: #d76572;
--color-accent: #d94f9d;
}
Available now · device-local
Begin with a working piece
Choose an example and change the part that matters.
Every published pattern can move directly into the protected workspace.