Calls to action
35 examples. Use Compact to see how the same HTML reflows.
Centered two-action invitation
A bounded measure and wrapping actions keep the composition centered.
Start with one good page
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="call-to-actions">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-01-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-01-headline">Start with one good page</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></div>
</section>
</div>
</div>Copy and an end-aligned action
Groups wrap by content while preserving their reading order.
Give your team room to work
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="call-to-actions" data-treatment="compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-02-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-02-headline">Give your team room to work</h3>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div></div>
</section>
</div>
</div>Editorial invitation and one action
Groups wrap by content while preserving their reading order.
Next steps
Take your next idea a step further
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="call-to-actions" data-treatment="label compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-03-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-03-headline">Take your next idea a step further</h3>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div></div>
</section>
</div>
</div>Compact illustrated trial band
Groups wrap by content while preserving their reading order.
Try a simpler starting point
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="call-to-actions" data-treatment="art compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-04-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-04-headline">Try a simpler starting point</h3>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div>
</section>
</div>
</div>Gradient infrastructure band
The tracks sit side by side when their container has room and stack in source order when it narrows.
Make your infrastructure easier to use
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="call-to-actions" data-treatment="art compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-05-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-05-headline">Make your infrastructure easier to use</h3>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div>
</div><div class="marketing-art" aria-hidden="true"><i></i><i></i><i></i></div></div>
</section>
</div>
</div>Violet call to action above a dashboard
The introduction keeps its measure while the supporting content can use the wider track.
See how it works in practice
Choose a starting point and give your next project a clear path forward.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="call-to-actions" data-treatment="board">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-06-headline">
<div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-06-headline">See how it works in practice</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Dark statement and action beneath a rule
Text measure and logical spacing control the reading rhythm.
Build something worth sharing
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="accent">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-07-headline">
<div class="marketing-composition" data-composition="editorial"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-07-headline">Build something <em>worth sharing</em></h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></div>
</section>
</div>
</div>Violet one-action band
Groups wrap by content while preserving their reading order.
Next steps
Ready to try a better workflow?
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="call-to-actions" data-treatment="pill">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-08-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-08-headline">Ready to try a better workflow?</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div></div>
</section>
</div>
</div>Landscape-backed invitation
Groups wrap by content while preserving their reading order.
Make your next project your own
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="landscape compact">
<div class="marketing-section">
<section class="marketing-stage" aria-labelledby="marketing-call-to-actions-09-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-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-09-headline">Make your next project your own</h3>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div></div>
</section>
</div>
</div>Centered email access
A bounded measure and wrapping actions keep the composition centered.
Get early access
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="call-to-actions" data-treatment="signup accent">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-10-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-10-headline">Get early access</h3>
<p>Choose a starting point and give your next project a clear path forward.</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="call-to-actions:10">
<p id="marketing-call-to-actions-10-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-call-to-actions-10-email">Email address</label>
<input class="thin-input" id="marketing-call-to-actions-10-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-call-to-actions-10-form-hint">
</div>
<button class="thin-button" type="submit">Try newsletter signup</button>
</div>
</form>
</div></div>
</section>
</div>
</div>Inset dark upgrade panel
Groups wrap by content while preserving their reading order.
Ready for the next step?
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="panel accent">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-11-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-11-headline">Ready for the <em>next step?</em></h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div></div>
</section>
</div>
</div>Gradient inset call to action
Groups wrap by content while preserving their reading order.
Keep the conversation going
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="gradient" data-category="call-to-actions" data-treatment="panel">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-12-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-12-headline">Keep the conversation going</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div></div>
</section>
</div>
</div>Centered next steps with two actions
A bounded measure and wrapping actions keep the composition centered.
Getting started can be simple
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="call-to-actions" data-treatment="accent compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-13-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-13-headline">Getting started can <em>be simple</em></h3>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div>
</div></div>
</section>
</div>
</div>Product preview inside a green action panel
The tracks sit side by side when their container has room and stack in source order when it narrows.
See what you can build in two weeks
Choose a starting point and give your next project a clear path forward.
- 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="call-to-actions" data-treatment="board panel">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-14-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-14-headline">See what you can build in two weeks</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Dark device showcase
The introduction keeps its measure while the supporting content can use the wider track.
A closer look at the details
Choose a starting point and give your next project a clear path forward.
- 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="call-to-actions" data-treatment="device">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-15-headline">
<div class="marketing-composition" data-composition="showcase"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-15-headline">A closer look at the details</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Device before a dark product offer
Media and copy follow their authored sequence as the tracks stack.
- Planned
Collect references
- In progress
Draft the story
- Ready
Review the layout
Explore a design that fits
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="device panel">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-16-headline">
<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-call-to-actions-16-headline">Explore a design that fits</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></div>
</section>
</div>
</div>Portrait and testimonial invitation
The tracks sit side by side when their container has room and stack in source order when it narrows.
Give your team a better starting point
Choose a starting point and give your next project a clear path forward.
“We can change the number of stories without redesigning the page.”
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="call-to-actions" data-treatment="portrait support panel">
<div class="marketing-section">
<section class="marketing-panel" aria-labelledby="marketing-call-to-actions-17-headline">
<div class="marketing-composition" data-composition="split"><div class="thin-stack"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-17-headline">Give your team a better starting point</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div><figure class="marketing-quotation thin-stack"><blockquote><p>“We can change the number of stories without redesigning the page.”</p></blockquote><figcaption>Sample quote · Editorial team</figcaption></figure></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>
</section>
</div>
</div>Dark centered offer with a price eyebrow
A bounded measure and wrapping actions keep the composition centered.
Next steps
Find a design that works for you
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="label">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-18-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-18-headline">Find a design that works for you</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></div>
</section>
</div>
</div>Floating invitation over an accent band
Groups wrap by content while preserving their reading order.
Meet a more flexible design system
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="call-to-actions" data-treatment="panel light">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-19-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-19-headline">Meet a more flexible design system</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div></div>
</section>
</div>
</div>Dark copy and workspace photograph
The tracks sit side by side when their container has room and stack in source order when it narrows.
Start building today
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="photo panel">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-20-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-20-headline">Start building today</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Full-width announcement ribbon
Groups wrap by content while preserving their reading order.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="blue" data-category="call-to-actions" data-treatment="announcement compact">
<div class="marketing-section">
<aside class="marketing-notice thin-cluster" aria-label="Release announcement"><p>New field edition available</p><a href="/guides/marketing-site/">Read the guide</a><a href="/patterns/marketing/examples/">Browse the collection</a></aside>
</div>
</div>Inset announcement ribbon
Groups wrap by content while preserving their reading order.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="violet" data-category="call-to-actions" data-treatment="announcement compact panel">
<div class="marketing-section">
<div class="marketing-notice-inset"><aside class="marketing-notice thin-cluster" aria-label="Release announcement"><p>New field edition available</p><a href="/guides/marketing-site/">Read the guide</a></aside></div>
</div>
</div>Dark split action with accent geometry
Groups wrap by content while preserving their reading order.
Next steps
Make space for your next idea
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="accent pill">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-23-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-23-headline">Make space for your <em>next idea</em></h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div></div>
</section>
</div>
</div>Outlined illustrated action panel
The tracks sit side by side when their container has room and stack in source order when it narrows.
Bring your application to life
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="call-to-actions" data-treatment="panel art">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-24-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-24-headline">Bring your application to life</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Product feature and design preview
The tracks sit side by side when their container has room and stack in source order when it narrows.
Next steps
See a project come together
Choose a starting point and give your next project a clear path forward.
- 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="call-to-actions" data-treatment="board label">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-25-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-25-headline">See a project come together</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Illustrated invitation inside a panel
The tracks sit side by side when their container has room and stack in source order when it narrows.
Next steps
Start your story
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="call-to-actions" data-treatment="art panel pill">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-26-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-26-headline">Start your story</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</section>
</div>
</div>Centered community invitation
A bounded measure and wrapping actions keep the composition centered.
Next steps
Join the Fieldwork community
Choose a starting point and give your next project a clear path forward.
- Sample projects
- 128
- Sample editions
- 24
- Contributors
- 16
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="call-to-actions" data-treatment="metrics label">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-27-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-27-headline">Join the Fieldwork community</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></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>
</section>
</div>
</div>Travel offer with an overlapping card
The introduction keeps its measure while the supporting content can use the wider track.
Make a plan for your next adventure
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="call-to-actions" data-treatment="landscape panel">
<div class="marketing-section">
<section class="marketing-travel" aria-labelledby="marketing-call-to-actions-28-headline">
<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 class="marketing-panel"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-28-headline">Make a plan for your next adventure</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></div>
</section>
</div>
</div>Centered newsletter signup
A bounded measure and wrapping actions keep the composition centered.
Next steps
Get the next Fieldwork edition
Choose a starting point and give your next project a clear path forward.
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="call-to-actions" data-treatment="signup label">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-29-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-29-headline">Get the next Fieldwork edition</h3>
<p>Choose a starting point and give your next project a clear path forward.</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="call-to-actions:29">
<p id="marketing-call-to-actions-29-form-hint">Demo only. Use sample information.</p>
<div class="marketing-form-fields">
<div class="thin-field">
<label for="marketing-call-to-actions-29-email">Email address</label>
<input class="thin-input" id="marketing-call-to-actions-29-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="marketing-call-to-actions-29-form-hint">
</div>
<button class="thin-button" type="submit">Try newsletter signup</button>
</div>
</form>
</div></div>
</section>
</div>
</div>Compact centered trial
A bounded measure and wrapping actions keep the composition centered.
Try your first page today
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="call-to-actions" data-treatment="compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-30-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-30-headline">Try your first page today</h3>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div>
</div></div>
</section>
</div>
</div>Community marks and two actions
A bounded measure and wrapping actions keep the composition centered.
Next steps
Build your first project
Choose a starting point and give your next project a clear path forward.
- Fieldwork
- Relay
- Northline
- Afterlight
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="call-to-actions" data-treatment="logos pill">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-31-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<p class="marketing-kicker">Next steps</p>
<h3 class="marketing-display" id="marketing-call-to-actions-31-headline">Build your first project</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></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></ul>
</section>
</div>
</div>Compact bordered action strip
Groups wrap by content while preserving their reading order.
See what we’re making
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="call-to-actions" data-treatment="panel compact">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-32-headline">
<div class="marketing-composition" data-composition="band"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-32-headline">See what we’re making</h3>
</div><div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div></div>
</section>
</div>
</div>Warm centered feature invitation
A bounded measure and wrapping actions keep the composition centered.
Find the features you’ll use
View HTML
<div class="marketing-specimen" data-theme="neutral" data-tone="amber" data-category="call-to-actions" data-treatment="light compact">
<div class="marketing-section">
<section class="marketing-cta" aria-labelledby="marketing-call-to-actions-33-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-33-headline">Find the features you’ll use</h3>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Try it</a></div>
</div></div>
</section>
</div>
</div>Dark gradient editor offer with partner marks
A bounded measure and wrapping actions keep the composition centered.
Make writing and publishing easier
Choose a starting point and give your next project a clear path forward.
- Fieldwork
- Relay
- Northline
- Afterlight
View HTML
<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="call-to-actions" data-treatment="panel accent logos">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-34-headline">
<div class="marketing-composition" data-composition="center"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-34-headline">Make writing and <em>publishing easier</em></h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</a><a href="/guides/marketing-site/">Learn more</a></div>
</div></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></ul>
</section>
</div>
</div>Inset device preview beside an invitation
The tracks sit side by side when their container has room and stack in source order when it narrows.
See how your page feels on a smaller screen
Choose a starting point and give your next project a clear path forward.
- 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="call-to-actions" data-treatment="device panel">
<div class="marketing-section">
<section class="marketing-cta marketing-panel" aria-labelledby="marketing-call-to-actions-35-headline">
<div class="marketing-composition" data-composition="split"><div class="marketing-intro thin-stack" data-space="s">
<h3 class="marketing-display" id="marketing-call-to-actions-35-headline">See how your page feels on a smaller screen</h3>
<p>Choose a starting point and give your next project a clear path forward.</p>
<div class="thin-cluster marketing-actions"><a href="/guides/marketing-site/" class="thin-button">Explore the guide</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>
</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; }
}
}