Card

Ripple UI comes with a card component that can be used to display content in a card format.

​

Default

Simple example of a card.

<div class="card">
	<div class="card-body">Hello World</div>
</div>

​

Title, Body and Footer

A card can have a title, body and footer.

<div class="card">
	<div class="card-body">
		<h2 class="card-header">Maximizing Your Productivity at Work</h2>
		<p class="text-content2">Are you looking to increase your productivity at work?</p>
		<div class="card-footer">
			<button class="btn-secondary btn">Learn More</button>
		</div>
	</div>
</div>

​

Image cover

A card can have an image cover.

Maximizing Your Productivity at Work

Are you looking to increase your productivity at work?

Learn More

<div class="card card-image-cover">
	<img src="https://source.unsplash.com/random/300x200" alt="" />
	<div class="card-body">
		<h2 class="card-header">Maximizing Your Productivity at Work</h2>
		<p class="text-content2">Are you looking to increase your productivity at work?</p>
		<div class="card-footer">
			<button class="btn-secondary btn">Learn More</button>
		</div>
	</div>
</div>

​

Image cover bottom

A card can have an image cover at the bottom.

Maximizing Your Productivity at Work

Are you looking to increase your productivity at work?

Learn More

<div class="card card-image-cover">
	<div class="card-body">
		<h2 class="card-header">Maximizing Your Productivity at Work</h2>
		<p class="text-content2">Are you looking to increase your productivity at work?</p>
		<div class="card-footer">
			<button class="btn-secondary btn">Learn More</button>
		</div>
	</div>
	<img src="https://source.unsplash.com/random/300x200" alt="" />
</div>

​

API