# Cards
Cards provide concise information and actions as they relate to a single object. They contain content such as images, text, lists, data, rich media, actions, and more.
Used to surface pertinent information, cards make it easy for users to browse information.
```html
Discussions
You have 1 assignments due tomorrow.
```
## Best Practices
* Roll up and emphasize important information to make it easy for users to find
* Use cards when the user will benefit from a visual representation of the associated item
* Use cards when the content doesn’t rely heavily on the sort order
* Don't force the user to click in and out of cards to find information that’s important to the work flow
* Don't use cards
* when the user needs to easily compare data from one card to another
* when the sort order needs to be emphasized – consider a list or table
* for user generated content
## Composition
Cards are composed of 3 sections. Each card will have a content section but is not required to have a header or footer.
```html
Discussions
You have 1 assignments due tomorrow.
```
## Card [d2l-card]
The `d2l-card` element is a container that provides specific layout using several slots such as `content`, `header`, `footer`, `badge`, and `actions`. It can also be configured as a link for navigation.
```html
Discussions
You have 1 assignments due tomorrow.
```
### Slots
| Slot | Type | Description |
|--|--|--|
| `content` | required | Primary content such as title and supplementary info (no actionable elements) |
| `actions` | optional | Buttons and dropdown openers to be placed in top right corner of header |
| `badge` | optional | Badge content, such as a profile image or status indicator |
| `footer` | optional | Footer content, such secondary actions |
| `header` | optional | Header content, such as course image (no actionable elements) |
### Properties:
| Property | Type | Description |
|--|--|--|
| `align-center` | Boolean | Style the card's content and footer as centered horizontally |
| `download` | Boolean | Download a URL instead of navigating to it |
| `href` | String | Location for the primary action/navigation |
| `rel` | String | Relationship of the target object to the link object |
| `subtle` | Boolean | Subtle aesthetic on non-white backgrounds |
| `target` | String | Where to display the linked URL |
| `text` | String | Accessible text for the card; required if `href` is set |
See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information on standard link attributes and their values.
## Card content: Title [d2l-card-content-title]
The `d2l-card-content-title` element is a helper for providing layout/style for a title within the `content` slot.
```html
Biology
Discussions
You have 1 assignments due tomorrow.
```
## Card Content: Meta [d2l-card-content-meta]
The `d2l-card-content-meta` element is a helper for providing layout/style for a meta data within the `content` slot.
```html
Discussions
You have 1 assignments due tomorrow.
```
## Card Footer: Link [d2l-card-footer-link]
The `d2l-card-footer-link` element is an icon link that can be placed in the `footer` slot.
```html
Discussions
You have 1 assignments due tomorrow.
```
### Slots
| Slot | Type | Description |
|--|--|--|
| `tooltip` | required | The tooltip for the footer link. |
### Properties:
| Property | Type | Description |
|--|--|--|
| `icon` | String, required | Preset icon key (ex. "tier1:gear") |
| `text` | String, required | Accessible text for the link |
| `download` | Boolean | Download a URL instead of navigating to it |
| `href` | String | Location for the primary action/navigation |
| `rel` | String | Relationship of the target object to the link object |
| `secondary-count` | Number | Count to display as a superscript on the icon |
| `secondary-count-type` | String | Controls the style of the secondary count bubble; options are `notification` and `count` |
| `secondary-count-max-digits` | Number | Overrides the default maximum digits of the secondary count bubble (2 for `notification` and no limit for `count` type) |
| `target` | String | Where to display the linked URL |
See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information on standard link attributes and their values.
## Future Improvements
* scroll API for the dialog content (see [#341](https://github.com/BrightspaceUI/core/issues/341))
Looking for an enhancement not listed here? Create a GitHub issue!