Globex Corporation
12 open invoices · €48,200 due
Card
A framed box: one thing, or one part of a page, set apart. Specification: docs/components/card.md
Basics
A .canon-card: a header (a heading as its title, a description, actions) and a body. A <section> when it is a part of the page, an <article> when it stands on its own (one of many, in a list or a grid).
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Edge to edge
Anything directly in the card, not in its body, runs edge to edge: a Table drops its own frame for the card's.
Recent payments
The last two payments on this invoice
| Date | Method | Amount |
|---|---|---|
| Bank transfer | €4,000.00 | |
| Card ending 4242 | €2,400.00 |
Parts
Sections directly in a card are its parts: padded like a body, a line between them.
Notifications
What reaches you, and how
Sent to ada@example.com
Weekly summary
Every Monday morning
A link
A .canon-card-link in the title makes the whole card its link: a click anywhere opens it, while its other buttons stay buttons. Screen readers hear one link, named by the title.
Sizes
data-size on the card or a container: sm, md, lg.
Billing details
Where invoices go, and when they're due
Invoices are sent on the first working day of each month, and payment is due 30 days later.
Billing details
Where invoices go, and when they're due
Invoices are sent on the first working day of each month, and payment is due 30 days later.
Billing details
Where invoices go, and when they're due
Invoices are sent on the first working day of each month, and payment is due 30 days later.
Edge cases
Right to left. A card with no header, only a body. Narrow, the header's actions go under its title.
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30
Invoices are sent on the first working day of each month, and payment is due 30 days later.
Billing details
Where invoices go, and when they're due
- Company
- Globex Corporation
- Billing email
- billing@globex.example
- Payment terms
- Net 30