Sponsor
Card
An all-around flexible and composable component
The card component comprises several elements that you can mix and match:
card: the main container
card-header: a horizontal bar with a shadow
card-header-title: a left-aligned bold textcard-header-icon: a placeholder for an iconcard-image: a fullwidth container for a responsive imagecard-content: a multi-purpose container for any other elementcard-footer: a horizontal list of controls
card-footer-item: a repeatable list itemYou can center the card-header-title by appending the is-centered modifier.
Example
John Smith
@johnsmith
HTML
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://bulma.io/assets/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>The card-header can have a title and a Bulma icon:
Example
Card header
HTML
<div class="card">
<header class="card-header">
<p class="card-header-title">Card header</p>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</header>
</div>The card-image is a container for a Bulma image element:
Example
HTML
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
</div>The card-content is the main part, ideal for text content, thanks to its padding:
Example
HTML
<div class="card">
<div class="card-content">
<div class="content">
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec
id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
consectetur purus sit amet fermentum.
</div>
</div>
</div>The card-footer acts as a list of for several card-footer-item elements:
Example
HTML
<div class="card">
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>Example
Component
HTML
<div class="card">
<header class="card-header">
<p class="card-header-title">Component</p>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris.
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>Example
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
Jeff Atwood
HTML
<div class="card">
<div class="card-content">
<p class="title">
“There are two hard things in computer science: cache invalidation, naming
things, and off-by-one errors.”
</p>
<p class="subtitle">Jeff Atwood</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on
<a href="https://twitter.com/codinghorror/status/506010907021828096"
>Twitter</a
>
</span>
</p>
<p class="card-footer-item">
<span> Share on <a href="#">Facebook</a> </span>
</p>
</footer>
</div>|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
