Cards

Card styles and variations.

Get Started

1

Flex-card

Basic flex card

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.

SHOW CODE 

<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.

SHOW CODE 

<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.

SHOW CODE 

<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.

SHOW CODE 

<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.

SHOW CODE 

<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.

Follow
SHOW CODE 

<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.

SHOW CODE 

<div class="feature-card light-bordered has-text-centered"></div>

Icon 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 inermis iudicabit.
Learn more

Some title

Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum inermis iudicabit.
Learn more

Some title

Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum inermis iudicabit.
Learn more
SHOW CODE 

<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.
Learn more

Some title

Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum Cu soleat euismod mei, illum soleat ei vis.
Learn more

Some title

Lorem ipsum dolor sit amet, clita laoreet ne cum. His caelus elet cu harum Cu soleat euismod mei, illum soleat ei vis.
Learn more
SHOW CODE 

<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.
Read more

Kevin Smith

12 apr 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more

Sandra Mayers

29 apr 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more

Ressource cards

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

Work with less inbound emails

Learning Center

Tight collaboration equals success

Learning Center

How data insight helps business

Blog

SHOW CODE 

<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>

Avatar Ressource cards

Avatars can be added to ressource cards. It is a useful feature when showing articles with multiple authors.

Work with less inbound emails

Learning Center

Tight collaboration equals success

Learning Center

How data insight helps business

Blog

SHOW CODE 

<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 wide image

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more

New perspectives

23 mar 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more

New perspectives

23 mar 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more
SHOW CODE 

<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 boxed image

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more

New perspectives

23 mar 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more

New perspectives

23 mar 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
Read more
SHOW CODE 

<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>
4

Media card

Left media card

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.

How SaaS can help small businesses becoming big players?

When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...

Henry Rogers
13 Oct 8 min read
bookmark_border

Integrate our cities with technology, a major concern.

When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...

Janet Biggs
06 Oct 4 min read
bookmark_border

Right media card

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.

How to start a successfull React project?

When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...

Melany Lane
29 Aug 15 min read
bookmark_border

Tomorrow, smart cities will rule the earth.

When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code...

Janet Biggs
06 Oct 4 min read
bookmark_border
SHOW CODE 

<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.

24 Aug

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.

Event details
19 Sep

Prague

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
05 Dec

Chicago

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
SHOW CODE 

<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>