Sai Design System

- Typography
- Color
- Logo
- Homepage
- Case Study

Card

Example

BUY BAMBUS

Conscious manufacturing at its heart, we are owning our responsibility towards the planet and the local communities.

Code

    
      <div class="col-lg-4 col-md-12 col-md-px-4 me-0 pb-5 mx-auto">
        <div class="card"> <img src="img/BambooStore.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">BUY BAMBUS</h5>
              <p class="card-text">Conscious manufacturing at its heart, we are owning our responsibility 
              towards the planet and the local communities.</p>
              <a href="#" class="btn btn-primary">View more</a>
            </div>
          </div>
      </div>

Usage

The card must include an image that is not distorted, cropped proportionately and centered. The text must give an overview of the project and a button linked to the detailed project page.

The card must have a hover animation to show active state.

Only the button must be clickable in the card.

Accessibilty Considerations

This card component with blue button and an image passes all the WCAG Compliances including the small Text, Large text and UI Components. The image must be lighter than the background to maintain the contrast ratio of atleast 4.5:1