Cards

Cards are used within this design system to link to examples of work. Cards include an image, project title, and a brief summary describing the content, as well as a button to linked item whevever neccessary

Accessibility Considerations

To ensure accessibility, always include descriptive and meaningful alt text for card images and always style links as described in the typography section.

---

Usage

• Use cards to display a preview of content presented on other pages.
• Cards may be used to link to external sites and content.
• Cards must include a link, image, descriptive category, project title, and brief summary of the linked content.

---

Code Examples

---

 <div class="row mb-5 card-example">
                <div class="p-2 col-12 col-md-6 col-lg-4">
                  <div class="card" >
                    <img src="../img/Image placeholder.svg"
                    class="card-img-top1"
                    alt="placeholder image of light grey rectangle with white x on top">
                    <div class="card-body1" >
                    <div class="pt-4 project-title1" >
                    Project title </div>
                    <div class="body-text1" >
                    A short project description/overview </div>
                    </div>
                    </div>
                </div>
              </div>