Guide
Documentation
Template Docs
Everything in the components library, explained. Copy/paste props, see small demos, and jump to the full /components-library page for live previews.
Utilities
Typography classes
.heading--xl, .heading--l, .heading, .heading--s.subheading--l, .subheading, .subheading--s.eyebrow.body--xl, .body--l, .body, .body--s, .body--xsColor utilities
Backgrounds:
Text:
.bg-primary, .bg-secondary, .bg-dark, .bg-light, .bg-accent, .bg-white, .bg-off-whiteText:
.text-primary, .text-secondary, .text-dark, .text-light, .text-accent, .text-white, .text-off-whiteButtons
Use
Themes:
.button + size + theme. Sizes: .btn--s, .btn, .btn--l.Themes:
.btn-primary, .btn-secondary, .btn-primary--outline, .btn-secondary--outline.Layout
.container centers content with max-width..row + .col builds grids..box is a padded surface for component content.Responsive mixins available in SCSS:
@include mobile { ... } and @include desktop { ... }.Hero
Full-bleed hero with image or video background.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| bgType | 'image' | 'video' | 'image' | Select background type. |
| imageUrl | string | - | Required for bgType="image". |
| imageAlt | string | - | Alt text for image background. |
| videoSrc | string | - | Local MP4 recommended; autoplay/muted/loop/playsInline handled in component. |
| videoPoster | string | - | Poster image for video. |
| overlay | boolean | false | Adds a dark overlay for contrast. |
| overlayOpacity | number (0–1) | 0.35 | Overlay strength. |
| overline | string | - | Small text above heading. |
| heading | string | - | Main heading text. |
| body | string | - | Supporting copy. |
| button | { label, link, theme, size } | - | Primary CTA. |
| align | 'left' | 'center' | 'right' | 'left' | Text/content alignment. |
Minimal Demo
MediaBlock
Split layout with image/video on one side and text/buttons on the other.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| imageUrl | string | - | Media image URL. |
| imageAlt | string | - | Alt text (if implemented in your component). |
| eyebrow | string | - | Small label above heading. |
| heading | string | - | Section heading. |
| body | string | - | Copy text. |
| isReversed | boolean | false | Swap media/text sides. |
| buttons | Array<{label, link, theme, size?}> | [] | CTA buttons. |
Minimal Demo
VideoBlock
Lightweight YouTube embed with optional custom thumbnail.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| youTubeUrl | string | - | Full YouTube URL. |
| thumbnailUrl | string | auto | Optional explicit thumbnail. |
| playIconUrl | string | built-in | Optional custom play icon. |
Minimal Demo
Waypoint
IntersectionObserver wrapper. Adds/removes classes and triggers callbacks as its child enters/leaves the viewport. Useful for color swaps, counters, lazy mounting, sticky CTAs, progress dots, etc.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| threshold | number (0–1) | 0.5 | Percent of target visible to trigger. |
| activeClass | string | '' | Class added when intersecting. |
| inactiveClass | string | '' | Class added when not intersecting. |
| onEnter | () => void | - | Callback when entering. |
| onExit | () => void | - | Callback when leaving. |
Pattern
<Waypoint
threshold={0.75}
activeClass="bg-white"
inactiveClass="bg-off-white"
onEnter={() => console.log('entered')}
onExit={() => console.log('left')}
>
<div className="box bg-off-white">
{/* content to color-swap / animate */}
</div>
</Waypoint>Modals
TextModal and VideoModal share the same trigger/close API.
TextModal Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| triggerLabel | string | 'Open' | Button text. |
| triggerTheme | string | 'btn-primary' | Button theme class. |
| triggerSize | string | 'btn' | Button size class. |
| title | string | - | Modal title. |
| body | string | - | Modal content text. |
| closeLabel | string | 'Close' | Close button text. |
| closeTheme | string | 'btn-primary' | Close button theme. |
| closeSize | string | 'btn--s' | Close button size. |
TextModal Demo
VideoModal Demo
FAQ
Accordion with single-open or multi-open modes.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| allowMultiple | boolean | false | Allow multiple items open simultaneously. |
| defaultOpen | number[] | [] | Indices to open initially. |
| items | Array<{question, answer}> | [] | FAQ content. |
Yes—client work and personal projects are fine.
See the components library at /components-library.
Card
Single content card with image, text, and CTA.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| imageUrl | string | - | Card image. |
| eyebrow | string | - | Small label. |
| heading | string | - | Card title. |
| body | string | - | Description. |
| button | { label, href, theme, size } | - | CTA. |
CardRow (slider)
Horizontal slider. Display 3-up, slide by N, with optional dots.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| items | Array<CardProps> | [] | Cards to render. |
| perPage | number | 3 | Cards visible at once. |
| slideBy | number | 3 | Cards to move per slide. |
| showDots | boolean | false | Enable pagination dots. |
| buttonThemeOverride | string | undefined | Force a single button theme for all cards. |
Guide
Styling
Case
Perf wins
Blog
Tokens
CardGrid
Responsive grid with initial/step/max and an optional Load More.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| items | Array<CardProps> | [] | Cards to render. |
| initial | number | 6 | Cards shown initially. |
| step | number | 3 | Cards added per click. |
| max | number | Infinity | Hard cap on items shown. |
| showLoadMore | boolean | true | Toggle the Load More button. |
| align | 'left' | 'center' | 'left' | Grid alignment. |
| buttonThemeOverride | string | undefined | Force a single button theme for all cards. |
Release
v1.0
Guide
Theming
Case