Pattern Library

Full-bleed hero with background image or gradient overlay, headline, subtext, and call-to-action buttons. Sets the visual tone for a page.

Fixed top navigation with logo, desktop links, and mobile hamburger menu. Supports scroll-aware frosted glass effect.

Vertical sidebar with grouped links, collapsible sections, and active state indicators. Used for admin and dashboard layouts.

Responsive 2-4 column grid of feature cards, each with an icon, title, and short description. Used to present capabilities or benefits.

50/50 horizontal split with text content on one side and image or illustration on the other. Alternates direction for visual rhythm.

Responsive grid of data-driven cards. Each card links to a detail page. Supports badges, metadata, and thumbnail images.

Card panel layout for dashboards and admin views. A contained surface with a header, optional divider, and scrollable content area. Suitable for data widgets, kanban columns, or settings sections.

Horizontal row of 3-5 key metrics with labels. Typically placed below a hero or at the top of a dashboard. Each stat shows a number and descriptor.

Vertical chronological event list with date markers, titles, and descriptions. Used for project phases, changelogs, or historical records.

Collapsible content sections for FAQ, specifications, or detailed information that benefits from progressive disclosure.

Rotating display of quotes or testimonials with attribution. Supports auto-play and manual navigation.

Grid of team member cards with headshot, name, role, and optional social links. Suitable for about pages and team directories.

Contact or signup form section with field layout, validation feedback, and submission CTA. Suitable for contact pages, lead capture, and onboarding flows.

Side-by-side comparison of pricing tiers or plan features. Highlights the recommended tier. Each column shows price, features, and CTA.

Two-column table comparing before/after, old/new, or problem/solution pairs. Used to present clear contrasts.

Full-width call-to-action strip with headline, supporting text, and 1-2 action buttons. Typically placed between content sections or at page bottom.

Multi-column footer with brand identity, link groups, legal text, and optional newsletter signup. Anchors every page.