Card
The card module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.
All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.
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.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $card-name | String | Class name for card components | 'card' |
| $card-back-color | Color | Background color for card components | #fafafa |
| $card-fore-color | Color | Text color for card components | $fore-color |
| $card-border-style | Border | Border style for card components | 1px solid #9e9e9e |
| $card-border-radius | Border radius | Border radius for card components | 2px |
| $card-margin | Margin | Margin for card components | 16px |
| $card-box-shadow | Box shadow | Box shadow for card components | 0 1px 3px rgba(0,0,0, 0.1) |
| $card-normal-width | Width | Width for card components | 320px |
| $card-section-name | String | Class name for card components' sections | 'section' |
| $card-section-border-style | Border | Border style for card components' sections | 1px solid #bdbdbd |
| $card-section-padding | Padding | Padding for card components' sections | 6px |
| $card-section-media-name | String | Class name for card components' media sections | 'media' |
| $card-section-media-height | Height | Height for card components' media sections | 200px |
Card mixins
The card module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.
| Mixin | Description |
|---|---|
| make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color, $card-alt-border-style, $card-alt-border-radius, $card-alt-section-border-style) | Creates a new card color variant using the specified values. |
| make-card-alt-size ($card-alt-size-name, $card-alt-size-width) | Creates a new card size variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-alt-name | String | Class name for the card color variant | 'inverse' |
| $card-alt-back-color | Color | Background color for the card color variant | #212121 |
| $card-alt-fore-color | Color | Text color for the card color variant | #fafafa |
| $card-alt-border-style | Border | (Optional) Border style for the card color variant | 1px solid #424242 |
| $card-alt-border-radius | Border radius | (Optional) Border radius for the card color variant | 2px |
| $card-alt-section-border-style | Border | (Optional) Border style for the card color variant's section borders | 1px solid #616161 |
Sample usage
@include make-card-alt-color ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-alt-size-name | String | Class name for the card size variant | 'large' |
| $card-alt-size-width | Width | Width for the card size variant | 480px |
Sample usage
@include make-card-alt-size ('large', 480px);
| Mixin | Description |
|---|---|
| make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color, $card-section-alt-fore-color, $card-section-alt-border-style) | Creates a new card section color variant using the specified values. |
| make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) | Creates a new card section style variant using the specified values. |
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-section-alt-name | String | Class name for the card section color variant | 'dark' |
| $card-section-alt-back-color | Color | Background color for the card section color variant | #e0e0e0 |
| $card-section-alt-fore-color | Color | Text color for the card section color variant | #212121 |
| $card-section-alt-border-style | Border | (Optional) Border style for the card section color variant | 1px solid #bdbdbd |
Sample usage
@include make-card-section-alt-color ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $card-section-alt-name | String | Class name for the card section style variant | 'double-padded' |
| $card-section-alt-padding | Padding | Padding for the card section style variant | 10px |
Sample usage
@include make-card-section-alt-style ('double-padded', 10px);
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.