Profile Summary Patterns

Contact Review

A review card shows pinned email mina@example.test and phone 555-0142 with an Edit button and no account update.

Program

A contact review state should make the saved-looking values visible without pretending to submit them. This lesson uses static profile data.

contact_info_review.html
Visuals: captured from real browser rendering
<section class="contact-review" aria-labelledby="contact-title">
  <h2 id="contact-title">Review contact info</h2>
  <dl>
    <dt>Email</dt><dd>mina@example.test</dd>
    <dt>Phone</dt><dd>555-0142</dd>
  </dl>
  <button type="button">Edit</button>
  <p class="note">No submission or account update runs in this lesson.</p>
</section>
<style>
  .contact-review { display: grid; gap: 10px; max-width: 32rem; border: 1px solid #94a3b8; padding: 12px; }
  .contact-review dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
  .contact-review button { justify-self: start; padding: 8px 12px; }
  .note { margin: 0; color: #475569; }
</style>

  1. Label the contact review card.

    The section is labelled by the review heading.
    The section is labelled by the review heading.

  2. Use label and value pairs.

    The email and phone values are grouped in a definition list.
    The email and phone values are grouped in a definition list.

  3. Show the pinned email.

    The email value is exact pinned data.
    The email value is exact pinned data.

  4. Show the pinned phone.

    The phone value is exact pinned data.
    The phone value is exact pinned data.

  5. Show the edit affordance.

    The button gives a visible path to edit the static values.
    The button gives a visible path to edit the static values.

  6. Check the contact review card.

    The card shows pinned contact info and says no submission or account update runs.
    The card shows pinned contact info and says no submission or account update runs.
definition list Label/value pairs work well for review cards.
pinned contact data The email and phone are exact lesson values.
no account update The lesson should not imply a submission or account update ran.