Card

Quick overview

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.

Quick start

To customize the card module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).

Cards & sections

The card module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.

Card mixins

The card module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.

Sample usage

@include make-card-alt-color ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);

Sample usage

@include make-card-alt-size ('large', 480px);

Sample usage

@include make-card-section-alt-color ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);

Sample usage

@include make-card-section-alt-style ('double-padded', 10px);