Stack the Deck in Your Favor with Foundation Cards

Lesson 148 | Learn how to use Foundation 6.3's Card Components.

Foundation is there to save you time and allow you to do your work with ease. With the ever growing popularity of using cards in design, we’ve decided to make your life easier by including a card component in the new Foundation 6.3 update. In this lesson we’ll take a look at what this new component is and how it can help you when using cards in your layouts.

Basic Setup

To start, let’s take a look at the features that the new Foundation card component comes with. You can start a card by using the .card class wrapper and you have a card divider which you can use to contain text, actions, or links. So let’s take a look at the basic markup of our card.

.card is your card wrapper - it contains your content and creates a border.

.card-divider acts as another section within your card. You might use this for social media icons, titles, or metadata. It’s a container with a background color and padding.

.card-section is usually where the main content of your card lives, it’s a container that also has the card padding. It differs from the .card-divider, in that it is less stylized, without a background color.

With this fairly basic but useful markup, you can create your base card to work with. You can arrange the content in any order to fit your aesthetic or hierarchical needs. Something else to note is that the image tag is set into the .card wrapper, but it’s outside of the .card-section or .card-divider, therefore it has no padding around it. It’s an easy way to apply the image to the full width of the card.

Conversely, the image will be subject to the padding within the .card-divider or .card-section wrappers, if you do not want the image to take the full width of the card.

Adding Hover and Transition to Your Cards

If you want to add a bit of flair to your cards, you can easily apply a hover state and even throw in a transition. Let’s take a look at how we applied hover and a transition to one our cards.

By applying a pseudo-class of .hover to the class of .card, we are giving a hover state to all of our cards in our layout. Adding a property like transition will make the hover more gradual and natural. By the end, our card looks like this:

Now, if the card’s border is too sharp for your site’s aesthetic, changing the border-radius is pretty simple. In Foundation we have a global-radius variable in the settings.scss file which allows you to set one consistent border-radius across all of your code.

You’ll find the _settings.scss file here: src/assets/scss/_settings.scss.

To create a custom border radius for all your cards, you can instead change the border-radius with the card variables in your settings.scss file. Simply get rid of the global-radius variable and replace with your desired value.

Next Steps

That’s the basics of our new card component in Foundation 6.3! Go ahead and check it out for yourself and feel free to send us what you make. We love to see how creative you can be with Foundation. If you’re interested in taking cards to the next level, be on the lookout for an upcoming lesson on how to combine cards with flexbox! This is really where cards can shine!