Call to action

Preview Available in release assets

Focus one supporting message and one honest next destination near the end of a content sequence.

Call to action in context

<section class="thin-cta" aria-labelledby="cta-heading">
  <div>
    <h2 id="cta-heading">Own your next release</h2>
    <p>Publish a readable page today and add enhancement only when the task requires it.</p>
  </div>
  <a  href="#start">Start with semantic HTML</a>
</section>

Show code

<section class="thin-cta" aria-labelledby="cta-heading">
  <div>
    <h2 id="cta-heading">Own your next release</h2>
    <p>Publish a readable page today and add enhancement only when the task requires it.</p>
  </div>
  <a  href="#start">Start with semantic HTML</a>
</section>

Anatomy

Labelled section
Heading
Supporting copy
Primary link or native submit button

Variants and sizes

Link destination
Form submit
Secondary supporting link

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 action
Narrow container
Wide container
Visited destination
High contrast

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Use a link for navigation and a button only for a local action or form submission; no click handler is required for a destination.

Accessibility

Keep the call-to-action label specific out of context, preserve visible focus, and do not repeat multiple visually primary actions.

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

API

Use section.thin-cta with a heading and an ordinary link.thin-button or native button.

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