<div><span class="lbl">Fluid type, balanced headline, @property gradients and a scroll-driven fade</span>
<section class="mc mc-fluid" aria-labelledby="mc-fluid-title">
<div>
<p class="mc-eyebrow">Tessera design tokens</p>
<h1 class="mc-title" id="mc-fluid-title">One source of truth for <span class="mc-sweep">every colour, space and size</span></h1>
<p class="mc-sub">Tessera keeps your design tokens in one place and ships them to CSS, iOS, Android and Figma on every merge, so the button in the app finally matches the button in the mockup.</p>
<div class="mc-ctas"><a class="mc-ring" href="#">Start free</a><a class="mc-ghost" href="#">Read the docs <span aria-hidden="true">→</span></a></div>
<p class="mc-support">Exports to <code>tokens.css</code>, Swift, Kotlin and Figma variables</p>
</div>
<ul class="mc-tokens mc-scrollfade" aria-label="Example tokens">
<li class="mc-token"><i aria-hidden="true"></i>--color-brand<span>#4338CA</span></li>
<li class="mc-token"><i aria-hidden="true"></i>--space-4<span>16px</span></li>
<li class="mc-token"><i aria-hidden="true"></i>--radius-lg<span>14px</span></li>
</ul>
</section></div>
<div><span class="lbl">Container query hero, shown in a wide and a narrow slot</span>
<div class="slots">
<div class="mc-slot">
<section class="mc mc-cq" aria-labelledby="mc-cq-wide">
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80" alt="A two-lane road winding between red rock canyon walls" width="1000" height="625">
<div class="mc-cq-body">
<p class="mc-eyebrow">Summit Trails · Spring 2027</p>
<h2 class="mc-cq-title" id="mc-cq-wide">Seven days on the canyon roads</h2>
<p class="mc-cq-sub">A guided self-drive with hand-picked lodges, a route that avoids the coach crowds and a guide one call away.</p>
<ul class="mc-facts"><li>7 nights</li><li>1,140 km</li><li>From £1,890</li></ul>
<div class="mc-ctas"><a class="mc-ring" href="#">See the route</a><a class="mc-ghost" href="#">Dates</a></div>
</div>
</section>
</div>
<div class="mc-slot">
<section class="mc mc-cq" aria-labelledby="mc-cq-narrow">
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80" alt="A two-lane road winding between red rock canyon walls" width="1000" height="625">
<div class="mc-cq-body">
<p class="mc-eyebrow">Summit Trails · Spring 2027</p>
<h2 class="mc-cq-title" id="mc-cq-narrow">Seven days on the canyon roads</h2>
<p class="mc-cq-sub">A guided self-drive with hand-picked lodges, a route that avoids the coach crowds and a guide one call away.</p>
<ul class="mc-facts"><li>7 nights</li><li>1,140 km</li><li>From £1,890</li></ul>
<div class="mc-ctas"><a class="mc-ring" href="#">See the route</a><a class="mc-ghost" href="#">Dates</a></div>
</div>
</section>
</div>
</div></div>
CSS
/* Modern CSS heroes, no JavaScript:
- clamp() fluid type and spacing, text-wrap: balance on headings and pretty on body copy;
- @property registers --mc-sweep and --mc-turn as typed values so a gradient can animate: the headline gradient
sweeps once on load and the main button's ring turns while it is hovered or focused;
- a scroll-driven animation (animation-timeline: view()) fades the product visual out as the hero leaves the
screen, inside @supports so other browsers simply show it;
- the second hero is a container-query component: it lays itself out by the width of its slot, not the window. */
@property --mc-sweep{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --mc-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
.mc{--mc-ink:#111827;--mc-muted:#4b5563;--mc-bg:#fafaf9;--mc-a1:#4338ca;--mc-a2:#7c3aed;--mc-a3:#c2410c;--mc-radius:28px;
position:relative;overflow:hidden;border-radius:var(--mc-radius);background:var(--mc-bg);color:var(--mc-ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.mc :where(h1,h2,p,ul,figure){margin:0;padding:0}
.mc a{color:inherit;text-decoration:none}
.mc a:focus-visible{outline:3px solid var(--mc-a1);outline-offset:4px;border-radius:12px}
/* 1. fluid + balanced + @property + scroll-driven */
.mc-fluid{display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:clamp(28px,5vw,64px);padding:clamp(36px,6vw,80px) clamp(22px,5vw,64px);
background:radial-gradient(50% 60% at 100% 0%,#ede9fe,transparent 70%),radial-gradient(40% 50% at 0% 100%,#ffedd5,transparent 70%),var(--mc-bg)}
.mc-eyebrow{font-size:clamp(.74rem,.7rem + .2vw,.84rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mc-a2)}
.mc-title{margin-top:clamp(12px,2vw,20px);font-size:clamp(2.3rem,1.3rem + 4.2vw,4.6rem);line-height:1.02;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.mc-sweep{color:var(--mc-a1);background:linear-gradient(90deg,var(--mc-a1),var(--mc-a2),var(--mc-a3),var(--mc-a1)) var(--mc-sweep) 0/300% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mc-sweep 2.4s ease-out .3s 1 both}
@keyframes mc-sweep{from{--mc-sweep:100%}to{--mc-sweep:0%}}
.mc-sub{margin-top:clamp(14px,2vw,22px);max-width:56ch;font-size:clamp(1rem,.95rem + .3vw,1.16rem);color:var(--mc-muted);text-wrap:pretty}
.mc-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.mc-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:14px;border:2px solid transparent;
background:linear-gradient(var(--mc-ink),var(--mc-ink)) padding-box,conic-gradient(from var(--mc-turn),var(--mc-a1),var(--mc-a2),var(--mc-a3),var(--mc-a1)) border-box;
color:#fff;font-weight:700}
.mc .mc-ring{color:#fff}
.mc-ring:hover,.mc-ring:focus-visible{animation:mc-turn 2.2s linear infinite}
@keyframes mc-turn{to{--mc-turn:360deg}}
.mc-ghost{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border-radius:14px;border:2px solid #d1d5db;font-weight:700;transition:border-color .2s}
.mc-ghost:hover{border-color:var(--mc-ink)}
.mc-support{margin-top:22px;font-size:.84rem;color:var(--mc-muted)}
.mc-support code{padding:2px 6px;border-radius:6px;background:#f1f0ee;font-size:.82rem;color:var(--mc-ink)}
.mc-tokens{display:grid;gap:12px}
.mc-token{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid #e7e5e4;border-radius:16px;background:#fff;
box-shadow:0 20px 40px -28px rgba(17,24,39,.4);font:500 .86rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mc-token:nth-child(2){margin-left:clamp(0px,4vw,40px)}
.mc-token:nth-child(3){margin-left:clamp(0px,8vw,80px)}
.mc-token span{color:var(--mc-muted)}
.mc-token i{width:38px;height:38px;border-radius:10px}
.mc-token:nth-child(1) i{background:linear-gradient(135deg,var(--mc-a1),var(--mc-a2))}
.mc-token:nth-child(2) i{background:repeating-linear-gradient(90deg,#c7d2fe 0 4px,transparent 4px 8px);border:2px dashed #818cf8}
.mc-token:nth-child(3) i{border:2px solid var(--mc-a3);border-radius:14px 4px}
@supports (animation-timeline:view()){
.mc-scrollfade{animation:mc-leave linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
@keyframes mc-leave{to{opacity:0;transform:translateY(-40px) scale(.96)}}
}
/* 2. container query hero */
.mc-slot{container:mc-slot / inline-size}
.mc-cq{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid #e5e7eb;--mc-radius:24px}
.mc-cq img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mc-cq-body{padding:clamp(18px,6cqi,48px)}
.mc-cq .mc-eyebrow{color:#9a3412}
.mc-cq-title{margin-top:10px;font-size:clamp(1.6rem,4.6cqi,2.9rem);line-height:1.05;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.mc-cq-sub{margin-top:12px;font-size:clamp(.95rem,1.8cqi,1.1rem);color:var(--mc-muted);text-wrap:pretty}
.mc-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;list-style:none;font-size:.86rem;font-weight:600}
.mc-facts li{display:flex;align-items:center;gap:6px}
.mc-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:#c2410c}
.mc-cq .mc-ctas{margin-top:22px}
.mc-cq .mc-ring{--mc-ink:#7c2d12;background:linear-gradient(#7c2d12,#7c2d12) padding-box,conic-gradient(from var(--mc-turn),#fb923c,#c2410c,#fde68a,#fb923c) border-box}
.mc-cq .mc-ring,.mc-cq .mc-ghost{flex:1 1 auto}
.mc-cq a:focus-visible{outline-color:#9a3412}
@container mc-slot (min-width:560px){
.mc-cq{grid-template-columns:1fr 1fr}
.mc-cq img{height:0;min-height:100%;aspect-ratio:auto;order:2}
.mc-cq-body{align-self:center}
.mc-cq .mc-ring,.mc-cq .mc-ghost{flex:0 1 auto}
}
@container mc-slot (min-width:760px){
.mc-cq{grid-template-columns:3fr 2fr}
}
@media (max-width:991px){
.mc-fluid{grid-template-columns:1fr}
}
@media (max-width:480px){
.mc-fluid .mc-ring,.mc-fluid .mc-ghost{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.mc *{transition:none!important}
.mc-sweep,.mc-ring:hover,.mc-ring:focus-visible,.mc-scrollfade{animation:none}
}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Fluid type, balanced headline, @property gradients and a scroll-driven fade</span>
<section class="mc mc-fluid row align-items-center" aria-labelledby="mc-fluid-title">
<div class="col-lg-7">
<p class="mc-eyebrow">Tessera design tokens</p>
<h1 class="mc-title" id="mc-fluid-title">One source of truth for <span class="mc-sweep">every colour, space and size</span></h1>
<p class="mc-sub">Tessera keeps your design tokens in one place and ships them to CSS, iOS, Android and Figma on every merge, so the button in the app finally matches the button in the mockup.</p>
<div class="mc-ctas d-flex flex-wrap"><a class="btn mc-btn mc-ring" href="#">Start free</a><a class="btn mc-btn mc-ghost" href="#">Read the docs <span aria-hidden="true">→</span></a></div>
<p class="mc-support">Exports to <code>tokens.css</code>, Swift, Kotlin and Figma variables</p>
</div>
<div class="col-lg-5">
<ul class="mc-tokens mc-scrollfade list-unstyled d-grid m-0" aria-label="Example tokens">
<li class="mc-token"><i aria-hidden="true"></i>--color-brand<span>#4338CA</span></li>
<li class="mc-token"><i aria-hidden="true"></i>--space-4<span>16px</span></li>
<li class="mc-token"><i aria-hidden="true"></i>--radius-lg<span>14px</span></li>
</ul>
</div>
</section></div>
<div><span class="lbl">Container query hero, shown in a wide and a narrow slot</span>
<div class="slots">
<div class="mc-slot">
<section class="mc mc-cq card" aria-labelledby="mcb-cq-wide">
<img class="card-img-top" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80" alt="A two-lane road winding between red rock canyon walls" width="1000" height="625">
<div class="card-body">
<p class="mc-eyebrow">Summit Trails · Spring 2027</p>
<h2 class="mc-cq-title" id="mcb-cq-wide">Seven days on the canyon roads</h2>
<p class="mc-cq-sub">A guided self-drive with hand-picked lodges, a route that avoids the coach crowds and a guide one call away.</p>
<ul class="mc-facts list-unstyled d-flex flex-wrap"><li>7 nights</li><li>1,140 km</li><li>From £1,890</li></ul>
<div class="mc-ctas d-flex flex-wrap"><a class="btn mc-btn mc-ring" href="#">See the route</a><a class="btn mc-btn mc-ghost" href="#">Dates</a></div>
</div>
</section>
</div>
<div class="mc-slot">
<section class="mc mc-cq card" aria-labelledby="mcb-cq-narrow">
<img class="card-img-top" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80" alt="A two-lane road winding between red rock canyon walls" width="1000" height="625">
<div class="card-body">
<p class="mc-eyebrow">Summit Trails · Spring 2027</p>
<h2 class="mc-cq-title" id="mcb-cq-narrow">Seven days on the canyon roads</h2>
<p class="mc-cq-sub">A guided self-drive with hand-picked lodges, a route that avoids the coach crowds and a guide one call away.</p>
<ul class="mc-facts list-unstyled d-flex flex-wrap"><li>7 nights</li><li>1,140 km</li><li>From £1,890</li></ul>
<div class="mc-ctas d-flex flex-wrap"><a class="btn mc-btn mc-ring" href="#">See the route</a><a class="btn mc-btn mc-ghost" href="#">Dates</a></div>
</div>
</section>
</div>
</div></div>
CSS
/* Modern CSS heroes in Bootstrap 5: the grid, .btn, .card and .list-unstyled, plus what Bootstrap has no utility for:
clamp() fluid type, text-wrap: balance, @property gradient animation, a scroll-driven fade inside @supports and a
container-query card that lays itself out by the width of its slot. No JavaScript. */
@property --mc-sweep{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --mc-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
.mc{--mc-ink:#111827;--mc-muted:#4b5563;--mc-bg:#fafaf9;--mc-a1:#4338ca;--mc-a2:#7c3aed;--mc-a3:#c2410c;--mc-radius:28px;
position:relative;overflow:hidden;border-radius:var(--mc-radius);background:var(--mc-bg);color:var(--mc-ink)}
.mc :where(h1,h2,p,ul){margin:0}
.mc a:focus-visible{outline:3px solid var(--mc-a1);outline-offset:4px;border-radius:12px;box-shadow:none}
.mc-fluid{--bs-gutter-x:clamp(28px,5vw,64px);--bs-gutter-y:0;row-gap:clamp(28px,5vw,64px);margin:0;padding:clamp(36px,6vw,80px) calc(clamp(22px,5vw,64px) - var(--bs-gutter-x)/2);
background:radial-gradient(50% 60% at 100% 0%,#ede9fe,transparent 70%),radial-gradient(40% 50% at 0% 100%,#ffedd5,transparent 70%),var(--mc-bg)}
.mc-eyebrow{font-size:clamp(.74rem,.7rem + .2vw,.84rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mc-a2)}
.mc-title{margin-top:clamp(12px,2vw,20px)!important;font-size:clamp(2.3rem,1.3rem + 4.2vw,4.6rem);line-height:1.02;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.mc-sweep{color:var(--mc-a1);background:linear-gradient(90deg,var(--mc-a1),var(--mc-a2),var(--mc-a3),var(--mc-a1)) var(--mc-sweep) 0/300% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mc-sweep 2.4s ease-out .3s 1 both}
@keyframes mc-sweep{from{--mc-sweep:100%}to{--mc-sweep:0%}}
.mc-sub{margin-top:clamp(14px,2vw,22px)!important;max-width:56ch;font-size:clamp(1rem,.95rem + .3vw,1.16rem);color:var(--mc-muted);text-wrap:pretty}
.mc-ctas{gap:12px;margin-top:clamp(24px,3vw,36px)}
.mc-btn{--bs-btn-padding-x:24px;--bs-btn-font-weight:700;--bs-btn-border-radius:14px;--bs-btn-border-width:2px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px}
.mc-ring{--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;
background:linear-gradient(var(--mc-ink),var(--mc-ink)) padding-box,conic-gradient(from var(--mc-turn),var(--mc-a1),var(--mc-a2),var(--mc-a3),var(--mc-a1)) border-box}
.mc-ring:hover,.mc-ring:focus-visible,.mc-ring:active{background:linear-gradient(var(--mc-ink),var(--mc-ink)) padding-box,conic-gradient(from var(--mc-turn),var(--mc-a1),var(--mc-a2),var(--mc-a3),var(--mc-a1)) border-box;animation:mc-turn 2.2s linear infinite}
@keyframes mc-turn{to{--mc-turn:360deg}}
.mc-ghost{--bs-btn-color:var(--mc-ink);--bs-btn-border-color:#d1d5db;--bs-btn-hover-color:var(--mc-ink);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--mc-ink);--bs-btn-active-color:var(--mc-ink);--bs-btn-active-border-color:var(--mc-ink);transition:border-color .2s}
.mc-support{margin-top:22px!important;font-size:.84rem;color:var(--mc-muted)}
.mc-support code{padding:2px 6px;border-radius:6px;background:#f1f0ee;font-size:.82rem;color:var(--mc-ink)}
.mc-tokens{gap:12px}
.mc-token{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid #e7e5e4;border-radius:16px;background:#fff;
box-shadow:0 20px 40px -28px rgba(17,24,39,.4);font:500 .86rem/1.4 var(--bs-font-monospace)}
.mc-token:nth-child(2){margin-left:clamp(0px,4vw,40px)}
.mc-token:nth-child(3){margin-left:clamp(0px,8vw,80px)}
.mc-token span{color:var(--mc-muted)}
.mc-token i{width:38px;height:38px;border-radius:10px}
.mc-token:nth-child(1) i{background:linear-gradient(135deg,var(--mc-a1),var(--mc-a2))}
.mc-token:nth-child(2) i{background:repeating-linear-gradient(90deg,#c7d2fe 0 4px,transparent 4px 8px);border:2px dashed #818cf8}
.mc-token:nth-child(3) i{border:2px solid var(--mc-a3);border-radius:14px 4px}
@supports (animation-timeline:view()){
.mc-scrollfade{animation:mc-leave linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
@keyframes mc-leave{to{opacity:0;transform:translateY(-40px) scale(.96)}}
}
.mc-slot{container:mc-slot / inline-size}
.mc-cq{--bs-card-border-color:#e5e7eb;--bs-card-border-radius:24px;--bs-card-inner-border-radius:23px;--bs-card-bg:#fff;--mc-radius:24px;background:#fff;display:grid;grid-template-columns:1fr}
.mc-cq .card-img-top{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mc-cq .card-body{padding:clamp(18px,6cqi,48px)}
.mc-cq .mc-eyebrow{color:#9a3412}
.mc-cq-title{margin-top:10px!important;font-size:clamp(1.6rem,4.6cqi,2.9rem);line-height:1.05;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.mc-cq-sub{margin-top:12px!important;font-size:clamp(.95rem,1.8cqi,1.1rem);color:var(--mc-muted);text-wrap:pretty}
.mc-facts{gap:6px 16px;margin-top:16px!important;font-size:.86rem;font-weight:600}
.mc-facts li{display:flex;align-items:center;gap:6px}
.mc-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:#c2410c}
.mc-cq .mc-ctas{margin-top:22px}
.mc-cq .mc-ring{--mc-ink:#7c2d12;--mc-a1:#fb923c;--mc-a2:#c2410c;--mc-a3:#fde68a}
.mc-cq .mc-btn{flex:1 1 auto}
.mc-cq a:focus-visible{outline-color:#9a3412}
@container mc-slot (min-width:560px){
.mc-cq{grid-template-columns:1fr 1fr}
.mc-cq .card-img-top{height:0;min-height:100%;aspect-ratio:auto;order:2;border-radius:0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0}
.mc-cq .card-body{align-self:center}
.mc-cq .mc-btn{flex:0 1 auto}
}
@container mc-slot (min-width:760px){.mc-cq{grid-template-columns:3fr 2fr}}
@media (max-width:991.98px){.mc-fluid{--bs-gutter-x:0;padding:clamp(36px,6vw,80px) clamp(22px,5vw,64px)}}
@media (max-width:480px){.mc-fluid .mc-btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){
.mc *{transition:none!important}
.mc-sweep,.mc-ring:hover,.mc-ring:focus-visible,.mc-ring:active,.mc-scrollfade{animation:none}
}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Fluid type, balanced headline, @property gradients and a scroll-driven fade</span>
<section class="grid grid-cols-1 items-center gap-[clamp(28px,5vw,64px)] overflow-hidden rounded-[28px] [background:radial-gradient(50%_60%_at_100%_0%,#ede9fe,transparent_70%),radial-gradient(40%_50%_at_0%_100%,#ffedd5,transparent_70%),#fafaf9] px-[clamp(22px,5vw,64px)] py-[clamp(36px,6vw,80px)] leading-normal text-[#111827] min-[992px]:grid-cols-[7fr_5fr]" aria-labelledby="mc-fluid-title">
<div>
<p class="text-[clamp(.74rem,.7rem+.2vw,.84rem)] font-bold tracking-[.14em] text-[#7c3aed] uppercase">Tessera design tokens</p>
<h1 class="mt-[clamp(12px,2vw,20px)] text-[clamp(2.3rem,1.3rem+4.2vw,4.6rem)] leading-[1.02] font-extrabold tracking-[-.04em] text-balance" id="mc-fluid-title">One source of truth for <span class="bg-[linear-gradient(90deg,#4338ca,#7c3aed,#c2410c,#4338ca)] bg-size-[300%_100%] [background-position:var(--mc-sweep)_0] bg-clip-text text-[#4338ca] [-webkit-text-fill-color:transparent] motion-safe:animate-sweep">every colour, space and size</span></h1>
<p class="mt-[clamp(14px,2vw,22px)] max-w-[56ch] text-[clamp(1rem,.95rem+.3vw,1.16rem)] text-pretty text-[#4b5563]">Tessera keeps your design tokens in one place and ships them to CSS, iOS, Android and Figma on every merge, so the button in the app finally matches the button in the mockup.</p>
<div class="mt-[clamp(24px,3vw,36px)] flex flex-wrap gap-3"><a class="inline-flex min-h-[52px] items-center justify-center rounded-[14px] border-2 border-transparent [background:linear-gradient(#111827,#111827)_padding-box,conic-gradient(from_var(--mc-turn),#4338ca,#7c3aed,#c2410c,#4338ca)_border-box] px-[26px] font-bold text-white focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#4338ca] motion-safe:hover:animate-turn motion-safe:focus-visible:animate-turn max-[480px]:flex-[1_1_100%]" href="#">Start free</a><a class="inline-flex min-h-[52px] items-center justify-center gap-2 rounded-[14px] border-2 border-[#d1d5db] px-[22px] font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#111827] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#4338ca] motion-reduce:transition-none max-[480px]:flex-[1_1_100%]" href="#">Read the docs <span aria-hidden="true">→</span></a></div>
<p class="mt-[22px] text-[.84rem] text-[#4b5563]">Exports to <code class="rounded-md bg-[#f1f0ee] px-1.5 py-0.5 text-[.82rem] text-[#111827]">tokens.css</code>, Swift, Kotlin and Figma variables</p>
</div>
<ul class="scroll-fade grid gap-3" aria-label="Example tokens">
<li class="grid grid-cols-[auto_1fr_auto] items-center gap-3.5 rounded-2xl border border-[#e7e5e4] bg-white px-4 py-3.5 font-mono text-[.86rem] leading-[1.4] font-medium shadow-[0_20px_40px_-28px_rgba(17,24,39,.4)]"><i class="size-[38px] rounded-[10px] bg-linear-135 from-[#4338ca] to-[#7c3aed]" aria-hidden="true"></i>--color-brand<span class="text-[#4b5563]">#4338CA</span></li>
<li class="ml-[clamp(0px,4vw,40px)] grid grid-cols-[auto_1fr_auto] items-center gap-3.5 rounded-2xl border border-[#e7e5e4] bg-white px-4 py-3.5 font-mono text-[.86rem] leading-[1.4] font-medium shadow-[0_20px_40px_-28px_rgba(17,24,39,.4)]"><i class="size-[38px] rounded-[10px] border-2 border-dashed border-[#818cf8] bg-[repeating-linear-gradient(90deg,#c7d2fe_0_4px,transparent_4px_8px)]" aria-hidden="true"></i>--space-4<span class="text-[#4b5563]">16px</span></li>
<li class="ml-[clamp(0px,8vw,80px)] grid grid-cols-[auto_1fr_auto] items-center gap-3.5 rounded-2xl border border-[#e7e5e4] bg-white px-4 py-3.5 font-mono text-[.86rem] leading-[1.4] font-medium shadow-[0_20px_40px_-28px_rgba(17,24,39,.4)]"><i class="size-[38px] rounded-[14px_4px] border-2 border-[#c2410c]" aria-hidden="true"></i>--radius-lg<span class="text-[#4b5563]">14px</span></li>
</ul>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Container query hero, shown in a wide and a narrow slot</span>
<div class="grid grid-cols-1 items-start gap-6 min-[901px]:grid-cols-[1fr_320px]">
<div class="@container/slot">
<section class="grid grid-cols-1 overflow-hidden rounded-3xl border border-[#e5e7eb] bg-white leading-normal text-[#111827] @min-[560px]/slot:grid-cols-2 @min-[760px]/slot:grid-cols-[3fr_2fr]" aria-labelledby="mct-cq-wide">
<img class="block aspect-[16/10] h-auto w-full object-cover @min-[560px]/slot:order-2 @min-[560px]/slot:aspect-auto @min-[560px]/slot:h-0 @min-[560px]/slot:min-h-full" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80" alt="A two-lane road winding between red rock canyon walls" width="1000" height="625">
<div class="p-[clamp(18px,6cqi,48px)] @min-[560px]/slot:self-center">
<p class="text-[clamp(.74rem,.7rem+.2vw,.84rem)] font-bold tracking-[.14em] text-[#9a3412] uppercase">Summit Trails · Spring 2027</p>
<h2 class="mt-2.5 text-[clamp(1.6rem,4.6cqi,2.9rem)] leading-[1.05] font-extrabold tracking-[-.035em] text-balance" id="mct-cq-wide">Seven days on the canyon roads</h2>
<p class="mt-3 text-[clamp(.95rem,1.8cqi,1.1rem)] text-pretty text-[#4b5563]">A guided self-drive with hand-picked lodges, a route that avoids the coach crowds and a guide one call away.</p>
<ul class="mt-4 flex flex-wrap gap-x-4 gap-y-1.5 text-[.86rem] font-semibold"><li class="flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-[#c2410c] before:content-['']">7 nights</li><li class="flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-[#c2410c] before:content-['']">1,140 km</li><li class="flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-[#c2410c] before:content-['']">From £1,890</li></ul>
<div class="mt-[22px] flex flex-wrap gap-3"><a class="inline-flex min-h-[52px] flex-auto items-center justify-center rounded-[14px] border-2 border-transparent [background:linear-gradient(#7c2d12,#7c2d12)_padding-box,conic-gradient(from_var(--mc-turn),#fb923c,#c2410c,#fde68a,#fb923c)_border-box] px-[26px] font-bold text-white focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412] motion-safe:hover:animate-turn motion-safe:focus-visible:animate-turn @min-[560px]/slot:flex-[0_1_auto]" href="#">See the route</a><a class="inline-flex min-h-[52px] flex-auto items-center justify-center gap-2 rounded-[14px] border-2 border-[#d1d5db] px-[22px] font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#111827] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412] motion-reduce:transition-none @min-[560px]/slot:flex-[0_1_auto]" href="#">Dates</a></div>
</div>
</section>
</div>
<div class="@container/slot">
<section class="grid grid-cols-1 overflow-hidden rounded-3xl border border-[#e5e7eb] bg-white leading-normal text-[#111827] @min-[560px]/slot:grid-cols-2 @min-[760px]/slot:grid-cols-[3fr_2fr]" aria-labelledby="mct-cq-narrow">
<img class="block aspect-[16/10] h-auto w-full object-cover @min-[560px]/slot:order-2 @min-[560px]/slot:aspect-auto @min-[560px]/slot:h-0 @min-[560px]/slot:min-h-full" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80" alt="A two-lane road winding between red rock canyon walls" width="1000" height="625">
<div class="p-[clamp(18px,6cqi,48px)] @min-[560px]/slot:self-center">
<p class="text-[clamp(.74rem,.7rem+.2vw,.84rem)] font-bold tracking-[.14em] text-[#9a3412] uppercase">Summit Trails · Spring 2027</p>
<h2 class="mt-2.5 text-[clamp(1.6rem,4.6cqi,2.9rem)] leading-[1.05] font-extrabold tracking-[-.035em] text-balance" id="mct-cq-narrow">Seven days on the canyon roads</h2>
<p class="mt-3 text-[clamp(.95rem,1.8cqi,1.1rem)] text-pretty text-[#4b5563]">A guided self-drive with hand-picked lodges, a route that avoids the coach crowds and a guide one call away.</p>
<ul class="mt-4 flex flex-wrap gap-x-4 gap-y-1.5 text-[.86rem] font-semibold"><li class="flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-[#c2410c] before:content-['']">7 nights</li><li class="flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-[#c2410c] before:content-['']">1,140 km</li><li class="flex items-center gap-1.5 before:size-1.5 before:rounded-full before:bg-[#c2410c] before:content-['']">From £1,890</li></ul>
<div class="mt-[22px] flex flex-wrap gap-3"><a class="inline-flex min-h-[52px] flex-auto items-center justify-center rounded-[14px] border-2 border-transparent [background:linear-gradient(#7c2d12,#7c2d12)_padding-box,conic-gradient(from_var(--mc-turn),#fb923c,#c2410c,#fde68a,#fb923c)_border-box] px-[26px] font-bold text-white focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412] motion-safe:hover:animate-turn motion-safe:focus-visible:animate-turn @min-[560px]/slot:flex-[0_1_auto]" href="#">See the route</a><a class="inline-flex min-h-[52px] flex-auto items-center justify-center gap-2 rounded-[14px] border-2 border-[#d1d5db] px-[22px] font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#111827] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#9a3412] motion-reduce:transition-none @min-[560px]/slot:flex-[0_1_auto]" href="#">Dates</a></div>
</div>
</section>
</div>
</div></div>
CSS
/* @property makes the two gradient variables animatable; the scroll-driven fade sits behind @supports so browsers
without animation-timeline simply show the tokens. Everything else is utility classes in the markup. */
@property --mc-sweep{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --mc-turn{syntax:"<angle>";inherits:false;initial-value:0deg}
@theme {
--animate-sweep: sweep 2.4s ease-out .3s 1 both;
--animate-turn: turn 2.2s linear infinite;
@keyframes sweep{from{--mc-sweep:100%}to{--mc-sweep:0%}}
@keyframes turn{to{--mc-turn:360deg}}
}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.scroll-fade{animation:leave linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
}
@keyframes leave{to{opacity:0;transform:translateY(-40px) scale(.96)}}
}
About this set
Two heroes that use newer CSS for things that usually need JavaScript or a pile of media queries. Fluid and balanced hero is a design tokens product. Type and spacing scale smoothly with clamp(), the headline uses text-wrap: balance so no line is left with one word, and the body copy uses text-wrap: pretty. @property registers two custom properties as a percentage and an angle so they can be animated: the gradient on the key phrase sweeps once on load, and the main button’s conic gradient ring turns while it is hovered or focused. The stack of token cards fades and lifts as the hero scrolls out of view with a scroll-driven animation, animation-timeline: view(), wrapped in @supports so other browsers simply show the cards. Container query hero is one travel promo component shown twice, in a wide slot and in a 320px sidebar slot. It reads the width of its slot, not the window: stacked with the photo on top when narrow, two columns from 560px and a wider text column from 760px, with title and padding sized in cqi units.
What’s included
clamp() fluid type and spacing with text-wrap: balance and pretty
@property gradient sweep on load and a turning ring on hover or focus
Scroll-driven fade with animation-timeline: view() behind @supports
Container query layout with cqi-based type, shown at two slot widths
No JavaScript
Accessibility
Each hero is a section named by its heading, the token list has an accessible name, and the photo has alt text. Links show a 4px-offset focus outline. Under prefers-reduced-motion the gradient sweep, the turning ring and the scroll-driven fade are all switched off, and the gradient text has a solid fallback colour.
Customise it
Change --mc-a1, --mc-a2, --mc-a3 and --mc-ink on .mc for the gradient and button, and the 560px and 760px @container breakpoints. In Tailwind the same breakpoints are the @min-[560px]/slot and @min-[760px]/slot variants and the animations are --animate-sweep and --animate-turn in @theme.
