UI primitives

Button

Filled primary CTA. Renders as <a> when href is provided, otherwise <button>. Three sizes (sm / md / lg) and a block variant for full-width use inside cards. Used for hero CTAs, pricing tier CTAs, demo CTAs, and the nav bar.

5 instances site-wide. Used by HeroSection, PricingTier, DemoSection, TopAppBar (T2 met).

Props

Prop	Type	Default	Description
href	string	undefined	If set, renders as <a>; if absent, renders as <button>.
size	'sm' | 'md' | 'lg'	'md'	sm = nav bar, md = pricing/demo CTAs, lg = hero CTA.
block	boolean	false	Full-width with centered content (used inside pricing tier cards).
trailingIcon	string	undefined	Material symbol name placed after the slot.
external	boolean	false	Adds target="_blank" + rel="noopener noreferrer" when href is set.
class	string	—	Append wrapper classes.

LinkArrow

Text-only directional link with an arrow icon. Hover translates 1px right. Used for tertiary actions, secondary CTAs in dense areas (FAQ, demo, case studies).

8+ instances across ArchitectureSection, FAQItem, PricingSection, CaseCard, DemoSection (T2 met).

Props

Prop	Type	Default	Description
href	string	—	Required link target.
icon	string	undefined	Optional material symbol name placed before the slot.
trailingIcon	string	'arrow_forward'	Material symbol name placed after the slot. Set explicitly to 'trending_flat' on case study links.
external	boolean	false	Adds target="_blank" + rel="noopener noreferrer".
class	string	—	Append wrapper classes.

ChecklistItem

Bulleted item with an accent circle + check mark, a title, and a slotted body. Used in HeroSection (6 instances on the home page) and anywhere a "feature with description" pattern appears.

13 instances site-wide. Reused across multiple sections (T2 met).

Props

Prop	Type	Default	Description
title	string	—	Bold title rendered above the slot content.
class	string	—	Append wrapper classes.
...rest	HTMLAttributes<'div'>	—	Spread to root div (id, data-*, aria-*).

SectionWithIcon

Layout primitive that renders an icon + a header slot + body slot. Two layouts: stacked (icon + header on top, body below indented) and side-by-side (icon + header on the left column, body on the right). The workhorse of every section on the site.

51 instances site-wide. Used in nearly every section.

Props

Prop	Type	Default	Description
icon	ImageMetadata	undefined	Imported asset for the icon. Hidden below lg breakpoint.
layout	'stacked' | 'side-by-side'	'stacked'	Layout flow.
class	string	—	Append wrapper classes.
...rest	HTMLAttributes<'div'>	—	Spread to root div.

Slots

Name	Purpose
header	Section badge, h2 heading, optional intro paragraph.
(default)	Section body content — grids, cards, anything.