Card

HTML

---
const { customClasses } = Astro.props;
const defaultClasses = "card theme container";
const classes = customClasses
  ? `${defaultClasses} ${customClasses}`
  : defaultClasses;
---

<div class={classes}>
  <div class="image">
    <img src="/images/card-padilla.jpg" alt="" />
  </div>
  <div class="card-body l-stack">
    <h2>
      <a href="#">This is a card</a>
    </h2>
    <p>
      Use it to provide a small amount of information, link to another webpage,
      and give your page visual interest.
    </p>
  </div>
</div>

SCSS

.card {
  position: relative;
}

.card a {
  text-decoration: none;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

.card-body {
  padding: var(--s0);
}

Clickable Area

The core characteristic of a card is that it links to a another web page. Using the psuedo-content technique (as shown in the css example below) ensures the entire area of the card is clickable while allowing the anchor tag to be nested inside of another element, like a heading. Note the drawback of this technique prevents the user from selecting the text.

Refrain from using this approach if there will be multiple clickable areas of the card, for instance if a blog category link is also included in the card markup.