<div class="card" style="max-width: 20rem;">
	<img src="assets/img/abstract-images/abstract-1.jpg" 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-primary">Action Button</a>
	</div>
</div>

<div class="card shadow" style="max-width: 20rem;">
	<img src="assets/img/abstract-images/abstract-1.jpg" class="card-img-top" alt="...">
	<div class="card-body">
	  <h5 class="card-title">Cool Card with Shadow</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>
	</div>
	<div class="card-footer">
		<a href="#" class="btn btn-primary">Action Button</a>
	</div>
</div>

<div class="card shadow" style="width: 18rem;">
<img src="assets/img/abstract-images/abstract-2.jpg" 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>
</div>
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
  <a href="#" class="card-link">Card link</a>
  <a href="#" class="card-link">Another link</a>
</div>
</div>

<div class="card text-bg-dark" style="max-width: 20rem; min-height: 25rem;">
	<img src="assets/img/abstract-images/abstract-4.jpg" class="card-img h-100 object-fit-cover" alt="...">
	<div class="card-img-overlay d-flex flex-column justify-content-end" style="background-color: #00000057;">
		<h4 class="card-title fw-bold">Blog Article</h4>
		<p class="card-text text-white fw-light text-truncate">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima sint quae porro repellendus. Dolorum quos veniam et reiciendis neque illum explicabo ducimus vel! Deserunt deleniti, voluptates et iusto ab veniam.
		</p>
		<small class="card-text text-white fw-lighter fst-italic mb-3"><small>Last updated 3 mins ago</small></small>
	  	<a href="#!" class="btn btn-primary rounded-pill btn-sm d-grid">
			Link
		</a>
	</div>
</div>

<div class="card bg-success-subtle">
	<div class="card-body">
	  <h4 class="card-title text-success-emphasis">Success Card </h4>
	  <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias alias vero sit voluptatibus commodi, veniam qui explicabo voluptates at totam dolor labore pariatur. Eius culpa unde hic. Cumque, explicabo officia?.</p>
	</div>
</div>

<div class="card shadow-sm mb-3" style="max-width: 540px;">
	<div class="row g-0">
	  	<div class="col-md-4">
			<img src="assets/img/abstract-images/abstract-6.jpg" class="img-fluid rounded h-100 object-fit-cover" alt="...">
	  	</div>
		<div class="col-md-8">
			<div class="card-body">
				<h5 class="card-title">Card title</h5>
				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
				<small class="card-text"><small class="text-body-secondary fst-italic">Last updated 3 mins ago</small></small>
			</div>
	  	</div>
	</div>
</div>