Day 17: Card 🎴

A card component usually displays an image and extra information in card-like format.

The example component is visible below.

Santa Claus

Age: 1,751

Location: North Pole

A few notes about this card component:

• CSS Variables are used for colors,
• the aspect-ratio is used to fit the image in the box.

The code:

<div class="advent-card">
  <div class="advent-card__image">
    <img src="https://res.cloudinary.com/starbist/image/upload/v1639658534/pexels-andrea-piacquadio-716658_gxpv08.jpg" alt="Santa Claus looking at camera with his mouth open." width="400" height="400">
  </div>
  <div class="advent-card__content">
    <h2>Santa Claus</h2>
    <p>Age: <b>1,751</b></p>
    <p>Location: <b>North Pole</b></p>
  </div>
</div>

.advent-card {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;

  background-color: var(--color-xmas-alpha);
  border: 1px double var(--color-xmas-beta);
  border-radius: .5em;

  max-width: 20rem;
  margin: auto;

  overflow: hidden;
}
.advent-card__image {
  background-color: var(--color-xmas-beta);
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.advent-card__content {
  color: var(--color-xmas-beta);
  padding: .5em .75em;
}
.advent-card__content h2 {
  font-size: 1.5rem;
  margin: 0;
}
.advent-card__content h2 {
  font-size: 1.5rem;
  margin: 0;
}
.advent-card__content p {
  font-size: .9rem;
  margin-top: .5em;
  margin-bottom: 0;
}