The option card component allows confronting some options of an item (product or service) and can be used to set up or even filter a selection. The content of each option card must be a comparable synthesis to help the user make a choice.
Please, don't confuse the option card with the Card component, which has different usage.
The component provides a default frame and its selected state. Please note that the structure can't be overridable. From an accessible and inclusive way, the option group always contain a checkbox for the multiple choices or a radio button for the single choices.
There are two sizes of padding for the option card.
|Medium (default)||1mu (16px)|
Paddings aren't overridable to keep consistency through products.
Depending on your need, radio buttons and checkboxes can be vertically centred.
The content should be short and readable to help users to compare it quickly and easily.
For accessibility reasons, each option card must be fully clickable. Please, don't display secondary actions inside unselected ones.
Depending on the context, a button or a link can appear if the option card is selected.
In case you have to associate a button (or a link) to an unselected option card, it must be displayed outside of the component, for example, below it.