Alert: Your financial support will help make everything easier. Donate today
kiminted-components
A small collection of reusable Gatsby/React components in a cool, mint flavor. Everything below is rendered live from the components in src/components.
Alert Banner
A dismissible page-level notice. Use the close button above — it removes the alert-opened class to hide the banner.
↑ Shown at the top of the page. Click the ✕ to dismiss it.
Blockquote
A quotation card with optional author, role, avatar image, and link. Pass the unstyled prop to drop the background, border, and shadow.
“This is truly the best summer ever.”
“Simplicity is the ultimate sophistication.”
Full Width Container
A full-bleed section with a configurable background. Pass the dark prop to switch the text to white for dark backgrounds.
A FullWidthContainer with an ocean-mint background and the dark prop, holding an InnerContainer.
Inner Container
A centered, max-width content wrapper. Supports hasShadow for a box shadow and padded for interior spacing.
An InnerContainer with hasShadow and padded, sitting inside a water-mint FullWidthContainer.
Number Boxes
A row of stat callouts, each with a large number and a caption. Boxes are divided by a border and can optionally link out. The title accepts HTML.
Fixed Card
A compact, square image card with an overlaid title and optional description. When a url and title are provided, the whole card becomes a link. Use headingLevel to set the title's heading level and className for a variant modifier.
No Link
This one has no url, so it renders without the overlay link.
Pills
A row of pill-shaped category tags. Categories with a url render as links (hover them); those without render as plain decorative tags. Duplicates are removed by name and an optional limit caps how many show.
- Design
- Development
- Accessibility
- Gatsby
- CSS