Skip to content

Newsletter

Preview Available in release assets

Collect a subscriber address through a native, server-submitted form with clear expectations.

Newsletter in context

Show code
<section class="thin-newsletter" id="subscribe" aria-labelledby="newsletter-heading">
  <div>
    <h2 id="newsletter-heading">Receive the field edition</h2>
    <p>One thoughtful issue each month. Unsubscribe with one link.</p>
  </div>
  <form action="/subscribe" method="post">
    <div class="thin-field">
      <label for="newsletter-email">Email address</label>
      <input class="thin-input" id="newsletter-email" name="email" type="email" autocomplete="email" required />
      <small id="newsletter-note">We use this only to send the edition.</small>
    </div>
    <button class="thin-button" type="submit">Subscribe</button>
  </form>
</section>

Anatomy

  • Labelled section
  • Purpose and frequency copy
  • Post form
  • Explicit email label
  • Native email input
  • Privacy hint
  • Submit button

Variants and sizes

  • Email only
  • Email and name
  • Consent checkbox when legally required

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

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

  • Empty
  • Invalid email
  • Server error
  • Pending submission
  • Long localized labels
  • Narrow container

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The native form posts to the server and uses browser validation without JavaScript; optional enhancement must preserve action, method, values, and returned errors.

Accessibility

Keep the label visible, connect persistent hints and server errors to the input, return focus to an error summary when appropriate, and never preselect optional consent.

Contract
NATIVE
Basis
Native labelled forms, inputs, fieldsets, and submit controls; no APG widget
Evidence
  • tests/unit/library/marketing-patterns.test.ts

API

Use section.thin-newsletter containing a native form, field skin, email input, and submit 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

Composition

Derived from the examples and style specs, not authored.

Composes