Cards
This design system utilizes 2 sizes of cards: small and large. Each card size has its' own responsive behavior for mobile, tablet, and desktop viewing.
The following cards are responsive:
Large Card
Project Title
Project Tagline
Lorem ipsum dolor sit amet consectetur. Diam est viverra sit odio risus tellus eget sed risus.
Tags: Project Roles
Small Card
Project Title
Project Tagline
Lorem ipsum dolor sit amet consectetur. Diam est viverra sit odio risus tellus eget sed risus.
Tags: Project Roles
Accessibility
Include alt text for all card images.
Ensure text is legible in color contrast and size.
Usage
Cards should primarily be used to display projects on homepage.
Large cards should be used for design projects where images are prominent.
Small cards should be used for research or text-dominant projects.
HTML
Large Cards
<div class="row col-lg-12 mx-auto mb-5">
<div class="card mb-3 mx-auto py-5 px-5">
<div class="row g-3">
<div class="col-lg-6">
<div class="card-body">
<h4 class="mb-4 gray-title">Project Title</h4>
<h2 class="mb-4 card-text">Project Tagline</h2>
<p class="mb-4">Project Description</p>
<p class="text-italic card-text mb-4">Tags: Project Roles</p>
<div class="d-grid col-lg-8"
<a href="#"type="button" class="buttonClick btn btn-outline-primary px-5 py-3 mt-3">Learn More</a>
</div>
</div>
</div>
<div class="col-lg-6">
<img src="images/image.png" class="placeholderImage" alt="Placeholder Image">
</div>
</div>
</div>
</div>
Small Cards
<div class="row col-lg-12 mx-auto mb-5">
<div class="card mb-3 p-5 col-lg-6">
<div class="row g-3">
<div class="card-body">
<h4 class="mb-4 gray-title">Project Title</h4>
<h2 class="mb-4 card-text">Project Tagline</h2>
<p class="mb-4">Project Description</p>
<p class="text-italic card-text mb-4">Tags: Project Roles</p>
<div class="d-grid col-lg-8"
<a href="#"type="button" class="buttonClick btn btn-outline-primary px-5 py-3 mt-3">Learn More</a>
</div>
</div>
</div>
</div>
</div>