Browse Blocks
Heros
Make a strong first impression.
Simple centered
A gradient headline with an announcement, two actions, and a closing note.
View Code
<section
data-hero-entrance
class="site-section site-hero site-hero-centered hero-oversized"
aria-labelledby="hero-centered-title"
>
<div class="site-hero-copy">
<a class="hero-announcement" href="/blocks">
<span>
Explore the library
</span>
<span>
Meet your next starting point
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</span>
</a>
<p class="eyebrow">
A foundation for your next idea
</p>
<h2 class="site-title" id="hero-centered-title">
<span>
Your next idea.
</span>
<span class="text-gradient">
Beautifully built.
</span>
</h2>
<p class="site-lead muted">
A thoughtful foundation for something that feels like you.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
<p class="site-hero-note muted">
Start small. Make it yours.
</p>
</div>
</section>With wide image
Centered copy above a generous image. Use the architecture example as a placeholder for photography, a product screenshot, or any other visual.
View Code
<section
data-hero-entrance
class="site-section site-hero site-hero-centered hero-wide-image"
aria-labelledby="wide-image-title"
>
<div class="site-hero-copy">
<p class="eyebrow">
A clear vision. A strong foundation.
</p>
<h2 class="site-title" id="wide-image-title">
Build on possibility.
</h2>
<p class="site-lead muted">
Bring your vision into focus with a clear message, a considered composition, and room for the imagery to tell its own story.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
</div>
<figure class="hero-photo">
<img
class=""
src="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=640&q=80 640w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1200&q=85 1200w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1800&q=85 1800w"
sizes="(min-width: 1200px) 1200px, 100vw"
width="1200"
height="900"
alt="Two concrete buildings with a quiet green courtyard"
loading="lazy"
decoding="async"
>
</figure>
</section>Split with image
A balanced introduction and a large, rounded photograph. Replace the example image with your own product or brand photography.
View Code
<section
data-hero-entrance
class="site-section site-hero site-hero-split hero-image-split"
aria-labelledby="split-image-title"
>
<div class="site-hero-copy">
<p class="eyebrow">
Made with intention
</p>
<h2 class="site-title" id="split-image-title">
Room for big ideas.
</h2>
<p class="site-lead muted">
Give your vision a strong foundation. Shape every detail to make it yours.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
</div>
<figure class="hero-photo">
<img
class=""
src="https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=1200&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=640&w=640&q=80 640w, https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=1200&w=1200&q=85 1200w, https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=1800&w=1800&q=85 1800w"
sizes="(min-width: 900px) 50vw, 100vw"
width="1200"
height="900"
alt="Angular concrete architecture beneath a clear sky"
loading="lazy"
decoding="async"
>
</figure>
</section>With offset image
An asymmetric portrait composition with a restrained vertical offset and an image caption. Suited to studio work, portfolios, and visual storytelling.
View Code
<section
data-hero-entrance
class="site-section site-hero hero-offset"
aria-labelledby="offset-image-title"
>
<div class="site-hero-copy">
<p class="eyebrow">
Considered from the beginning
</p>
<h2 class="site-title" id="offset-image-title">
A fresh perspective.
</h2>
<p class="site-lead muted">
A clear foundation leaves room for the unexpected. Start with the essentials and follow your ideas somewhere new.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
</div>
<figure class="hero-photo">
<img
class=""
src="https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=640&q=80 640w, https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=1200&q=85 1200w, https://images.unsplash.com/photo-1622396481322-3b83d186701b?auto=format&fit=crop&w=1800&q=85 1800w"
sizes="(min-width: 900px) 50vw, 100vw"
width="1200"
height="900"
alt="Sculptural white walls and geometric shadows"
loading="lazy"
decoding="async"
>
<figcaption>
Form, light, and the space in between.
</figcaption>
</figure>
</section>With image extending offscreen
A split composition with an oversized image extending past the section edge. Use a screenshot or photograph; on mobile it stacks below the copy and keeps a gentle edge crop without horizontal page scrolling.
View Code
<section
data-hero-entrance
class="site-section site-hero site-hero-split hero-bleed"
aria-labelledby="bleeding-image-title"
>
<div class="site-hero-copy">
<p class="eyebrow">
Room for a bigger picture
</p>
<h2 class="site-title" id="bleeding-image-title">
Go beyond the frame.
</h2>
<p class="site-lead muted">
Give your ideas room to grow. Pair a clear introduction with an expansive image that carries the story beyond the frame.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
</div>
<figure class="hero-bleed-media">
<img
class=""
src="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&h=750&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&h=400&w=640&q=80 640w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&h=750&w=1200&q=85 1200w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&h=1125&w=1800&q=85 1800w"
sizes="(min-width: 760px) 100vw, 130vw"
width="1200"
height="750"
alt="Two concrete buildings with a quiet green courtyard"
loading="lazy"
decoding="async"
>
</figure>
</section>With angled image
A split introduction with a geometric image edge. The angle resolves to a simple rectangle on mobile.
View Code
<section
data-hero-entrance
class="site-section site-hero site-hero-split hero-bleed hero-angle"
aria-labelledby="angled-image-title"
>
<div class="site-hero-copy">
<p class="eyebrow">
Structure meets imagination
</p>
<h2 class="site-title" id="angled-image-title">
A different angle.
</h2>
<p class="site-lead muted">
Create something with a point of view. Flexible components and consistent foundations help you focus on the parts that make it yours.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
</div>
<figure class="hero-photo">
<img
class=""
src="https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=1200&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=640&w=640&q=80 640w, https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=1200&w=1200&q=85 1200w, https://images.unsplash.com/photo-1549791084-5f78368b208b?auto=format&fit=crop&crop=bottom&h=1800&w=1800&q=85 1800w"
sizes="(min-width: 900px) 50vw, 100vw"
width="1200"
height="900"
alt="Angular concrete architecture beneath a clear sky"
loading="lazy"
decoding="async"
>
</figure>
</section>With background image
Centered text sits directly over a full photographic backdrop. A soft gradient keeps the image visible while supporting readable copy in either theme.
View Code
<section
data-hero-entrance
class="site-section site-hero hero-cover"
aria-labelledby="background-image-title"
>
<div class="hero-cover-media" aria-hidden="true">
<img
class=""
src="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1200&q=85"
srcset="https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=640&q=80 640w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1200&q=85 1200w, https://images.unsplash.com/photo-1637024258784-39245bb9b0bc?auto=format&fit=crop&w=1800&q=85 1800w"
sizes="(min-width: 1200px) 1200px, 100vw"
width="1200"
height="900"
alt=""
loading="lazy"
decoding="async"
>
</div>
<div class="site-hero-copy">
<p class="eyebrow">
Space to think. Space to build.
</p>
<h2 class="site-title" id="background-image-title">
Make it matter.
</h2>
<p class="site-lead muted">
Give your next idea a place to take shape. Thoughtful details, clear foundations, and room for what comes next.
</p>
<div class="cluster">
<a class="btn" href="/docs/install">
Start Building
</a>
<a class="btn ghost" href="/components">
Explore Components
<span class="icon" data-icon="arrow-right" aria-hidden="true">
</span>
</a>
</div>
<p class="site-hero-note muted">
Build at your own pace. Make it your own.
</p>
</div>
</section>