The cards

Similar to the hero section, we could potentially use utility classes for a lot of things here, but for a lot of it, I prefer a single class.

Though, there is one thing that throws a wrench into things, so I'll give you three options to pick from.

The easy parts

There are three variations of cards. All of them have some things in common:

• Background color
• Padding
• Body text styles
• Border radius
• Spacing
• Image's border radius

So, we could do this:

.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--background-light);
  border-radius: var(--border-radius-3);

  img {
    border-radius: var(--border-radius-2);
  }
}

The tricky part

I always advocate for taking car of the easy parts first so that you can make some forward progress, but now we have to figure out what to do with the titles inside our cards.

In one card, they're big and orange, in another they are big and white, and in another they are smaller and white.

Our options

I can think of three approaches:

• Use utility only
• Create a base class for the .card__title, along with variations of it
• Use custom properties for customization

The first two are pretty obvious, I think.

The third would look something like this:

.card__title {
  color: var(--card-title-color, var(--text-brand));
  font-size: var(--card-title-font-size, var(--font-size-heading-sm));
}

So, we have some default values, but when we run into different situations on our second page, we can modify them:

.mushroom-guide {
  --card-title-font-size: var(--font-size-lg);
  --card-title-color: var(--text-high-contrast);
}

.faq-bento-grid {
  --card-title-color: var(--text-high-contrast);
}

What I like to do

I used to use the second method I listed all the time.

Because new situations would always arise, and that would mean adding more variants, I swung the other way and started using utility classes instead.

These days, I prefer the third method.

This is because, in general, within a section of content things tend to be consistent. So, I can apply these custom properties on the parent, and then my content in there, and it'll look the way I want it to look.

I don't have to worry about forgetting to add a modifier class (or data attribute), and in the case of utility classes, I don't have to repeat anything either.