Components

84 components available.

• Account menuA native disclosure for account and session actions in the shell top bar.Component
• AlertA page-level status banner announced when it enters the page.Component
• Article metaAn editorial byline combining author, publication date, reading time, and topic links.Component
• AvatarA person portrait that renders an image or named initials fallback.Component
• Avatar groupAn overlapping row of avatars with computed overflow count.Component
• BadgeA compact label for neutral or low-emphasis status metadata.Component
• BioA compact author or practitioner strip for an article footer or short about band.Marketing
• BreadcrumbsA semantic trail from a higher-level location to the current page.Component
• Bulk actions barAn extendable action region for selected rows in a data table.Component
• ButtonA validated button or link-button with loading, disabled, icon, and submit-value support.Component
• Button groupA compact attached or segmented set of related buttons.Component
• CalloutAn editorial note that belongs to the document content.Component
• CardThe elevated composition surface for grouped content.Component
• Case listA ruled list of case studies or results, with optional proof figures and whole-row destinations.Marketing
• Chart cardCard chrome for a consumer-owned chart engine and its accessible data fallback.Component
• Chart data tableA validated semantic table fallback for the series shown by a chart.Component
• ChipA compact filter or applied-state label that can be selected, linked, or removed.Component
• CodeA labelled, scrollable code panel with optional copy enhancement.Component
• ComboboxA progressively enhanced filterable select that keeps a native select as the submitted control.Component
• Comparison tableA semantic feature-comparison table with responsive stacked rows.Component
• CtaA full-width closing call-to-action band.Marketing
• Cta bleedAn inverse edge-to-edge closing CTA with a primary button and underlined secondary link.Marketing
• Cta splitA mid-page CTA with copy and actions in separate columns.Marketing
• Data tableA structural data table with optional selection, sorting, empty state, and responsive modes.Component
• Date picker chromeAccessible structural chrome around a consumer-owned date-picker control.Component
• DirectoryAn ordered package or resource directory with optional mark and metadata column.Marketing
• DisclosureA native details/summary disclosure for optional content.Component
• DividerA simple structural separator between related content groups.Component
• DropdownA menu-button dropdown with a native disclosure floor and enhanced keyboard menu behaviour.Component
• DropzoneFile-upload field chrome that enhances a real file input with drag feedback.Component
• Empty stateA purposeful no-data or no-results state with optional recovery action.Component
• FaqA section wrapper that stacks native disclosure components.Marketing
• Feature gridA responsive grid of equal feature cards, optionally linked.Marketing
• Feature listA concise ticked list of inclusions.Marketing
• Feature rowsAlternating copy-and-media marketing rows.Marketing
• Filter barA GET filter form that progressively enhances to htmx swaps when configured.Component
• GaugeA server-calculated SVG gauge for one value within a fixed range.Component
• HeroThe primary marketing headline block, supporting actions and optional media.Marketing
• Input groupA field-control wrapper with leading or trailing text or icon addons.Component
• List itemA reusable media-list row with title, supporting facts, optional image, and trailing controls.Component
• Logo cloudA trusted-by logo row that renders supplied image sources and alternative text.Marketing
• Marketing footer groupsNavigation groups for the marketing shell footer.Marketing
• MethodsA quiet two-column presentation of methods or services with optional text links.Marketing
• Mobile nav toggleThe native details/summary trigger that reveals marketing shell navigation at narrow widths.Marketing
• ModalAn edge-independent modal dialog with a full-page fallback.Component
• OutcomesEqual columns of outcome copy with one optional section foot link.Marketing
• Page headerA page h1 with description, action and navigation slots.Component
• PagerPrevious and next links for a sequential document.Component
• PaginationPagination navigation for a Django Page or compatible object.Component
• PortraitA full marketing band introducing a person with real-size portrait, role and actions.Marketing
• Preview frameA guarded viewport for live UI specimens.Component
• Pricing comparisonCompatibility include for the core comparison table.Marketing
• Pricing tableA responsive wrapper that arranges pricing tiers.Marketing
• Pricing tierOne self-contained pricing plan card.Marketing
• Product shotAn elevated frame for consumer-owned product stills or clips, with optional light window chrome.Marketing
• ProgressA determinate or indeterminate progress bar.Component
• Proof collageA section that presents live UI as visual proof, in a multi-tile collage or one page stage.Marketing
• Ranked listAn ordered, proportional leaderboard or top-N breakdown.Component
• ScorecardA responsive dashboard grid for pre-rendered cards.Component
• SearchA topbar GET search form with optional scope chip.Component
• SectionThe shared structural section shell and layout class contract.Marketing
• Section introA convenience include for the public shared section-intro class contract.Marketing
• Site footerShared public-site footer landmark with content and legal slots.Component
• Site headerShared public-site header with brand, primary navigation and action slots.Component
• SkeletonA labelled loading placeholder group.Component
• Slide overAn edge-anchored dialog with a full-page fallback.Component
• SparklineAn inline SVG trend line with an accessible text summary.Component
• SpinnerAn indeterminate activity indicator.Component
• StatA KPI tile with value, optional comparison and optional sparkline.Component
• Stat bandA display-scale metric band that forwards records to core stat tiles.Marketing
• Stat comparisonA compact before-and-after metric comparison.Component
• StepperA multi-step progress/navigation indicator.Component
• TabsA validated tablist with server-owned active selection.Component
• Tag inputA comma-separated tag field enhanced into removable chips.Component
• TestimonialA semantic quote card with optional attribution, avatar and logo.Marketing
• Theme switchA client-side root theme, density, direction and optional brand axis control.Component
• ToastA server-rendered transient outcome notification.Component
• Toast regionA live region and stack target for server-rendered toasts.Component
• TocA documentation “On this page” navigation.Component
• ToggleA standalone native checkbox styled as a switch.Component
• Token specimenA live side-by-side display of resolved Brickwork design tokens.Component
• TooltipA supplementary hover and focus hint with a native-title fallback.Component
• Trend indicatorA standalone directional metric caption.Component
• Version switchA documentation-version navigation switcher.Component