Cards
Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on.
<a class="qw-card">
<div class="qw-card_inner">
<div class="qw-card_header">
<h3 class="qw-card_title h4 m-0">Card Title</h3>
</div>
<div class="qw-card_separator"></div>
<div class="qw-card_body">Card Body</div>
</div>
</a>
Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action.
Limit the length of content text in cards. Their purpose is to give users a quick overview of information.
All cards must include:
- Title
- Separator
- Description
- Interactive content - a button or link (the card itself can be a link)
Optional card elements are:
- Subtitle
- Avatar
- Status
- Footer links
Alternate card styles are:
- Centered
- Large/wide
- Horizontal
Do
- All cards share the same elements in the given context
Don't
- Mix and match card styles and elements
- Put cards on top of cards. This creates too many layers of depth.
Basic cards
Since cards are used to group similar concepts, all cards are contained in a parent .qw-cards element. Each card element is assigned a class of .qw-card. Our default card is a block level link, but can be modified to have multiple links, in the footer.
Card Title
Aut, nobis harum. Voluptate eveniet fuga blanditiis ducimus recusandae minima ad quis consequatur dolores expedita! Ex, blanditiis repellendus.
Card Title
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Card Title
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Card Title
Vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Card Title
Nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac.
Subtitles
When adding a subtitle, the title and subtitle elements must be wrapped in an additional div for formatting purposes.
Avatars
To represent users or features within the product, an avatar can be added to the card. When adding an avatar or other media, the cards must use the centered style as well (see below). Use large avatars in portrait/vertical orientation, .qw-avatar-lg and in landscape/horizontal use size medium, .qw-avatar-md.
Status
Footer links
In cases where a single action isn't sufficient, the card as a link can be replaced by a card with a link (links) in the footer. Show the most prominent action, and place the remaining actions in a dropdown menu. Footer links may be represented with icons and hidden text descriptions(see Horizontal with footer links below), but text is preferred.
1-on-1s
Manage and create 1-on-1 cycles and templates for your organization.
Users
Manage and create users at your organization.
Small cards
If the contents of the card require less space, a class of .qw-cards_small can be added to .qw-cards to modify the base width of the cards.
Card Title
Aut, nobis harum. Voluptate eveniet fuga blanditiis ducimus recusandae minima ad quis consequatur dolores expedita! Ex, blanditiis repellendus.
Card Title
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Card Title
Vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Card Title
Aut, nobis harum. Voluptate eveniet fuga blanditiis ducimus recusandae minima ad quis consequatur dolores expedita! Ex, blanditiis repellendus.
Card Title
Nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac.
Card Title
Vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Large cards
If the contents of the cards in the UI require more space, a class of .qw-cards_large can be added to modify the breakpoint where the width of the cards change.
A more verbose card title
Eos expedita asperiores, dolor ut minus nam maxime, enim beatae minima assumenda, accusantium dolorem.
A more verbose card title
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac.
A more verbose card title
Nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit.
Centered
Change the alignment of card contents to centered with .qw-card_centered.
Horizontal
Switch the orientation of cards, particularly those with media/avatars, to horizontal (landscape) with .qw-card_horizontal. These cards should also always use .qw-card_large for the additional width it provides.
Horizontal with footer links
Spaceman Spiff
Superhero
| Location | Space Station |
|---|---|
| Department | Exploration |
Usage
| Selector | Summary |
|---|---|
| .qw-card | Creates the card component |
| .qw-card_title | Identifies the title element |
| .qw-card_subtitle | Identifies the subtitle element |
| .qw-card_separator | Creates the separator between the title and body |
| .qw-card_body | Creates the container for the description and main contents of the card |
| .qw-card_status | Creates the container for status elements |
| .qw-card_footer | Creates the footer for actionable elements |
| .qw-card_large | Creates alternate card size |
| .qw-card_centered | Modifies the alignment of card contents |
| .qw-card_horizontal | Switches the layout of the card from vertical (portrait) to horizontal (landscape) |