Content section

Preview Available in release assets

Compose editorial copy with optional supporting image or poster-first video while preserving a coherent reading order.

Content section in context

<section class="thin-content-section" aria-labelledby="field-heading">
  <div>
    <p>Field note 07</p>
    <h2 id="field-heading">Reporting beyond the available image</h2>
    <p>When media is delayed or unavailable, the narrative and its heading remain complete. This deliberately extended localized paragraph verifies a useful reading measure and resilient wrapping.</p>
    <p><a href="/stories/field-note-07/">Read the complete field note</a></p>
  </div>
  <figure data-media-missing>
    <figcaption>Photograph unavailable; the article does not depend on it.</figcaption>
  </figure>
</section>

Show code

<section class="thin-content-section" aria-labelledby="field-heading">
  <div>
    <p>Field note 07</p>
    <h2 id="field-heading">Reporting beyond the available image</h2>
    <p>When media is delayed or unavailable, the narrative and its heading remain complete. This deliberately extended localized paragraph verifies a useful reading measure and resilient wrapping.</p>
    <p><a href="/stories/field-note-07/">Read the complete field note</a></p>
  </div>
  <figure data-media-missing>
    <figcaption>Photograph unavailable; the article does not depend on it.</figcaption>
  </figure>
</section>

Anatomy

Section with heading
Prose content
Optional image, figure, or video
Optional next link

Variants and sizes

Prose only
Prose and image
Prose and poster-first video
Missing-media fallback
Reversed visual treatment without source-order reversal

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long localized copy
Missing media
Narrow container
Wide container
Reduced motion
Right-to-left content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links and media controls remain native; video uses the separate poster-first component and does not autoplay.

Accessibility

Keep heading order aligned with the document, write meaningful image alternatives and captions, preserve logical source order, and never make media the only carrier of essential information.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use section.thin-content-section with semantic prose and optional figure, image, or video; use an authored [data-media-missing] fallback when needed.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/marketing.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts