.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Cards

Cards group related content or actions into discrete, visually bounded containers. In Petrel, cards appear in dashboards, selection panels, and summary views.
## When to use

- Displaying a collection of similar items where each item has multiple attributes
- Summary views of Petrel objects (wells, horizons, fault sets)
- Navigation starting points — linked cards to major areas of the application


## When not to use

- For displaying long lists of simple items — use a table instead
- For dense data comparison — use a table with sortable columns
- As a substitute for a property panel — cards are for browsing, not editing


## Do and Don't

DO
Make the entire card surface clickable when the card's primary purpose is navigation. A small click target in the corner of a card is frustrating for users trying to quickly navigate between items.
DON'T
Don't put more than one interactive action inside a clickable card. Multiple click targets within a card create ambiguity about what a click on the card body does.
### Related pages

Materials
— Card surface and elevation
Spacing
— Card padding values
Tables
— When to use tables instead