--- name: card url: /card title: Card ---

Card

A card is a rectangular container that holds your content, makes it easy to digest, and separates it from other similar content.


This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.


Basic HTML

Wrapping your content with the card class creates the basic structure. Your text will be contained in a card-section class to give it the proper padding. You can create Tabs with this basic HTML:

The most basic elements in the Foundation for Apps grid are the Group and Block.

The most basic elements in the Foundation for Apps grid are the Group and Block.

Advanced HTML

Add an image and card-divider class and you have one fancy looking Card. You can create advanced versions of Card with this HTML:

This is a header

Look at This Swag Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.

This is a header

Look at This Swag Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.

Additional Options

Cards can be themed with our built-in coloring classes.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.

This is content

The Basics: Group and Block

The most basic elements in the Foundation for Apps grid are the Group and Block.


Sass Mixins

Use our mixins to build a card with a custom class.

// This is a card container .custom-card { @include card-container( $background: #fff, // Background color $color: #000, // Text color $border: 1px solid #000, // Border $radius: 4px, // Border radius $shadow: 0 4px 10px black, // Box shadow $padding: 1rem, $margin: 1rem // Margin bottom ); } // This is a card divider .custom-card-divider { @include card-divider( $background: #ccc, $padding: 1rem ); } // This is a card section .custom-card-section { @include card-section( $padding: 1rem ); }

Sass Variables

You can customize cards with these variables in _settings.scss: