Cards

The primary card component emphasizes clarity and content-first communication. Designed with a minimalist aesthetic, it avoids unnecessary visual noise—ensuring that key information stands out without distraction. The layout prioritizes legibility, hierarchy, and simplicity, helping users quickly understand the subject or purpose of each card, especially in use cases like showcasing case studies or summaries.

Primary

Tag One Tag Two Tag Three

Card Title

This is a brief description of the content inside the card. It gives users context without overwhelming them.

HTML


<!-- Main Card Body -->
<div class="card-primary">
    <img src="../Assets/card-image-1.jpg" alt="Card preview image" />

    <div class="card-content">

        <!-- Pill Container -->
        <div class="pill-container">
            <span class="pill pill-info">Tag One</span>
            <span class="pill pill-success">Tag Two</span>
            <span class="pill pill-warning">Tag Three</span>
        </div>

        <!-- Card Title + Description -->
        <div class="card-copy">
            <h3 class="card-title">Card Title</h3>
            <p class="card-description">
                This is a brief description of the content inside the card. It gives users context without overwhelming them.
            </p>
        </div>

        <!-- CTA Button -->
        <button class="btn btn-primary">View Project</button>

    </div>
</div>
<!-- End of Main Card Body -->

CSS


.card-primary {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-right: 32px;
  gap: 32px;
  background-color: var(--surface-light);
  border-radius: var(--radius-12);
  border: 1px solid var(--border-default-light);
  box-shadow: 0px 16px 32px -4px rgba(60, 75, 93, 0.10), 0px 2px 4px 0px rgba(60, 75, 93, 0.04);
}

.card-primary img {
  width: 50%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-8);
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 32px;
}

.card-content>.btn {
  width: fit-content;
}

/* Pills */
.pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Card Title + Body */
.card-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  font-weight: 500;
  color: var(--text-header-default);
  margin: 0;
}

.card-description {

  color: var(--text-body-default);
  margin: 0;
}

@media (max-width: 999px) {
  .card-primary {
    flex-direction: column;
    padding-right: 0;
  }

  .card-content {
    padding: 0 32px 32px 32px;
  }

  .card-primary img {
  width: 100%;
}
  .card-primary img {
    height: auto;
    max-width: 100%;
  }
}

Accessibility

The card maintains WCAG AAA color contrast standards for both text and background, ensuring readability across themes and devices. It uses system-friendly, legible fonts—Merriweather for body content—to support comfortable reading. The layout adapts responsively for smaller screens, preserving clear content hierarchy and image accessibility across breakpoints.