Flex card is a very versatile card component. It automatically spans the width of its container. you can do many things with this type of card and display any type of content, wether on a website or in an app.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
<div class="flex-card simple-shadow">
<div class="card-body">
<div class="content">
<h2 class="no-margin">Card title</h2>
<p class="pt-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
</div>
</div>
Light bordered
You can display a flex card with a light border by adding the .light-bordered class.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
<div class="flex-card light-bordered">
<div class="card-body">
<div class="content">
<h2 class="no-margin title-bold">Card title</h2>
<p class="pt-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
</div>
</div>
Light raised
You can display a flex card with a light box shadow by adding the .light-raised class.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Raised
You can display a more important box shadow by adding the .raised class.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
<div class="flex-card light-bordered light-raised">
<div class="card-body">
<div class="content">
<h2 class="no-margin title-bold">Card title</h2>
<p class="pt-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
</div>
</div>
<div class="flex-card light-bordered raised">
<div class="card-body">
<div class="content">
<h2 class="no-margin title-bold">Card title</h2>
<p class="pt-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
</div>
</div>
Hover raised
You can make a card raise on hover by adding the .hover-raised class.
Hover me
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
<div class="flex-card light-bordered hover-raised">
<div class="card-body">
<div class="content">
<h2 class="no-margin title-bold">Card title</h2>
<p class="pt-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
</div>
</div>
Hover inset
You give some inset to a card on hover by adding the class .hover-inset.
Hover me
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
<div class="flex-card light-bordered hover-inset">
<div class="card-body">
<div class="content">
<h2 class="no-margin title-bold">Card title</h2>
<p class="pt-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
</div>
</div>
Reworked 3.0.0
Overflow card
If you plan to design cards with elements getting out of the flow, just add the .card-overflow class to the flex card element.
Marjory Cambell
CEO
Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet periculis ut. Vis in probo decore labitur. Unum simul an vis, tale patrioque eos ad, dicunt percipit ea nam.
Helen Miller
Sales team
Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet periculis ut. Vis in probo decore labitur. Unum simul an vis, tale patrioque eos ad, dicunt percipit ea nam.
Primary card
Give a card a primary background by adding the .primary-card class.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Secondary card
Give a card a secondary background by adding the .secondary-card class.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Accent card
Give a card an accent background by adding the .accent-card class.
Card title
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Flex card header
You can add a header with content to any flex card.
Helen Miller
Sales team
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
<div class="flex-card light-bordered hover-inset">
<div class="flex-card-header">
<div class="header-avatar">
<img src="assets/img/avatars/helen.jpg">
</div>
<div class="header-info">
<div class="header-title">Helen Miller</div>
<div class="header-subtitle">Sales team</div>
</div>
<div class="header-control ml-auto">
<i class="sl sl-icon-arrow-down"></i>
</div>
</div>
<div class="card-body is-small">
<div class="content">
<p class="pb-10">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
</div>
<div class="has-text-right">
<a class="button btn-align btn-outlined accent-btn rounded raised">Follow</a>
</div>
</div>
</div>
2
Feature card
Basic feature card
Unlike flex card, feature card's dimensions are static. By default it has 300px320px dimensions. Height can be extended by adding the modifiers .card-md.card-lg to the parent element. Feature cards display perfectly also on mobile.
Unlike flex card, feature card's dimensions are static. By default it has 300px x 320px dimensions. Height can be extended by adding the modifier .card-md to the parent element. Feature cards display perfectly also on mobile.
Some title
Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum inermis iudicabit.
<div class="feature-card card-md light-bordered hover-inset has-text-centered">
<div class="card-icon">
<img src="assets/img/graphics/icons/wallet-core.svg" alt="">
</div>
<div class="card-title">
<h4>Some title</h4>
</div>
<div class="card-feature-description">
<span class="">Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum inermis iudicabit.</span>
</div>
<a href="#" class="button btn-align btn-more is-link color-primary">
Learn more <i class="sl sl-icon-arrow-right"></i>
</a>
</div>
Image feature card
Unlike flex card, feature card's dimensions are static. By default it has 300px x 320px dimensions. Height can be extended by adding the modifier .card-md to the parent element. Feature cards display perfectly also on mobile.
Some title
Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum Cu soleat euismod mei, illum soleat ei vis.
<div class="feature-card card-lg light-bordered hover-inset">
<div class="card-img">
<img src="assets/img/photos/moon.png" alt="">
</div>
<div class="card-title pb-10 pt-10">
<h4>Some title</h4>
</div>
<div class="card-img-description has-text-left">
<span class="">Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum Cu soleat euismod mei, illum soleat ei vis, offendit partiendo intellegebat id vix. ...</span>
</div>
</div>
3
Classic card
Bulma cards
Bulma natively offers wonderful image cards, wich are customizable. If you want to find more about Bulma cards, head to the official cards documentation.
Helen Miller
23 mar 2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
Ressource cards are useful when displaying ressources, articles or blog post. They feature a image zoom out and zoom in effect when hovered. To activate these effects, add .zoomIn or .zoomOut to the figure container
Inspired by Medium and built on top of flex cards, media cards are a great alternative way to display your content. The side layout automatically stacks on touch devices.
Inspired by Medium and built on top of flex cards, media cards are a great alternative way to display your content. The side layout automatically stacks on touch devices.
<div class="flex-card media-card media-card-left light-bordered light-raised">
<div class="columns is-gapless is-desktop">
<div class="column is-4 media-stretch">
<div class="media-card-image" data-background="assets/img/photos/woman-glasses-back.jpeg"></div>
</div>
<div class="column content-column">
<div class="mcard-content">
<h3 class="mcard-title"><a href="#">Integrate our cities with technology, a major concern.</a></h3>
<p class="mcard-description is-hidden-touch">When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code... </p>
</div>
<div class="mcard-controls">
<div class="mcard-avatar">
<img src="assets/img/avatars/janet.jpg">
</div>
<div class="mcard-info">
<span><a href="#">Janet Biggs</a></span>
<div><span>06 Oct</span> <i class="fa fa-circle"></i> <span>4 min read</span></div>
</div>
<div class="mcard-actions ml-auto">
<span><i class="material-icons">bookmark_border</i> </span>
</div>
</div>
</div>
</div>
</div>
<div class="flex-card media-card media-card-right light-bordered light-raised">
<div class="columns is-gapless is-desktop">
<div class="column content-column">
<div class="mcard-content">
<h3 class="mcard-title"><a href="#">How to start a successfull React project?</a></h3>
<p class="mcard-description is-hidden-touch">When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code... </p>
</div>
<div class="mcard-controls">
<div class="mcard-avatar">
<img src="assets/img/avatars/melany.jpg">
</div>
<div class="mcard-info">
<span><a href="#">Melany Lane</a></span>
<div><span>29 Aug</span> <i class="fa fa-circle"></i> <span>15 min read</span></div>
</div>
<div class="mcard-actions ml-auto">
<span><i class="material-icons">bookmark_border</i> </span>
</div>
</div>
</div>
<div class="column is-4 media-stretch">
<div class="media-card-image" data-background="assets/img/photos/laptop-phone.jpeg"></div>
</div>
</div>
</div>
5
Event card
Hoverable event cards
A nice to have if you'd like to show some events or any content that should be revealed on hover.
24Aug
Marbella
Partners training session
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nulla cum impedit et nemo molestiae, suscipit animi officiis soluta natus, provident ab laudantium, amet dolorum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nulla cum impedit et nemo molestiae, suscipit animi officiis soluta natus, provident ab laudantium, amet dolorum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nulla cum impedit et nemo molestiae, suscipit animi officiis soluta natus, provident ab laudantium, amet dolorum.
