tabwebExtreme cards
Fourteen deliberately crowded cards. Compare the title, image, data, and decoration collisions before narrowing the API.
Titles meet images
Header titles and body titles are both legal, even when images compete for space.
Header title
Header subtitle
Another title in the body
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Header before image
Does the visual order still make sense?
Body title after image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Bottom image
Footer and image both want the last word
Body title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Image inside body
An inline image rather than a card-edge image
Before the photo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
After the photo
Data versus decoration
Charts and tables compete with headings, stamps, and footers.
Chart + stamp
The watermark occupies chart space
Visits, again
Image + chart
Two competing hero visuals
Table + stamp
A dense card with no body wrapper
| Plan | Users | Revenue |
|---|---|---|
| Basic | 48 | $480 |
| Plus | 32 | $960 |
| Business | 12 | $1,200 |
Table in body
Extra headings around a compact table
A second report title
| Stage | Count |
|---|---|
| Open | 14 |
| Closed | 27 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Too many switches
Status, ribbons, stamps, progress, rotation, and links can stack up.
Stacked + rotated
Four treatments on one card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Inactive image + stamp
Muted content still has a watermark
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Active + borderless
What does a ribbon attach to?
Another title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Kitchen sink
Long content and nested cards push the same API beyond a single clear purpose.
Everything at once
Stamp, ribbon, image, chart, table, progress
Yet another title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
| Metric | Value |
|---|---|
| Visits | 42 |
| Orders | 28 |
Nested + scrollable
A card containing more cards and long copy
Body title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.
Nested image
Nested stamp
Inside an already stamped parent
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto beatae consequatur doloribus eligendi, enim expedita facilis illo impedit labore magni minus molestias neque nostrum, pariatur quas sed sint vitae.