@ithaka/bonsai
Version:
ITHAKA core styling
122 lines (100 loc) • 4.17 kB
Markdown
---
title: Cards
description: A card is a flexible and extensible content container. The card component allows a visitor to quickly scan a page to find a specific piece of information. Additionally, multiple cards can be used to facilitate the understanding of a group of information.
foundation: http://foundation.zurb.com/sites/docs/card.html
sass: ./scss/_cards.scss
---
## How to Use
The card component contains other style guide components.
Below is a list of possible components to include, depending on the information you are chunking in a card. Use elements sparingly.
* Label
* Image
* Color
* Date
* Headline
* List
* Descriptive Copy
* Links
* Button(s)
## Default Card
The `.card` is broken up into two sections, the `.card-header` containing its title, and the `.card-section`,
containing its main content and (optional) interactive elements/calls to action.
```html_example
<div class="medium-5">
<div class="card">
<div class="card-header">
Default Card
</div>
<div class="card-section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
eget elit non sodales.</p>
</div>
</div>
</div>
```
<hr />
## Colored Card
Color is added by using existing [background](colors.html#background-color) and [text](colors.html#font-color) color classes.
Color combinations are limited by accessibility restrictions.
```html_example
<div class="medium-5">
<div class="card primary-background">
<div class="card-header white-color">
Same background
</div>
<div class="card-section white-color">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
eget elit non sodales.</p>
</div>
</div>
</div>
```
```html_example
<div class="medium-5">
<div class="card">
<div class="card-header yellow-green-background white-color">
Different colors
</div>
<div class="card-section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
eget elit non sodales.</p>
<p><button class="button">Hit me</button></p>
</div>
</div>
</div>
```
<hr />
## Image Card
An image can be included in the header with default card section styling. The specific image would need to be defined in your
stylesheet, in this case, the `sustainability` class sets `background-image: url("/images/Home_Module_Sustain.jpg");`
This examples illustrates how the use of an image can draw attention to a new collection using only the following elements
* Label
* Image
* Color
* Descriptive Copy
```html_example
<div class="medium-5">
<div class="card-image">
<div class="card-header sustainability">
Image Card
</div>
<div class="card-section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
eget elit non sodales.</p>
</div>
</div>
</div>
```
<hr />
## Guidelines
1. Be sure to confine cards within a given arrangement with `.columns` and pay attention to their resizing behavior
given their [spacing](/styleguide/spacing.html).
1. Use [colors](/styleguide/colors.html) to visually group similar or related cards.
1. When using an image, be sure to set the background color to something similar/complimentary to soften impact of page load.
## Accessibility
1. Be careful to use the heading (`h1`, `h2`, `h3`, `h4`) that fits best semantically within the structure of your page.
1. When combining colors for background and font make sure there is a contrast ratio of 4.5:1