Card

One item in a grid or list of options people compare and pick, like a proposal line, product or plan: title, details, a price and a status note, with an optional image and a select checkbox.

Alpha Logic wireless ergonomic mouse

Rechargeable, 6 buttons and a thumb rest. Works with Windows and macOS over Bluetooth or the USB receiver.

$49.00

In stock

Usage

Use Card for items people scan side by side and often pick from. It is one component: pass the parts you need as props; every part is optional (header, badge, overline, title, description, amount, message, image, footer). The header row holds a badge and an overline, like a request code. description is two lines at most. amount is the price or key number. message is a short status line with an icon, colored by messageIntent. image shows a photo tile at the top right, or icon an icon tile. selectable adds a footer checkbox; clicking anywhere on the card toggles it, and the selected card turns blue. disabled greys the card out. href or onClick make the card open what it shows, like an account in a card view of a list: the title becomes the one link, its hit area covers the whole card, hover lifts the card and keyboard focus rings it. A card either opens something or is picked, not both. Lay cards out with the layout grid classes. actions and menu put the record's actions at the end of the footer, beside the checkbox: the ones it is used for as icon buttons, the rest behind More. Give a Card the same actions as the record's Table row and ListView row, so switching views never changes what can be done. See contracts/card.json for the full contract.

Do's

Proposal lines, products or plans people compare and pick, in a grid or a list.
Items that each need a title, a few details, a price and a status at a glance.
A card view of records where clicking a card opens that record: pass href or onClick.

Don'ts

Do not build a card from a div with a border, or add a ProductCard, ProposalCard or CardFooter. Use Card.
Do not use it for page sections. Use Section.
Do not use it for key numbers. Use Scoreboard.
Do not put rows of records in cards when people need to sort or compare columns. Use Table.
Do not use raw hex.
Do not make a card both selectable and open a record. Pick one: selectable for choosing, href or onClick for opening.
Do not put a Link or Button inside a card to open it. Pass href or onClick.
Do not give a record different actions in its Card, its Table row and its ListView row.