Cards
A flexible container for grouping content with multiple layout options available.
Contents
- Overview
- Example
- Content Types
- Sizing
- Text Alignment
- Navigation
- Styling Cards
- Layout Options
- SASS Reference
Overview
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Example
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Go somewhereContent Types
Cards support a wide variety of content, including images, text, list, links, and more. Below are examples of what’s supported.
Body
A basic building block of a card is the .card-body
. Use it whenever you need a padded section within a card.
Titles
Card titles and subtitles are used by adding .card-title
or .card-subtitle
to a <h*>
tag. If the .card-title
and the .card-subtitle
items are placed in a .card-body
item, the card title and subtitle are aligned nicely.
Card title
Support card subtitle
Text
With .card-text
, text can be added to the card. Text within .card-text
can also be styled with the standard HTML tags.
.card-text
will also remove the bottom margin from the last child in a section.
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Another portion of sample text that will have the bottom margin removed.
Links
Links can placed next to each other with some spacing by adding .card-link
to the <a>
tags.
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Card link Another linkImages
Cards include a few options for working with images. Choose from embedding an image in a card, appending “image caps” at either end of a card, or overlaying images with card content.
Images need to be wrapped with .card-img
to prevent additional whitespace from appearing in some browsers, such as IE.
Standard Images
Images can help add some visual interest to your cards.
Sample Card
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Last updated 3 mins ago
Card title
This is a card with text and a nested image.
Last updated 3 mins ago
Image Caps
Similar to headers and footers, cards can include top and bottom image caps.
Use .card-img-top
on the image, or embedded element, to round over the top corners when placing an image at the top of a card.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Last updated 3 mins ago
Use .card-img-bottom
on the image, or embedded element, to round over the bottom corners when placing an image at the bottom of a card.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Last updated 3 mins ago
Image Overlay
Turn an image into a card background and overlay your card’s text. The use of .card-img-top
and .card-img-bottom
will round over all corners of the image, and .card-img-overlay
will allow content to overlay the image. Depending on the image, you may or may not need additional styles or utility classes.
Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Lists
Create lists of content in a card with .list
component and it’s modifiers.
Adding .card-list
to a .list
will automatically add a border radius and will also remove the bottom margin from the last child in a section.
Cards do not currently have support for proper border radius handling for horizontal lists, or for lists within horizontal cards.
- List item
- List item
- List item
Sample Header
- List item
- List item
- List item
Tables
.card-table
will remove the bottom margin from the last child in a section.
Header | Header | Header |
---|---|---|
Cell | Cell | Cell |
Spanned Cell | Cell | |
Cell | Cell | Cell |
All Together
The multiple content types can be easily combined to create the card you need.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
- List item
- List item
- List item
Header and Footer
Add an optional header and/or footer within a card.
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereCard headers can be styled by adding .card-header
to <h*>
elements.
Featured
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereSizing
Cards assume no specific width
to start, so they’ll be 100% wide unless otherwise stated.
Constrain the width of cards via grid classes or custom CSS.
Grid Controlled
Using the grid, wrap cards in columns and rows as needed.
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereSpecial title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereCustom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereText Alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereSpecial title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereSpecial title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereNavigation
Add navigation items within a card’s header (or block) with Figuration’s navigation components.
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereSpecial title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur.
Go somewhereStyling Cards
Cards include various options for customizing their backgrounds, borders, and text color.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Background and Text
Use the text and background color utilities to change the look of a card.
Primary card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Success card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Info card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Warning card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Danger card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Light card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dark card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Border and Content
Use the border color utilities to change just the border-color
of a card. Note that you can put .text-{color}
classes on the parent .card
or a subset of the card’s contents as shown below.
Primary outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Success outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Info outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Warning outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Danger outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Light outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dark outline card
Subtitle text
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Header and Footer Variants
Recolor the header and footer sections of your cards by using the background context colors. Additional use of text color utilities might be needed.
Featured
Special title treatment
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Go somewhereLayout Options
In addition to styling the content within cards, Figuration includes a few options for laying out series of cards.
Horizontal Cards
Create horizontal card using .card-horizontal{breakpoint}
and adding child .card-col
containters, to control when content switches from column to row layout. Sizing of columns can be controlled via grid classes.
For basic use cases, border-radius
updates are handled for switching from column to row layout for the header, footer, and image card sub-components. In some cases, custom CSS may be needed. List and table sub-components are not currently handled. Card decks and card groups also do not have explicit support for horizontal cards.
Card title
This card layout will always display the image cap on the start side of the card.
Card title
This card layout will display the image cap below the body content at smaller viewports.
Featured
This card layout will display the image cap above the body content at smaller viewports.
Reverse Horizontal Card
Quickly swap the visual column order using one of the responsive reverse horizontal card classes, .card-horizontal{breakpoint}-reverse
.
In the examples below, the card will display the image cap above the body content, then at larger viewports, will display the image cap on the end side of the card.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Featured
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex;
to achieve their uniform sizing. Card groups are available with the class syntax of .card-group{-breakpoint}
, such as .card-group-md
to enable the group layout for md
screens and above.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Last updated 3 mins ago
Card title
Some sample text to build out the size of the card.
Last updated 3 mins ago
Card title
Some sample text to build out the size of the card. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
When using card groups with footers, they will automatically line up along the bottom edge of the card.
Card title
This is a card with text and an image.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card title
Some sample text to build out the size of the card. This card has even longer content than the first to show that equal height action.
Card Decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks, with the class syntax of .card-deck{-breakpoint}
, such as .card-deck-sm
to enable the deck layout for sm
screens and above.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Last updated 3 mins ago
Card title
Some sample text to build out the size of the card.
Last updated 3 mins ago
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Just like with card groups, card footers in decks will automatically line up.
Card title
This is a card with text and an image.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card title
Some sample text to build out the size of the card. This card has even longer content than the first to show that equal height action.
Responsive Rows
Controlling the number of cards in a row, based on the screen width is also possible using flex-basis
. Here is an example a way to achieve 1-across on xs
screens, 2-across on sm
and md
screens, and 4-across on lg
and up.
Heads Up! In order for this to work, the width of the card deck gutter (margins) need to be accounted for when assigning the width
. We are using width
and flex-basis: auto;
due to Flexbug #8.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card Columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns
. Cards are ordered from top to bottom and left to right when wrapped in .card-columns
. Card columns use the column-*
CSS properties.
Responsive variants are available with the class syntax of .card-columns{-breakpoint}
, such as .card-columns-sm
to enable the columns layout for sm
screens and above.
Card title that wraps to a new line
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
Some sample text to build out the size of the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Last updated 3 mins ago
Card columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns
class using Sass to generate a set of responsive tiers for changing the number of CSS columns.
If you are using responsive variants of the card columns, you may need to include all variations, or a combination, of the responsive .card-{breakpoint}-columns
classes, if it applies to your use-case.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for the card component.
Name | Type | Default | Description |
---|---|---|---|
$enable-card |
boolean | true |
Enable the generation of the card component classes.
Smaller segements of the card component classes can be disabled with the following $enable-* variables.
|
$enable-card-body |
boolean | true |
Enable the generation of the card body class. |
$enable-card-title |
boolean | true |
Enable the generation of the card title class. |
$enable-card-subtitle |
boolean | true |
Enable the generation of the card subtitle class. |
$enable-card-text |
boolean | true |
Enable the generation of the card text rules. |
$enable-card-link |
boolean | true |
Enable the generation of the card link rules. |
$enable-card-list |
boolean | true |
Enable the generation of the card list rules. |
$enable-card-table |
boolean | true |
Enable the generation of the card table rules. |
$enable-card-header |
boolean | true |
Enable the generation of the card header rules. |
$enable-card-footer |
boolean | true |
Enable the generation of the card footer rules. |
$enable-card-header-tabs |
boolean | true |
Enable the generation of the card header tabs class. |
$enable-card-header pills |
boolean | true |
Enable the generation of the card header pills class. |
$enable-card-img |
boolean | true |
Enable the generation of the card image rules. |
$enable-card-img-overlay |
boolean | true |
Enable the generation of the card image overlay class. |
$enable-card-horizontal |
boolean | true |
Enable the generation of the horizontal card rules. |
$enable-card-deck |
boolean | true |
Enable the generation of the card deck rules. |
$enable-card-deck-responsive |
boolean | true |
Enable the generation of the responsive card deck rules. |
$enable-card-group |
boolean | true |
Enable the generation of the card group rules. |
$enable-card-group-responsive |
boolean | true |
Enable the generation of the responsive card group rules. |
$enable-card-columns |
boolean | true |
Enable the generation of the card columns rules. |
$enable-card-columns-responsive |
boolean | true |
Enable the generation of the responsive card columns rules. |
$card-padding-y |
string | .75rem |
Card body vertical padding. |
$card-padding-x |
string | 1rem |
Card body horizontal padding. |
$card-margin-bottom |
string | 1rem |
Card vertical spacing. |
$card-bg |
string | $component-bg |
Card background color. |
$card-border-color |
string | $component-overlay-border-color |
Card border color. |
$card-border-width |
string | $border-width |
Card border width. |
$card-border-radius |
string | $border-radius |
Card border radius. |
$card-border-radius |
string | calc(#{$card-border-radius} - #{$card-border-width}) |
Card border radius for internal pieces. |
$card-link-margin-left |
string | 1.25rem |
Horizontal spacing between card link items. |
$card-title-margin-bottom |
string | 1rem |
Horizontal spacing for a card title. |
$card-subtitle-margin-top |
string | -.5rem |
Horizontal spacing for a card subtitle. |
$card-header-padding-y |
string | .75rem |
Vertical padding for card header. |
$card-header-padding-x |
string | 1rem |
Horizontal padding for card header. |
$card-header-bg |
string | $component-section-bg |
Background color for card header. |
$card-header-color |
string | null |
Text color for card header. |
$card-header-border-color |
string | $component-section-border-color |
Border color for card header. |
$card-header-border-width |
string | $card-border-width |
Border width for card header. |
$card-footer-padding-y |
string | .75rem |
Vertical padding for card footer. |
$card-footer-padding-x |
string | 1rem |
Horizontal padding for card footer. |
$card-footer-bg |
string | $component-section-bg |
Background color for card footer. |
$card-footer-color |
string | null |
Text color for card footer. |
$card-footer-border-color |
string | $component-section-border-color |
Border color for card footer. |
$card-footer-border-width |
string | $card-border-width |
Border width for card footer. |
$card-img-overlay-padding |
string | $card-padding-y $card-padding-x |
Vertical and horizontal padding for image overlay content. |
$card-deck-gutter-width |
string | $grid-gutter-width |
Horizontal spacing between cards in a card deck. |
$card-columns-count |
integer | 3 |
Number of columns for card columns. |
$card-columns-column-gap |
string | 1.25rem |
Horizontal spacing between cards for card columns. |
$card-horizontal-breakpoints |
list | map-keys($grid-breakpoints) |
Breakpoint list for responsive horizontal cards. |
$card-deck-breakpoints |
list | map-keys($grid-breakpoints) |
Breakpoint list for responsive card decks. |
$card-group-breakpoints |
list | map-keys($grid-breakpoints) |
Breakpoint list for responsive card groups. |
$card-columns-breakpoints |
list | map-keys($grid-breakpoints) |
Breakpoint list for responsive card columns. |
Mixins
No mixins available.