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.
mass media
All-in-one Marketing app
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.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
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>
You can display a flex card with a light border by adding the .light-bordered class.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
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>
You can display a flex card with a light box shadow by adding the .light-raised class.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
You can display a more important box shadow by adding the .raised class.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
You can make a card raise on hover by adding the .hover-raised class.
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>
You give some inset to a card on hover by adding the class .hover-inset.
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>
If you plan to design cards with elements getting out of the flow, just add the .card-overflow class to the flex card element.
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.
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.
Give a card a primary background by adding the .primary-card class.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Give a card a secondary background by adding the .secondary-card class.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
Give a card an accent background by adding the .accent-card class.
Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.
You can add a header with content to any flex card.
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>
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.
<div class="feature-card light-bordered has-text-centered"></div>
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.
<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>
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.
<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>
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
Kevin Smith
12 apr 2017
Sandra Mayers
29 apr 2017
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
Learning Center
Learning Center
<div class="card ressource-card">
<div class="card-image">
<figure class="image is-4by3 zoomOut">
<img src="assets/img/photos/city.png" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<a href="#" class="color-primary">How data insight helps business</a>
<p class="subtitle is-6">Blog</p>
</div>
</div>
</div>
</div>
Avatars can be added to ressource cards. It is a useful feature when showing articles with multiple authors.
<div class="card ressource-card">
<div class="card-image">
<figure class="image is-4by3 zoomIn">
<img src="assets/img/photos/moon-mountains.png" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<a href="#" class="color-primary">Tight collaboration equals success</a>
<p class="subtitle is-6">Learning Center</p>
</div>
</div>
</div>
<div class="ressource-avatar">
<img src="assets/img/avatars/funny2.svg">
</div>
</div>
Floating image cards extend Bulma cards. They feature a floating wide image or a boxed one. Check the example markup for more details.
New perspectives
23 mar 2017
New perspectives
23 mar 2017
New perspectives
23 mar 2017
<div class="card card-floating-wide card-shadow">
<div class="card-image">
<figure class="image is-4by3">
<img src="assets/img/photos/cactus.png" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4 color-accent">New perspectives</p>
<p class="subtitle is-6">23 mar 2017</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
<div class="has-text-left">
<a class="button btn-align accent-btn raised">Read more</a>
</div>
</div>
</div>
Floating image cards extend Bulma cards. They feature a floating wide image or a boxed one. Check the example markup for more details.
New perspectives
23 mar 2017
New perspectives
23 mar 2017
New perspectives
23 mar 2017
<div class="card card-floating-boxed card-shadow">
<div class="card-image">
<figure class="image is-4by3">
<img src="assets/img/photos/cactus.png" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4 color-accent">New perspectives</p>
<p class="subtitle is-6">23 mar 2017</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
<div class="has-text-left">
<a class="button btn-align accent-btn raised">Read more</a>
</div>
</div>
</div>
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.
When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...
When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...
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.
When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...
When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...
A nice to have if you'd like to show some events or any content that should be revealed on hover.
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.
Event details
Release momentum
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.
Event details
Node JS Conf
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.
Event details
<div class="event-card">
<div class="card-date">
<div class="date">
<span class="day">05</span>
<span class="month">Dec</span>
</div>
</div>
<div class="img-container">
<img src="https://source.unsplash.com/tnv84LOjes4/" alt="" />
</div>
<div class="card-text">
<div class="text text-container">
<div class="text text-header">
<h2 class="text text-title">Chicago</h2>
<p class="text text-subtitle">Node JS Conf</p>
</div>
<div class="text text-details">
<p class="text text-description">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.
</p>
<a href="#" class="button btn-align btn-more is-link color-accent mt-10">
Event details <i class="sl sl-icon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
