Astro Cards - Ecommerce

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-dark mb-0">Go somewhere</a>
  </div>
  </div>
</div>

<div class="card card-frame">
  <div class="card-body shadow-sm border border-radius-sm">
    This is some text within a card body.
  </div>
</div>

<div class="card">
   <!-- Card image -->
   <div class="card-header p-0 mx-3 mt-3 position-relative z-index-1">
     <img class="border-radius-lg w-100" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved1.jpg" alt="Image placeholder">
     <!-- List group -->
     <ul class="list-group list-group-flush mt-2">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
     </ul>
    </div>
   <!-- Card body -->
   <div class="card-body">
    <h3 class="card-title mb-3">Card title</h3>
    <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.</p>
    <a href="javascript:;" class="btn btn-dark">Go somewhere</a>
   </div>
</div>

<div class="card card-blog card-plain">
  <div class="position-relative">
    <a class="d-block blur-shadow-image">
      <img src="https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1920&amp;q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
    </a>
  </div>
  <div class="card-body px-0 pt-4">
    <p class="text-primary font-weight-bold text-sm text-uppercase">Enterprise</p>
    <a href="javascript:;">
      <h4>
        Siri brings hands-free TV to more devices
      </h4>
    </a>
    <p>
      Siri's latest trick is offering a hands-free TV viewing experience, that will allow consumers to turn on or off their television, change inputs, fast forward, rewind and more, without having to first invoke a specific skill, or even
      press a button on their remote.
    </p>
    <button type="button" class="btn btn-dark mt-3">Read more</button>
  </div>
</div>

<div class="card bg-gradient-default">
  <div class="card-body">
    <h3 class="card-title text-info text-gradient">Testimonial</h3>
    <blockquote class="blockquote text-white mb-0">
      <p class="text-dark ms-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer text-gradient text-info text-sm ms-3">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-background">
  <div class="full-background" style="background-image: url('https://images.unsplash.com/photo-1541451378359-acdede43fdf4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80')"></div>
  <div class="card-body pt-12">
    <h4 class="text-white">Search and Discovery</h4>
    <p>Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards.</p>
  </div>
</div>

<div class="card bg-dark text-white border-0">
    <img class="card-img" src="https://images.unsplash.com/photo-1587437720061-dc5f28eb58ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80" alt="Card image">
</div>