Card Component You Can Drop on Three Pages

If a home-page card, catalog card and related-item card differ only in spacing and border colour, maintain one component before copying three stylesheets. The useful test is whether a common change reaches every instance without damaging their different contexts.

This runnable page places the three contexts together so you can compare them. Save it as shared-cards.html. The links point to local example details rather than a checkout.

Run three contexts with one component

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reuse a card in three contexts</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 16px;
      font: 1rem/1.6 system-ui, sans-serif;
      color: #080b0e;
      background: #ffffff;
    }
    main { max-width: 60rem; margin-inline: auto; }
    .catalog { display: grid; gap: 16px; }
    @media (min-width: 720px) { .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 20px;
      border: 1px solid #dce3ed;
      border-radius: 12px;
      background: #ffffff;
      overflow-wrap: anywhere;
    }
    .card h3, .card p { margin: 0; }
    .card p { flex: 1; }
    .card a { align-self: flex-start; color: #034bff; }
    .card a:focus-visible { outline: 3px solid #034bff; outline-offset: 3px; }
    .card--featured { border-color: #034bff; }
    section { margin-block: 24px; }
  </style>
</head>
<body>
  <main>
    <h1>One card component in three contexts</h1>
    <section aria-labelledby="home-heading">
      <h2 id="home-heading">Home highlight</h2>
      <article class="card card--featured"><h3>Travel mug</h3>
        <p>A featured item with the shared card structure.</p><a href="#details">View travel mug details</a></article>
    </section>
    <section aria-labelledby="catalog-heading">
      <h2 id="catalog-heading">Catalog</h2>
      <div class="catalog">
        <article class="card"><h3>Travel mug</h3><p>A short description.</p><a href="#details">View travel mug details</a></article>
        <article class="card"><h3>A cup with a much longer descriptive title</h3>
          <p>A longer description tests wrapping and keeps the action after the available text.</p><a href="#details">View cup details</a></article>
      </div>
    </section>
    <section aria-labelledby="related-heading">
      <h2 id="related-heading">Related item on a detail page</h2>
      <article class="card"><h3>Desk cup</h3><p>A related item using the same classes.</p><a href="#details">View desk cup details</a></article>
    </section>
    <h2 id="details">Example details</h2>
    <p>These cards demonstrate layout and do not represent a shop checkout.</p>
  </main>

</body>
</html>

The home highlight has a blue border supplied by a modifier. The catalog has two cards, one deliberately longer. The related item uses the ordinary component. All four articles share the same card, heading, paragraph and link rules.

Check what belongs to the parent

The catalog container owns its columns and the gap between cards. The card owns its internal padding, border, radius and vertical spacing. That separation lets the same card appear outside a grid without bringing an unwanted page layout with it.

At 720px and above, the catalog uses two equal shrinkable tracks. Below that it has one column. The card's zero minimum width and wrapping policy help long text stay inside its slot. They do not justify forcing every component in the site to use this exact breakpoint.

Compare actions with different text lengths

In the two-column catalog, both cards stretch to the row height. The description's flexible space puts the action after the text while using the available room. Check both a short and long description before deciding that one attractive screenshot proves the component works.

Tab through all four links. Each should have a visible focus indicator and useful text. The action is one real link per card. Do not wrap an article in a link and then put additional links or buttons inside that outer link. If the design needs several actions, give each a clear control and test the interaction model deliberately.

Move the component to actual pages

For a plain multi-page site, move the shared card rules into a stylesheet such as styles.css and load that same file from home, catalog and detail pages. Copy the component markup with the appropriate content and correct relative stylesheet path.

This example combines the contexts for learning; it does not implement a template system. In a real application, a shared template or component can also keep the markup synchronized. Sharing only the class name will not prevent three separately maintained markup copies from drifting.

Change one property and inspect all instances

Change the base card radius from 12px to 20px. All four cards should update, including the featured one. Its modifier changes only the border colour, so it should not freeze a separate copy of the radius.

If one does not change, inspect whether it uses the same class, loaded stylesheet and winning border-radius declaration. Remove a redundant page-specific copy rather than adding another increasingly specific override.

Try content that challenges the component

Replace the related item's title with a long unbroken identifier and enlarge browser text. Check at 390px and at the two-column boundary.

Expected result: the title wraps, the action remains reachable and the document does not require sideways scrolling. The cards may have different heights when stacked, which is usually preferable to clipped descriptions. For the parent layout's sizing rules, continue to the two-column Grid walkthrough.