# Cards

### Definition

Visual encapsulation of information. Can be used for testimonials, articles, rows, and columns. Can be simple or complex

{% @figma/embed fileId="tQHquN7nvB7fnuB7PnJDgc" nodeId="0:1" url="<https://www.figma.com/file/tQHquN7nvB7fnuB7PnJDgc/Cards?node-id=0:1&t=zO7lRvhEMhHtLjvO-1>" %}

### Examples

| Before                                                                                                                                                                                                             | After                                                                                                                                                                                                              | Mistakes                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FSJUpHJAUJxvc9NNerDiq%2Fimage.png?alt=media\&token=5152fa8f-6af1-4e30-a085-6e1a4a694944) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FGsZBM9YfrNvBhQGYTZnQ%2Fimage.png?alt=media\&token=8c0ccdc4-a05c-4567-b608-f980b629e3e5) | <ul><li>alignment</li><li>visual hierarchy (title not big enough)</li></ul> |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FlB7PxpNlzuzOm4xeiKZB%2Fimage.png?alt=media\&token=632e344b-9e67-4e04-a241-5c3ba9613a78) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2F6DPJdSGa4PoWJT4hX5as%2Fimage.png?alt=media\&token=e5871b0e-787a-4f6f-9d67-1fbc0a70306a) | <ul><li>contrast</li><li>scale</li></ul>                                    |
| ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FcssmWKG90k7qruGJODlJ%2Fimage.png?alt=media\&token=53f5449c-5707-4b5a-853b-eefeb5aa1eb7) | ![](https://479401367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwa23UtBopJhZJzkUE17S%2Fuploads%2FJLwsTUXFHkp5CnVHfTaR%2Fimage.png?alt=media\&token=f01694b3-449d-493a-85d7-6b347dfad500) | <ul><li>color</li><li>white space - between the cards</li></ul>             |