Announcement

Preview Available in release assets

Present a single promotional, launch, or advisory message alongside its next action without displacing the document heading order.

Announcement in context

<aside class="thin-announcement" role="status" aria-labelledby="announcement-heading">
  <p class="thin-announcement-eyebrow">New release</p>
  <p id="announcement-heading"><strong>Issue 08 is available with expanded field reporting from five continents.</strong></p>
  <p class="thin-announcement-actions">
    <a  href="/issues/08/">Read issue 08</a>
    <a href="/archive/">Browse the archive</a>
  </p>
</aside>

Show code

<aside class="thin-announcement" role="status" aria-labelledby="announcement-heading">
  <p class="thin-announcement-eyebrow">New release</p>
  <p id="announcement-heading"><strong>Issue 08 is available with expanded field reporting from five continents.</strong></p>
  <p class="thin-announcement-actions">
    <a  href="/issues/08/">Read issue 08</a>
    <a href="/archive/">Browse the archive</a>
  </p>
</aside>

Anatomy

Aside or section landmark
Optional eyebrow label
One concise message
Optional primary link and supporting link
Optional dismiss link served by the server

Variants and sizes

Static promo
Launch banner
Advisory notice
Message with primary and supporting action
Server-dismissible banner

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 message
Two actions
One action
Dismissed on the server
Narrow container
Wide container
High contrast

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Actions are ordinary links. If the banner is dismissible, the server records the state so the message does not reappear until conditions change; no client toggle is required.

Accessibility

Use role=status only when the message is added after page load; make the aside labelled or self-explanatory, keep the accessible name specific, and never convey urgency by color alone.

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

API

Use aside.thin-announcement with an accessible name; place actions inside p.thin-announcement-actions and eyebrow copy inside p.thin-announcement-eyebrow.

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