Product Design Lessons
Intro to Foundation | Lesson #150
Foundation's Flexbox Cards to Win the Game
Learn how to use the Foundation Card component in Flex mode.
Cards are already an incredible design pattern component for many use cases and they get even more powerful when built with Flexbox. In fact, the display: flex property in CSS really shines when building UI components. The new Card component has an optional Flexbox mode that does a few things things out of the box that help you achieve your desired results quicker with less headaches. We’ve covered the basics of Foundation’s card component in a previous lesson, so today we’ll dive into Foundation’s Card component with Flex mode on to really supe up your projects.
How Flex Cards do it better:
- Equal height Cards: Cards can be equal height in rows without lots of CSS or JS (Equalizer) on any screen size.
- Space content horizontally like buttons, social icons, images, text and metadata with a single class.
- Align content vertically with a single class. No need to add a height, position the parent relative, and use the transform trick. Especially beneficial in a responsive environment where the width or content height changes.
- Build faster with less headaches: With Flexbox you have fewer restrictions and more flexibility. It will save you time and frustration over working with older positioning methods and floats.
- You can use it now: Browser support is great. The display flex property is supported on all modern browsers including IE 10+.
Activate Flex Mode
Enable flex mode for components in _settings.scss.
We’ll now call our cards, Flex Cards
Flexbox columns are all equal height.
You do not have to use Equalizer to make equal height columns in Flexbox as this is the default behavior. This makes it easy to make your cards also equal heights. Adding a flex helper class .flex-container
from Foundation makes the columns also display: flex
so that the Cards inside will all be all equal height within the row.
[See Codepen Example]
This works really well with the next feature of Flex Cards.
Flex Card’s content stacks vertically
In Flexbox spec, flex-direction: column;
shifts your content to flow vertically rather than side-by-side horizontally. The .card-divider
shrinks to height of the content and it’s padding. Your .card-section
now grows to fill the remaining space. This means, having equal height content, with content pinned to the bottom of the card is easier than ever.
[See Codepen Example]
Creating a Card Group
You might want all your cards to hug up against each other without padding or spacing. Since it’s a best practice to create your cards inside columns, you can use the built in grid classes to do this.
Add the .collapse
class to the row to remove the padding of all the columns within.
[See Codepen Example]
Flex Card’s Divider is where the action is
Adding one CSS property to the .card-divider
, you can use some of Foundation’s flex helper classes to align your content. In Flexbox, justify-content represents horizontal alignment and align-items represents vertical alignment.
To make the card-divider a flex component, add the .flex-container
class. Now you can use all the built in flexbox helper classes.
.align-top
- vertically align to top.align-middle
- vertically align to middle.align-bottom
- vertically align to bottom.align-left
- horizontally aligns to the left.align-center
- horizontally aligns to the center.align-right
- horizontally aligns to the right.align-justify
- horizontally aligns items to opposite ends.align-spaced
- horizontally aligns items with even spacing around them
This makes it easy to split content up vertically and pin actions or content to top or bottom. HAWT!
[See Codepen Example]
Next Steps
That’s it for this week! We’d love to see the amazing cards you create for your project, so be sure to share them with us! For a deeper dive into Cards and how you can use Foundation’s UI to build your layouts fast, check out our Intro to Foundation training taking place on Jan 10th. You’ll learn tons of tips and tricks directly from the Foundation development team.
About the instructor
Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.