Plan Change - Everyday Interface Patterns

A static plan change summary shows Starter, Team, August 15, 2026, and Not changed status.

Program

Plan change summaries should read back the current plan, new plan, renewal date, and status before any billing or subscription service is involved.

plan_change_summary.html

Visuals: captured from real browser rendering

<section class="plan-change" aria-labelledby="plan-change-title"><h2 id="plan-change-title">Plan change summary</h2><dl>
  <div><dt>Current plan</dt><dd>Starter</dd></div>
  <div><dt>New plan</dt><dd>Team</dd></div>
  <div><dt>Renewal date</dt><dd>August 15, 2026</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Not changed</span></dd></div></dl>
  <p class="note">Static plan change summary only; no billing service, subscription service, payment service, account lookup, storage, route, API, network, script, form submit, or live plan change runs.</p></section>
<style>
  .plan-change { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .plan-change dl { display: grid; gap: 8px; margin: 0; }
  .plan-change dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .plan-change dt { color: #475569; }
  .plan-change dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the plan change summary.
The section is labelled by its visible heading.
Show the current plan.
The current plan is exact pinned data.
Show the new plan.
The new plan is exact pinned data.
Show the renewal date.
The renewal date is exact pinned data.
Render the unchanged status.
The status badge says the plan has not changed.
Check plan honesty.
Current plan, new plan, renewal date, status, and no live plan change.

static markup The section heading names the plan change summary surface.

plan rows Current plan, New plan, Renewal date, and Status values are exact pinned data.

no live plan change The lesson should not imply billing services, subscription services, payment services, account lookup, storage, routes, APIs, networks, scripts, form submits, or live plan changes.