Cards

Used to display information to users, with button to trigger actions. These are very versatile and often found in eCommerce websites and blogs.

Image on top

Cat

Card Title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores natus veniam animi, reprehenderit tempora quam perspiciatis id nostrum neque? Consequatur.

<div className="card">
	<img src="https://placekitten.com/250/150" alt="Cat" />
	<div className="card-body">
		<h4>Card Title</h4>
		<p>
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores natus
			veniam animi, reprehenderit tempora quam perspiciatis id nostrum neque?
			Consequatur.
		</p>
		<button>Read More...</button>
	</div>
</div>

html

Image on side

Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias, id fuga. At corrupti laborum sit, hic, quis numquam odio, cumque aliquam unde fugiat molestias aliquid eaque fugit a iure iste!

<div className="card card-img-side">
	<img src="https://placekitten.com/150/200" alt="" />
	<div className="card-body">
		<h4>Card Title</h4>
		<p>
			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias, id fuga.
			At corrupti laborum sit, hic, quis numquam odio, cumque aliquam unde
			fugiat molestias aliquid eaque fugit a iure iste!
		</p>
		<button>Read More</button>
	</div>
</div>

html

© DogeUI, 2022