Release
Components Library
Elements
Typography
.heading--s
.heading
.heading--l
.heading--xl
.subheading--s
.subheading
.subheading--l
.eyebrow
.body--xs
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore sequi odio assumenda laboriosam dolorum explicabo perferendis minima suscipit atque. Quae laboriosam sit quis deserunt dolore ex vel cum. Saepe placeat numquam dolorum adipisci? Quas quos tempore ipsum et quod porro nesciunt eius cumque delectus? Quam.
.body--s
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore sequi odio assumenda laboriosam dolorum explicabo perferendis minima suscipit atque. Quae laboriosam sit quis deserunt dolore ex vel cum. Saepe placeat numquam dolorum adipisci? Quas quos tempore ipsum et quod porro nesciunt eius cumque delectus? Quam.
.body
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore sequi odio assumenda laboriosam dolorum explicabo perferendis minima suscipit atque. Quae laboriosam sit quis deserunt dolore ex vel cum. Saepe placeat numquam dolorum adipisci? Quas quos tempore ipsum et quod porro nesciunt eius cumque delectus? Quam.
.body--l
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore sequi odio assumenda laboriosam dolorum explicabo perferendis minima suscipit atque. Quae laboriosam sit quis deserunt dolore ex vel cum. Saepe placeat numquam dolorum adipisci? Quas quos tempore ipsum et quod porro nesciunt eius cumque delectus? Quam.
.body--xl
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore sequi odio assumenda laboriosam dolorum explicabo perferendis minima suscipit atque. Quae laboriosam sit quis deserunt dolore ex vel cum. Saepe placeat numquam dolorum adipisci? Quas quos tempore ipsum et quod porro nesciunt eius cumque delectus? Quam.
linksLorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore sequi odio assumenda laboriosam dolorum explicabo perferendis minima suscipit atque. Quae laboriosam sit quis deserunt dolore ex vel cum. Saepe placeat numquam dolorum adipisci? Quas quos tempore ipsum et quod porro nesciunt eius cumque delectus? Quam.
Color Palette
.bg-primary
.text-white
.bg-white
.text-primary
.bg-secondary
.text-accent
.bg-accent
.text-secondary
.bg-dark
.text-light
.bg-light
.text-dark
Responsive Mixins
Resize your browser to see this box change color.
@include mobile { background-color: $white; border-color: $tropicalIndigo;}
@include desktop { background-color: $honeydew; border-color: $oxfordBlue;}
@include desktop-l { background-color: $offWhite; border-color: $coquelicot;}
@include desktop { background-color: $honeydew; border-color: $oxfordBlue;}
@include desktop-l { background-color: $offWhite; border-color: $coquelicot;}
Buttons
Layout
Layout Sample
Using Layout Classes
This content is wrapped in a
.box and the below content uses the .row and .col classes as well as .box as the inner most container.Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus tenetur officia exercitationem nisi ea voluptates, ut praesentium magni reiciendis qui! Maiores eligendi error quos porro dolore veritatis quo, quod officia?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus tenetur officia exercitationem nisi ea voluptates, ut praesentium magni reiciendis qui! Maiores eligendi error quos porro dolore veritatis quo, quod officia? Doloribus tenetur officia exercitationem nisi ea voluptates, ut praesentium magni reiciendis qui! Maiores eligendi error quos porro dolore veritatis quo, quod officia?
Left Column
This is a 50% column on desktop, 100% on mobile.
Right Column
You can nest any components inside these columns.
Components
Media Block
Media Block
This is a media block
I have an image on the left and text on the right. I also have one button.
Media Block
This is a reversed media block
I have the image on the right and text on the left using "isReversed: true". I also have two buttons.
Video Block
This is a video block. It plays a YouTube video in an iframe. It uses the thumbnail provided by youtube.
This is a video block. It plays a YouTube video in an iframe. It uses a custom thumbnail.
Waypoint
Waypoint
This is a media block used in a waypoint
The background of this component changes color when it comes into view on the screen. This can be used to trigger css or js upon scrolling.
Modals
Text Modal
This button opens a popup text modal
Video Modal
This button opens a popup video modal
Image Hero
Overline
Build Faster with Your Template
A reusable Next.js starter with components, utilities, and a polished DX.
Get StartedVideo Hero
Now Playing
Crisp, Full-Bleed Video
Local MP4 with autoplay, muted, loop, and playsInline for mobile.
Learn MoreNav
Footer
FAQ
Yes. You can use it for client work and your own projects. A credit is appreciated but not required.
Update your global SCSS tokens (colors, spacing, typography classes) and the components will inherit them.
Yes—use an internal MP4, keep it muted with playsInline. Provide a poster for smooth loading.
Pass an array of {label, href} to the Navbar via the components library data. The component renders whatever you provide.
Yep. Set allowMultiple to true (as shown here). With allowMultiple=false, it behaves like a single-open accordion.
Card
Card Row (Slider)
Release
Version 1.0 is live
Guide
Styling & Theming
Case Study
Perf wins with Next
Tutorial
Forms & Validation
Announcement
Dark mode shipped
Blog
Design tokens
Release
Version 1.0 is live
Guide
Styling & Theming
Case Study
Perf wins with Next
Card Grid
Release
Version 1.0 is live
Guide
Styling & Theming
Case Study
Perf wins with Next
Tutorial
Forms & Validation
Announcement
Dark mode shipped
Blog