Code

          

            <div class="col-lg-6 col-md-12 py-2">
              <div class="card h-100 bg-card rounded-0">
                <img src="../images/placeholderimage.jpg" alt="image placeholder">
                <div class="card-body">
                  <h3 class="card-title">Card title</h3>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut efficitur erat,
                    at
                    dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut efficitur erat, at
                    dapibus massa.</p>
                  <a href="#" class="stretched-link"></a>
                </div>
              </div>
            </div>
          </div>

          
        

Usage

• The cards must include a project overview and an associated image.
• The entire surface of the cards must be clickable.

Accessibility Considerations

The image in the card must include alt text. This primary card uses dark text against light backgrounds to meet the WCAG color contrast requirement. If using any of the darker backgrounds (surface-brand-primary, surface-brand-secondary, surface-secondary), use one of the lighter text colors (text-brand-primary-light, text-brand-secondary-light, text-inverse).