<!--
Copy and paste the code below into Cascade. Make sure to change the <img> src attribute to so it displays the correct image for each card. Adjust the <img> alt tag as well. Also be aware you need to change the href for each <a> tag.

You can copy and paste the "col" div and the card info within if you want to create more than three cards. To adjust the layout of the cards you can edit the classes in the "row" div. "row-cols-1" will give you a single column layout. "row-cols-md-2" will give you a two column layout on medium screen sizes and above. You can play with the column numbers and screen breakpoints as you see fit. 
-->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
  <div class="col mb-3">
    <div class="card">
      <img src="https://www.dummyimage.com/600x400/808080/fff.jpg&text=card%20image" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Example content for your card</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
  <div class="col mb-3">
    <div class="card">
      <img src="https://www.dummyimage.com/600x400/808080/fff.jpg&text=card%20image" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Example content for your card</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
  <div class="col mb-3">
    <div class="card">
      <img src="https://www.dummyimage.com/600x400/808080/fff.jpg&text=card%20image" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Example content for your card</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
  <div class="col mb-3">
    <div class="card">
      <img src="https://www.dummyimage.com/600x400/808080/fff.jpg&text=card%20image" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Example content for your card</p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
</div>

External CSS

  1. https://www.ualberta.ca/_assets/css/framework-v2.css
  2. https://www.ualberta.ca/_assets/css/font-awesome.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js