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.

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.

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.

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!

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.