Pricing

Preview Available in release assets

Compare server-owned offers while keeping price, billing period, inclusions, and destination explicit.

Pricing in context

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Choose a publishing plan</h2>
  <div class="thin-pricing" data-align="rows">
    <article class="thin-price-card">
      <h3>Reader</h3>
      <p class="thin-price">
        <span aria-label="12 US dollars">$12</span>
        <small>/ month</small>
      </p>
      <ul>
        <li>One publication</li>
        <li>Email delivery</li>
      </ul>
      <a  href="/checkout/reader/">Choose Reader</a>
    </article>
    <article class="thin-price-card" data-featured>
      <h3>International cooperative plan with extended support</h3>
      <p class="thin-price">
        <span aria-label="1,299 euros">€1.299,00</span>
        <small>/ year</small>
      </p>
      <ul>
        <li>Localized editions</li>
        <li>Priority support</li>
      </ul>
      <a  href="/checkout/cooperative/">Choose Cooperative</a>
    </article>
  </div>
</section>

Show code

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Choose a publishing plan</h2>
  <div class="thin-pricing" data-align="rows">
    <article class="thin-price-card">
      <h3>Reader</h3>
      <p class="thin-price">
        <span aria-label="12 US dollars">$12</span>
        <small>/ month</small>
      </p>
      <ul>
        <li>One publication</li>
        <li>Email delivery</li>
      </ul>
      <a  href="/checkout/reader/">Choose Reader</a>
    </article>
    <article class="thin-price-card" data-featured>
      <h3>International cooperative plan with extended support</h3>
      <p class="thin-price">
        <span aria-label="1,299 euros">€1.299,00</span>
        <small>/ year</small>
      </p>
      <ul>
        <li>Localized editions</li>
        <li>Priority support</li>
      </ul>
      <a  href="/checkout/cooperative/">Choose Cooperative</a>
    </article>
  </div>
</section>

Anatomy

Section heading
Pricing grid
Article per offer
Offer heading
Localized price and period
Feature list
Checkout link

Variants and sizes

Single offer
Peer plans
Featured offer
Localized annual plan
Separate comparison table

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 price
Long plan name
Unavailable plan
Narrow container
Wide container

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Checkout destinations are ordinary links. Pricing truth belongs to the server and must be refreshed before purchase.

Accessibility

Associate each price and action with its plan heading, include currency and billing period in text, and do not identify a featured plan by color alone.

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

API

Use a section heading, a container.thin-pricing, and article.thin-price-card children; data-featured is presentational emphasis only.

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