Heroes
25 examples. Use Compact to see how the same HTML reflows.
Split workspace photo
The tracks sit side by side when their container has room and stack in source order when it narrows.
Build a page that tells your story
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="heros" data-treatment="photo accent">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-01-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-01-headline">Build a page that tells <em>your story</em></h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-image"><img src="/_astro/marketing-header-studio.saxM7xQc.webp" width="1120" height="840" alt="Open sketchbook and blue swatches on a studio desk" loading="lazy" decoding="async"></figure></div></div>
</section>
</div>
</div>Centered illustration below the pitch
The introduction keeps its measure while the supporting content can use the wider track.
Make your next landing page better
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="heros" data-treatment="art accent">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-02-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-02-headline">Make your next landing <em>page better</em></h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>Split video introduction
The tracks sit side by side when their container has room and stack in source order when it narrows.
Fieldwork Studio
A better fit for the way you work
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="heros" data-treatment="video pill">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-03-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Fieldwork Studio</p>
<h3 class="marketing-display" id="marketing-heros-03-headline">A better fit for the way you work</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/examples/video-player/">Watch the demo</a></div>
</div><figure class="marketing-image marketing-video">
<video controls playsinline preload="none" poster="/_astro/marketing-workshop.CAfo7i-M.webp" aria-label="Sample video: a blue square moves across a dark background">
<source src="/_astro/moving-square.CCnV5rMR.mp4" type="video/mp4">
<track kind="captions" src="/examples/square-captions.vtt" srclang="en" label="English" default>
<a href="/examples/video-player/">Open the sample video</a>
</video>
<figcaption>Sample video and captions</figcaption>
</figure></div></div>
</section>
</div>
</div>Learning pitch with an illustrated companion
The tracks sit side by side when their container has room and stack in source order when it narrows.
Learn together and grow together
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="heros" data-treatment="art">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-04-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-04-headline">Learn together and grow together</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>Centered film invitation
A bounded measure and wrapping actions keep the composition centered.
Watch, learn, and make something
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="heros" data-treatment="video compact">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-05-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-05-headline">Watch, learn, and make something</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a></div>
</div><figure class="marketing-image marketing-video">
<video controls playsinline preload="none" poster="/_astro/marketing-workshop.CAfo7i-M.webp" aria-label="Sample video: a blue square moves across a dark background">
<source src="/_astro/moving-square.CCnV5rMR.mp4" type="video/mp4">
<track kind="captions" src="/examples/square-captions.vtt" srclang="en" label="English" default>
<a href="/examples/video-player/">Open the sample video</a>
</video>
<figcaption>Sample video and captions</figcaption>
</figure></div></div>
</section>
</div>
</div>Welcome copy and line illustration
The tracks sit side by side when their container has room and stack in source order when it narrows.
Welcome to Fieldwork Studio
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="heros" data-treatment="art">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-06-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-06-headline">Welcome to Fieldwork Studio</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>Team culture and inline signup
The tracks sit side by side when their container has room and stack in source order when it narrows.
Shape your team’s culture
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="heros" data-treatment="workshop signup">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-07-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-07-headline">Shape your team’s culture</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<form class="marketing-form thin-stack" data-space="xs" data-form-layout="inline" method="post" action="/patterns/marketing/header-signup/">
<input type="hidden" name="example" value="heros:07">
<p id="marketing-heros-07-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-heros-07-email">Email address</label>
<input class="thin-input" id="marketing-heros-07-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-heros-07-form-hint">
</div>
<button class="thin-button" type="submit">Try signup</button>
</div>
</form>
</div><figure class="marketing-image"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"></figure></div></div>
</section>
</div>
</div>Email signup, partner marks, and dashboard
The tracks sit side by side when their container has room and stack in source order when it narrows.
Bring your next idea into focus
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
- Fieldwork
- Relay
- Northline
- Afterlight
- Commonform
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="heros" data-treatment="board signup logos">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-08-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-08-headline">Bring your next idea into focus</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<form class="marketing-form thin-stack" data-space="xs" data-form-layout="inline" method="post" action="/patterns/marketing/header-signup/">
<input type="hidden" name="example" value="heros:08">
<p id="marketing-heros-08-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-heros-08-email">Email address</label>
<input class="thin-input" id="marketing-heros-08-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-heros-08-form-hint">
</div>
<button class="thin-button" type="submit">Try signup</button>
</div>
</form>
</div><figure class="marketing-board thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div><ul class="thin-grid marketing-collection marketing-marks" role="list" style="--thin-grid-min: 8rem"><li><strong>Fieldwork</strong></li><li><strong>Relay</strong></li><li><strong>Northline</strong></li><li><strong>Afterlight</strong></li><li><strong>Commonform</strong></li></ul></div>
</section>
</div>
</div>Edge-to-edge landscape split
The tracks sit side by side when their container has room and stack in source order when it narrows.
Build on a solid foundation
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="heros" data-treatment="landscape">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-09-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-09-headline">Build on a solid foundation</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-image"><img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="Sunrise over a lake framed by mist and forested mountains" loading="lazy" decoding="async"></figure></div></div>
</section>
</div>
</div>Dark developer pitch with product preview
Text measure and logical spacing control the reading rhythm.
Designed for the people who build
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="heros" data-treatment="device">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-10-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-10-headline">Designed for the people who build</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-board marketing-device thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Page-builder preview beside a single action
The tracks sit side by side when their container has room and stack in source order when it narrows.
A place to build the whole page
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="heros" data-treatment="board compact">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-11-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-11-headline">A place to build the whole page</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a></div>
</div><figure class="marketing-board thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Illustrated split with outlined actions
The tracks sit side by side when their container has room and stack in source order when it narrows.
Design with care and build faster
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="mint" data-category="heros" data-treatment="art plain">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-12-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-12-headline">Design with care and build faster</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button" data-variant="secondary">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>Laptop preview and a walkthrough link
The tracks sit side by side when their container has room and stack in source order when it narrows.
Give your next idea a working draft
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="blue" data-category="heros" data-treatment="device video">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-13-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-13-headline">Give your next idea a working draft</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/examples/video-player/">Watch the demo</a></div>
</div><figure class="marketing-board marketing-device thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Split feedback preview with partner marks
The tracks sit side by side when their container has room and stack in source order when it narrows.
A better experience starts with feedback
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
- Published
Share the edition
- Fieldwork
- Relay
- Northline
- Afterlight
- Commonform
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="heros" data-treatment="board logos tiles">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-14-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-14-headline">A better experience starts with feedback</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-board thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li><li class="thin-box"><strong>Published</strong><p>Share the edition</p></li></ul>
</figure></div><ul class="thin-grid marketing-collection marketing-marks" role="list" style="--thin-grid-min: 8rem"><li><strong>Fieldwork</strong></li><li><strong>Relay</strong></li><li><strong>Northline</strong></li><li><strong>Afterlight</strong></li><li><strong>Commonform</strong></li></ul></div>
</section>
</div>
</div>Device preview before the pitch
Media and copy follow their authored sequence as the tracks stack.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
Tell your story on every screen
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="heros" data-treatment="device compact">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-15-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="media-first"><figure class="marketing-board marketing-device thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-15-headline">Tell your story on every screen</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a></div>
</div></div></div>
</section>
</div>
</div>Photo-backed directory search
A bounded measure and wrapping actions keep the composition centered.
Find the right guide
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="heros" data-treatment="landscape search">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-16-headline">
<div class="marketing-backdrop"><img src="/_astro/marketing-landscape.WYjGY_8_.webp" width="1200" height="800" alt="" loading="lazy" decoding="async"></div>
<div class="marketing-launch"><div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-16-headline">Find the right guide</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<form class="marketing-search thin-stack" data-space="xs" method="get" action="/patterns/marketing/examples/search/">
<label for="marketing-heros-16-search">Search the guide directory</label>
<div class="marketing-form-fields"><input id="marketing-heros-16-search" name="q" class="thin-input" type="search" maxlength="100" required><button type="submit" class="thin-button">Search</button></div>
</form>
</div></div></div>
</section>
</div>
</div>Centered launch above a job board
The introduction keeps its measure while the supporting content can use the wider track.
Build interest in what comes next
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="mint" data-category="heros" data-treatment="board">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-17-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-17-headline">Build interest in what comes next</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-board thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Dark split with a workshop photograph
The tracks sit side by side when their container has room and stack in source order when it narrows.
The future of web design is open
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="heros" data-treatment="workshop accent">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-18-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-18-headline">The future of web design <em>is open</em></h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-image"><img src="/_astro/marketing-workshop.CAfo7i-M.webp" width="1200" height="800" alt="Two designers review paper prototypes at a studio table" loading="lazy" decoding="async"></figure></div></div>
</section>
</div>
</div>Gradient stage with product artwork
The introduction keeps its measure while the supporting content can use the wider track.
Design, build, and publish
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="heros" data-treatment="device">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-19-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-19-headline">Design, build, and publish</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-board marketing-device thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Design collection beside a product preview
The tracks sit side by side when their container has room and stack in source order when it narrows.
A design collection you can put to work
Make space for the story, the people behind it, and what readers can do next.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="rose" data-category="heros" data-treatment="device video">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-20-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-20-headline">A design collection you can put to work</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/examples/video-player/">Watch the demo</a></div>
</div><figure class="marketing-board marketing-device thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Violet developer pitch with illustration
The tracks sit side by side when their container has room and stack in source order when it narrows.
Fieldwork Studio
A workspace for developers
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="heros" data-treatment="art label">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-21-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Fieldwork Studio</p>
<h3 class="marketing-display" id="marketing-heros-21-headline">A workspace for developers</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>Onboarding preview with a metric strip
The tracks sit side by side when their container has room and stack in source order when it narrows.
Give new readers a clearer start
Make space for the story, the people behind it, and what readers can do next.
- Sample projects
- 128
- Sample editions
- 24
- Contributors
- 16
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="heros" data-treatment="board metrics video">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-22-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-22-headline">Give new readers a clearer start</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/examples/video-player/">Watch the demo</a></div><dl class="marketing-metrics thin-cluster"><div><dt>Sample projects</dt><dd>128</dd></div><div><dt>Sample editions</dt><dd>24</dd></div><div><dt>Contributors</dt><dd>16</dd></div></dl>
</div><figure class="marketing-board thin-stack" data-space="s">
<figcaption>Project overview</figcaption>
<ul class="thin-grid marketing-collection " role="list" style="--thin-grid-min: 9rem"><li class="thin-box"><strong>Planned</strong><p>Collect references</p></li><li class="thin-box"><strong>In progress</strong><p>Draft the story</p></li><li class="thin-box"><strong>Ready</strong><p>Review the layout</p></li></ul>
</figure></div></div>
</section>
</div>
</div>Portrait, next action, and partner marks
The tracks sit side by side when their container has room and stack in source order when it narrows.
Make more of the work you love
Make space for the story, the people behind it, and what readers can do next.
- Fieldwork
- Relay
- Northline
- Afterlight
- Commonform
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="heros" data-treatment="portrait logos">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-23-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-23-headline">Make more of the work you love</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-image"><img src="/_astro/marketing-portrait.BvfY0JqU.webp" width="1050" height="788" alt="A designer in a cobalt jacket" loading="lazy" decoding="async"></figure></div><ul class="thin-grid marketing-collection marketing-marks" role="list" style="--thin-grid-min: 8rem"><li><strong>Fieldwork</strong></li><li><strong>Relay</strong></li><li><strong>Northline</strong></li><li><strong>Afterlight</strong></li><li><strong>Commonform</strong></li></ul></div>
</section>
</div>
</div>Coral illustration and inline signup
The tracks sit side by side when their container has room and stack in source order when it narrows.
Crafted with care
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="rose" data-category="heros" data-treatment="art signup">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-24-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-heros-24-headline">Crafted with care</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<form class="marketing-form thin-stack" data-space="xs" data-form-layout="inline" method="post" action="/patterns/marketing/header-signup/">
<input type="hidden" name="example" value="heros:24">
<p id="marketing-heros-24-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-heros-24-email">Email address</label>
<input class="thin-input" id="marketing-heros-24-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-heros-24-form-hint">
</div>
<button class="thin-button" type="submit">Try signup</button>
</div>
</form>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>Application pitch with illustrated collaboration
The tracks sit side by side when their container has room and stack in source order when it narrows.
Fieldwork Studio
Build an application together
Make space for the story, the people behind it, and what readers can do next.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="heros" data-treatment="art label">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-heros-25-headline">
<div class="marketing-launch"><div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Fieldwork Studio</p>
<h3 class="marketing-display" id="marketing-heros-25-headline">Build an application together</h3>
<p>Make space for the story, the people behind it, and what readers can do next.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/quick-start/" class="thin-button">Get started</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div></div>
</section>
</div>
</div>View shared CSS
Load Thin-Sky’s Foundation, Themes, Layouts, Components, and Marketing styles with these rules. Adapt the media, links, and form actions to your site.
@layer thin-patterns {
.marketing-specimen {
container: marketing-specimen / inline-size;
color: var(--thin-color-text);
background: var(--thin-color-surface);
}
.marketing-specimen[data-tone="sky"] { --thin-color-surface: oklch(96% .022 231); }
.marketing-specimen[data-tone="mint"] { --thin-color-surface: oklch(96% .035 155); }
.marketing-specimen[data-tone="rose"] { --thin-color-surface: oklch(96% .035 18); }
.marketing-specimen[data-tone="amber"] { --thin-color-surface: oklch(96% .06 91); }
.marketing-specimen[data-tone="blue"] { --thin-color-surface: oklch(39% .15 257); }
.marketing-specimen[data-tone="violet"] { --thin-color-surface: oklch(35% .16 290); }
.marketing-specimen[data-tone="gradient"] { background: linear-gradient(125deg, oklch(33% .13 272), oklch(37% .125 326)); }
.marketing-specimen[data-treatment~="accent"]:not([data-tone="gradient"]) {
background: radial-gradient(ellipse at 92% 88%, color-mix(in oklch, var(--thin-color-accent) 19%, transparent), transparent 60%), var(--thin-color-surface);
}
.marketing-section {
--marketing-inset: clamp(var(--thin-space-m), 5cqi, 4rem);
--marketing-gap: clamp(var(--thin-space-m), 4cqi, 3rem);
display: grid;
gap: var(--marketing-gap);
padding-block: clamp(var(--thin-space-l), 5cqi, 4rem);
padding-inline: var(--marketing-inset);
overflow-wrap: anywhere;
}
.marketing-section > *,
.marketing-composition > *,
.marketing-nav > *,
.marketing-card,
.marketing-board,
.marketing-section .thin-price-card {
min-inline-size: 0;
}
.marketing-specimen[data-category="navigations"] .marketing-section,
.marketing-specimen[data-treatment~="compact"]:not([data-category="headers"], [data-category="blog"]) .marketing-section {
padding-block: var(--thin-space-m);
}
.marketing-section :where(ul[role="list"], dl) { margin-block: 0; }
.marketing-section :where(a.thin-button, button) { max-inline-size: 100%; }
.marketing-composition {
display: grid;
gap: var(--marketing-gap);
}
.marketing-composition:is([data-composition="split"], [data-composition="media-first"]) {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
align-items: center;
}
.marketing-composition[data-composition="band"] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.marketing-composition[data-composition="band"] > .marketing-intro {
flex: 1 1 17rem;
}
.marketing-composition[data-composition="center"] > .marketing-intro,
.marketing-composition[data-composition="showcase"] > .marketing-intro {
align-items: center;
justify-self: center;
text-align: center;
}
.marketing-composition:is([data-composition="center"], [data-composition="showcase"]) > .marketing-intro .marketing-actions {
justify-content: center;
}
.marketing-composition[data-composition="editorial"] > .marketing-intro {
inline-size: min(100%, 62ch);
}
.marketing-intro {
inline-size: min(100%, 62ch);
}
.marketing-display {
max-inline-size: 23ch;
font-size: clamp(1.55rem, 1.05rem + 3.4cqi, 4rem);
line-height: 1.07;
letter-spacing: -.025em;
text-wrap: balance;
}
.marketing-display em {
color: var(--thin-color-accent);
font-style: normal;
}
.marketing-specimen[data-treatment~="light"] .marketing-display { font-weight: 430; }
.marketing-specimen[data-treatment~="uppercase"] :is(.marketing-display, .marketing-nav nav) { text-transform: uppercase; }
.marketing-specimen[data-treatment~="pill"] .thin-button { border-radius: 2em; }
.marketing-intro > p:not(.marketing-kicker) { max-inline-size: 54ch; }
.marketing-kicker { color: var(--thin-color-accent); font-size: .9em; font-weight: 700; }
.marketing-specimen[data-treatment~="pill"] .marketing-kicker { padding: .25em .8em; border: 1px solid currentColor; border-radius: 2em; inline-size: fit-content; }
.marketing-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--thin-space-xs) var(--thin-space-m);
}
.marketing-nav[data-nav="start"] > nav { flex: 1 1 auto; }
.marketing-nav[data-nav="band"] > nav { margin-inline-start: auto; }
.marketing-nav[data-nav="wordmark"] { justify-content: center; }
.marketing-nav > nav a,
.marketing-nav-actions > a:not(.thin-button) {
display: inline-flex;
align-items: center;
min-block-size: var(--thin-density-control);
}
.marketing-brand {
color: var(--thin-color-text);
font-size: 1.25em;
font-weight: 780;
text-decoration: none;
}
.marketing-stage,
.marketing-launch,
.marketing-cta,
.marketing-foot {
display: grid;
gap: var(--marketing-gap);
}
.marketing-stage {
position: relative;
isolation: isolate;
}
.marketing-stage .marketing-nav {
padding-block-end: var(--thin-space-s);
border-block-end: 1px solid var(--thin-color-border);
}
.marketing-stage:has(.marketing-backdrop) {
border-radius: var(--thin-radius-m);
padding: var(--marketing-inset);
overflow: clip;
}
.marketing-backdrop {
position: absolute;
inset: 0;
z-index: -1;
display: grid;
background: oklch(24% .04 258);
}
.marketing-backdrop img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: .23;
}
.marketing-panel {
padding: var(--marketing-inset);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-m);
background: var(--thin-color-surface-raised);
}
.marketing-notice {
justify-content: center;
padding: var(--thin-space-xs) var(--thin-space-m);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-s);
background: var(--thin-color-surface-raised);
}
.marketing-notice a { padding-block: var(--thin-space-2xs); }
.marketing-notice-inset { max-inline-size: 62ch; margin-inline: auto; }
.marketing-travel { display: grid; gap: var(--marketing-gap); align-items: center; }
@container marketing-specimen (inline-size >= 52rem) {
.marketing-travel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.marketing-travel > figure { grid-column: 1 / 5; grid-row: 1; }
.marketing-travel > .marketing-panel { grid-column: 4 / -1; grid-row: 1; }
}
.marketing-image :is(img, video) {
inline-size: 100%;
block-size: auto;
border-radius: var(--thin-radius-m);
}
.marketing-image:only-child { inline-size: min(100%, 55rem); }
.marketing-composition[data-composition="showcase"] > .marketing-image { inline-size: min(100%, 56rem); justify-self: center; }
.marketing-collage {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--thin-space-xs);
}
.marketing-collage img {
inline-size: 100%;
block-size: 100%;
min-block-size: 0;
object-fit: cover;
border-radius: var(--thin-radius-s);
}
.marketing-collage img:first-child { grid-row: span 2; }
.marketing-art {
display: grid;
place-items: center;
grid-template-columns: repeat(3, 1fr);
gap: 6%;
min-block-size: clamp(6rem, 25cqi, 16rem);
padding: 10%;
border-radius: var(--thin-radius-m);
background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
}
.marketing-art i {
inline-size: 100%;
aspect-ratio: 1;
border: .2rem solid currentColor;
border-radius: 50% 50% 12% 50%;
color: var(--thin-color-accent);
background: color-mix(in oklch, currentColor 18%, transparent);
}
.marketing-art i:nth-child(2) { border-radius: 16%; translate: 0 -18%; }
.marketing-art i:nth-child(3) { border-radius: 50%; translate: 0 18%; }
.marketing-board {
padding: var(--thin-space-m);
border: 1px solid var(--thin-color-border);
border-block-start-width: .75rem;
border-radius: var(--thin-radius-m);
background: var(--thin-color-surface-raised);
}
.marketing-device { border-width: .65rem; }
.marketing-board figcaption { margin: 0; font-weight: 700; }
.marketing-board .thin-box { background: var(--thin-color-surface); }
.marketing-code > figcaption { margin-block-end: var(--thin-space-xs); }
.marketing-code pre { margin-block: 0; }
.marketing-marks {
align-items: stretch;
text-align: center;
}
.marketing-marks > li {
display: grid;
place-items: center;
min-block-size: 3rem;
padding: var(--thin-space-xs);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-s);
font-family: var(--thin-font-display);
}
[data-treatment~="plain"] .marketing-marks > li { border-color: transparent; }
[data-treatment~="tiles"] .marketing-marks > li { background: var(--thin-color-surface-raised); }
.marketing-service-mark { font-weight: 750; }
.marketing-metrics dd { margin: 0; color: var(--thin-color-accent); font-size: var(--thin-text-1); font-weight: 720; }
.marketing-form {
inline-size: min(100%, 36rem);
text-align: start;
}
.marketing-form p { font-size: .9em; }
.marketing-form-fields {
display: grid;
gap: var(--thin-space-xs);
align-items: end;
}
.marketing-form-fields > * { min-inline-size: 0; }
:is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields {
display: flex;
flex-wrap: wrap;
}
:is(.marketing-form[data-form-layout="inline"], .marketing-search) .marketing-form-fields > :is(.thin-field, input) {
flex: 1 1 12rem;
inline-size: auto;
}
.marketing-search { inline-size: min(100%, 40rem); text-align: start; }
.marketing-collection > * { min-inline-size: 0; }
.marketing-card {
block-size: 100%;
padding: var(--thin-space-m);
border: 1px solid var(--thin-color-border);
border-radius: var(--thin-radius-m);
background: var(--thin-color-surface-raised);
}
[data-treatment~="plain"] .marketing-card {
border-color: transparent;
background: transparent;
}
[data-treatment~="accent"] .marketing-card { border-block-start: .25rem solid var(--thin-color-accent); }
.marketing-card > img {
inline-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--thin-radius-s);
}
.marketing-mark,
.marketing-person-mark {
display: inline-grid;
place-items: center;
inline-size: 2.6em;
aspect-ratio: 1;
border-radius: 50%;
color: var(--thin-color-accent);
background: color-mix(in oklch, var(--thin-color-accent) 14%, var(--thin-color-surface-raised));
font-weight: 750;
}
.marketing-member { display: grid; align-content: start; gap: var(--thin-space-s); }
.marketing-member > img { aspect-ratio: 1; }
[data-treatment~="compact"] .marketing-member { grid-template-columns: auto minmax(0, 1fr); }
.marketing-quotation { max-inline-size: 62ch; }
[data-composition="center"] > .marketing-quotation { text-align: center; justify-self: center; }
[data-composition="center"] > .marketing-quotation .marketing-attribution { justify-content: center; }
.marketing-quotation blockquote { border: 0; padding: 0; color: var(--thin-color-text); font-size: var(--thin-text-1); }
.marketing-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--thin-space-xs); }
.marketing-questions { inline-size: 100%; text-align: start; }
.marketing-questions[data-questions="grid"] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
align-items: start;
}
.marketing-answers { display: grid; gap: var(--thin-space-s); }
.marketing-questions details > p { margin-block-start: var(--thin-space-xs); }
[data-treatment~="plain"] .marketing-questions details { background: transparent; }
[data-treatment~="accent"] .marketing-questions details { border-inline: 0; border-block-start: 0; border-radius: 0; }
.marketing-offers { min-inline-size: 0; }
.marketing-offers fieldset { justify-self: start; }
.marketing-yearly { display: none; }
.marketing-offers:has(input[value="yearly"]:checked) .marketing-monthly { display: none; }
.marketing-offers:has(input[value="yearly"]:checked) .marketing-yearly { display: inline; }
.marketing-offers .thin-price small { font-size: .55em; }
.marketing-plan-title small { color: var(--thin-color-accent); font-weight: 700; }
.marketing-offers [data-composition="stack"] .thin-pricing { grid-template-columns: minmax(0, 1fr); }
[data-treatment~="accent"] .marketing-offers .thin-price-card { border-block-start: .3rem solid var(--thin-color-accent); }
.marketing-foot [data-composition="grid"] {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.marketing-foot [data-composition="center"] {
justify-items: center;
text-align: center;
}
.marketing-foot nav > ul { margin-block-start: var(--thin-space-xs); }
.marketing-foot [data-composition="grid"] nav > ul { display: grid; }
.marketing-foot > small { border-block-start: 1px solid var(--thin-color-border); padding-block-start: var(--thin-space-s); }
@container marketing-specimen (inline-size >= 46rem) {
.marketing-stories > [data-lead] { grid-column: span 2; }
.marketing-nav[data-nav="brand-middle"] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.marketing-nav[data-nav="brand-middle"] .marketing-nav-actions { justify-self: end; }
}
@media (forced-colors: active) {
.marketing-backdrop { display: none; }
.marketing-specimen, .marketing-card, .marketing-panel { background: Canvas; color: CanvasText; }
.marketing-kicker, .marketing-display em { color: CanvasText; }
}
}