Accessibility Considerations

To ensure accessibility, always include descriptive and meaningful alt text for card images.

Usage

Cards are useed to showcase the preview of work projects. Acrds include hero images, title and short description and link to the individual project page.

Code example

      
        <div class="row gx-5 gy-5"> 
          <div class="col-sm-12 col-md-6 col-lg-4"> 
            <div class="card-pr"> 
              <div class="placeholder"> </div> 
              <h5 class="urbanist-h5"> Project Category</h5> 
              <p class="card-text"> Role and project description</p>                           
              <div class="StyleButton__container">
              <a href="#" class="text-decoration-none"></div> 
                 <svg data-bbox="9 70.9 181 59" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> 
                   <g> 
                  <path d="M159 70.9l-2.2 2.4L183.6 99H9v3h174.6l-26.2 25.3 2.1 2.6 30.5-29.3-31-29.7z"> </path> 
                   </g> 
                 </svg> 
               </div> 
               </span> 
            </div> 
           </div>