Card
A contained item / section of content, often with associated actions or meaning.
Demo
Clickable Card
Hello! This card is clickable. You can click it.
Clickable Card 2
Hello! This card is clickable. You can click it.
Code
<div class="card mb-3" style="width: 300px;">
<img class="card-img" src="https://jfenn.me/images/headers/cabbage.jpg">
<span class="card-title">Normal Card</span>
<div class="card-body">
Hello! This is a normal card. It is very normal.
</div>
<div class="card-actions">
<a href="#" class="me-3">Source Code</a>
<a href="#" class="me-3">Report a bug!</a>
</div>
</div>
<!-- To keep interactive card elements accessible through keyboard navigation,
you should specify the "tabindex" and "role" attributes, as well as handling
the "keydown" event for its click listener -->
<div class="card mb-3" style="width: 300px;" tabindex="0" role="button" onclick="alert('hi!');" onkeydown="if (event.key == ' ' || event.key == 'Enter' || event.key == 'Spacebar') alert('hi!');">
<span class="card-title">Clickable Card</span>
<div class="card-body">
Hello! This card is clickable. You can click it.
</div>
</div>
<!-- Always make sure this works as you expect; if you use an anchor element in
a clickable card, specifying a tabindex is not always necessary as the
anchor element can be used instead. -->
<div class="card mb-3" style="width: 300px;" onclick="location.href = '#';">
<a href="#" class="card-title">Clickable Card 2</a>
<div class="card-body">
Hello! This card is clickable. You can click it.
</div>
</div>
<div class="card card-accent mb-3" style="width: 300px;">
<span class="card-title">Color Card</span>
<div class="card-body">
This card has an accented background.
</div>
<div class="card-actions">
<a href="#" class="link">
<i class="link-img material-icons">cake</i>
<span class="link-title">The Cake is a Lie</span>
</a>
</div>
</div>