Index

arrow_back "Miscellaneous" Category

Card

A contained item / section of content, often with associated actions or meaning.

Demo

Normal Card
Hello! This is a normal card. It is very normal.
Clickable Card
Hello! This card is clickable. You can click it.
Clickable Card 2
Hello! This card is clickable. You can click it.
Color Card
This card has an accented background.

Code

code scss/elements/_card.scss
<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>