HHS Styleguide
← Back to site

HHS Component Styleguide

A living reference for all UI components, blocks, and design tokens in the HHS web platform. Components render with the same Tailwind, Preline, and CSS context as the production site.

Foundation

Typography Headings, body text, links, and type scale. Colors & Tokens CSS custom properties, theme palette, and semantic tokens. Icons Lucide icon set and social icon components.

Components

Buttons & CTAs All button appearances, sizes, and link variants. Navigation Header nav with link, dropdown, and mega menu types.

Blocks

Button Array Row of CTA buttons rendered from CMS data. Cards Block Basic, blog, and testimonial card layouts. Carousel Full-width image carousel with slide content. Content w/ Media Rich text alongside an image, left or right aligned. Key Points Icon + title + description feature grid. Quote Pull quote with author attribution. Sponsor Logos Logo grid for partners and sponsors. Text Rich text / HTML content block.