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.
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.
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.
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.
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.
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.
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.
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
Avatars can be added to ressource cards. It is a useful feature when showing articles with multiple authors.
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
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
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
