Blog

9 examples. Use Compact to see how the same HTML reflows.

Split lead story with an article grid

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.
Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.
Build a marketing site
Compose a page around its promise and next step.

View HTML

<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="blog" data-treatment="featured photo">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-01-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/marketing-site/">Build a marketing site</a></h4><p>Compose a page around its promise and next step.</p>
  </article></li></ul></div>
  </div>
</div>

Color-backed lead collection with follow-up stories

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.
Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="blog" data-treatment="tiles accent photo">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-02-headline">From the <em>Fieldwork journal</em></h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li></ul></div>
  </div>
</div>

Two grouped collections of articles

Sections keep their order and grow with the content.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

Learning resources

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.

More from the journal

Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="blog" data-treatment="photo">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="stack"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-03-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><section class="thin-stack"><h4>Learning resources</h4><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li></ul></section>
       <section class="thin-stack"><h4>More from the journal</h4><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li></ul></section></div>
  </div>
</div>

Bordered editorial card grid

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.
Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="blog" data-treatment="tiles landscape">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-04-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li></ul></div>
  </div>
</div>

Dark editorial grid and compact story list

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.
Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.
Build a marketing site
Compose a page around its promise and next step.
Start with the foundations
Load the styles you need and try a layout with your own content.

View HTML

<div class="marketing-specimen" data-theme="night-signal" data-tone="ink" data-category="blog" data-treatment="featured compact photo">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-05-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/marketing-site/">Build a marketing site</a></h4><p>Compose a page around its promise and next step.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/quick-start/">Start with the foundations</a></h4><p>Load the styles you need and try a layout with your own content.</p>
  </article></li></ul></div>
  </div>
</div>

Centered image-led article list

Sections keep their order and grow with the content.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.

View HTML

<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="blog" data-treatment="photo">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="stack"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-06-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 100%"><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li></ul></div>
  </div>
</div>

Editorial collection with a lead article and sidebar

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.
Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.
Build a marketing site
Compose a page around its promise and next step.

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="neutral" data-category="blog" data-treatment="featured support landscape">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-07-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><div class="marketing-composition" data-composition="split"><div class="thin-stack"><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/marketing-site/">Build a marketing site</a></h4><p>Compose a page around its promise and next step.</p>
  </article></li></ul></div><aside class="thin-box thin-stack"><h4>Read by topic</h4><ul class="thin-cluster" role="list"><li><a href="/guides/content-website/">Content</a></li>
<li><a href="/layouts/">Layouts</a></li>
<li><a href="/guides/submit-form/">Forms</a></li></ul></aside></div></div>
  </div>
</div>

Image-led travel grid

Intrinsic tracks fit the available inline size and let content set the row height.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.
Design for a smaller device
Keep the first request light and let the browser do the layout work.
Write a form that holds up
Pair native controls with server-side validation and clear recovery.
A guide to live updates
Add streaming HTML to a page that already works.
Choose the right element
Use the names, relationships, and actions HTML already describes.

View HTML

<div class="marketing-specimen" data-theme="neutral" data-tone="sky" data-category="blog" data-treatment="landscape plain">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="grid"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-08-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 15rem"><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/constrained-devices/">Design for a smaller device</a></h4><p>Keep the first request light and let the browser do the layout work.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/submit-form/">Write a form that holds up</a></h4><p>Pair native controls with server-side validation and clear recovery.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/live-updates/">A guide to live updates</a></h4><p>Add streaming HTML to a page that already works.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/html-elements/">Choose the right element</a></h4><p>Use the names, relationships, and actions HTML already describes.</p>
  </article></li></ul></div>
  </div>
</div>

Wide editorial image sequence

Sections keep their order and grow with the content.

Preview width Full Compact

From the Fieldwork journal

A collection of practical guides and field notes.

A page that can grow
Start with the document and let the reading measure guide the layout.
The next action belongs in HTML
Build around links, forms, and readable server responses.

View HTML

<div class="marketing-specimen" data-theme="paper" data-tone="paper" data-category="blog" data-treatment="landscape featured">
  <div class="marketing-section">
    <div class="marketing-composition" data-composition="stack"><div class="marketing-intro thin-stack" data-space="s">
    
    <h3 class="marketing-display" id="marketing-blog-09-headline">From the Fieldwork journal</h3>
    <p>A collection of practical guides and field notes.</p>
    
  </div><ul class="thin-grid marketing-collection marketing-stories" role="list" style="--thin-grid-min: 100%"><li data-lead><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/content-website/">A page that can grow</a></h4><p>Start with the document and let the reading measure guide the layout.</p>
  </article></li><li><article class="marketing-card thin-stack" data-space="xs">
    <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">
    <h4><a href="/guides/server-rendered-app/">The next action belongs in HTML</a></h4><p>Build around links, forms, and readable server responses.</p>
  </article></li></ul></div>
  </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; }
  }
}