Cards, Buttons and Shared Styles Across Pages

Copy-pasting a card's CSS into three pages is how the border radius drifts to 6px, 8px and 12px on the same site. Extract the pattern once. Change it once.

A card you can reuse

<article class="card">
  <h2 class="card__title">Ceramic mug</h2>
  <p class="card__body">Matte blue, dishwasher safe.</p>
  <a class="btn btn--primary" href="/mug">View</a>
</article>

.card {
  background: #ffffff;
  border: 1px solid #626976;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card__title {
  margin: 0;
  font-size: 1.25rem;
  color: #080b0e;
}

.card__body {
  margin: 0;
  color: #626976;
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: #034bff;
  color: #ffffff;
}

.btn--primary:hover { filter: brightness(1.05); }
.btn--primary:focus-visible {
  outline: 3px solid #034bff;
  outline-offset: 2px;
}

BEM-ish names (card__title) are optional. Consistency is not. Pick a pattern and stick to it across pages.

Modifiers stay small

.card--featured {
  border-color: #034bff;
  box-shadow: 0 4px 16px rgba(8, 11, 14, 0.12);
}

.btn--ghost {
  background: transparent;
  border-color: #626976;
  color: #080b0e;
}

A modifier changes one concern. It should not rewrite the whole component. If card--checkout needs different HTML structure, it is a new component.

Shared stylesheet

Link one components.css (or a section of your main sheet) from every page that uses cards and buttons. Do not inline a second copy "just for this landing page".

Common mistakes

• One-off class names per page (.homeCard, .listCard, .detailCard) with the same rules. Merge them.
• Buttons that are <div>s. Use <button> or <a href>. Divs are not in the tab order by default.
• Hover-only affordances. Add focus styles too.

Page shell vs component

/* layout — page specific */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* component — reusable */
.card { /* as above */ }

The grid decides how many cards fit. The card decides how each unit looks. When those concerns mix in one selector (.catalog-grid > div with padding, border and column logic), you cannot reuse the card on the home page without dragging catalog layout with it.

Checklist before you copy a card

1. Does a .card class already exist?
2. Can a modifier cover the difference?
3. If the HTML structure differs (image on top vs avatar on the side), is it a new component with a clear name?

If you skip the checklist, you will create .card2 by Friday.

What happens if you skip this

A brand refresh becomes a weekend of find-and-replace across twelve HTML files. You will miss one.

Try it

Use the same .card on a home teaser, a catalog grid and a detail related-item. Change the border colour in one place. Confirm all three update.

If three pages need three copies of the same CSS, what are you optimizing for?