Card

The card provides users with a way to display case studies in a structured format.

Example

case study image

Lorem Ipsum

UI/UX Design Mobile Design Accessibility

Code


  <div class="col-lg-12 col-sm-12 py-2">
    <div class="card custom-card border-0 bg-transparent">
      <img src="../images/case-study.png" class="card-img-top rounded" alt="case study image">
        <div class="card-body">
          <h3 class="card-title">Lorem Ipsum</h3>
            <div class="tag-container">
              <span class="custom-tag">UI/UX Design</span>
              <span class="custom-tag">Mobile Design</span>
              <span class="custom-tag">Accessibility</span>
            </div>
        </div>
    </div>
  </div>

Usage

The card is used for displaying case studies on the portfolio.

Accessibility Considerations

The card meets WCAG Color Contrast guidelines with dark text against a light background. When in dark mode, the text color changes to ensure sufficient contrast. The card also contains alt text for the image.