Cards

Design Links

Open in Sketch Cloud

Open in Figma

@import 'node_modules/@hospitality-digital/design-system/css/components/card.css';

Full Width

Cards can either expand full width like in these examples, in which case they don’t need any padding. If content is displayed in a card view the user can choose which property are displayed in addition to the title.

Contained

If cards are contained a 1px stroke with the primary border colour is added and default border radius of 4px is applied.

Full widthContained

Tofu Ramen

Sales: 9,90 €

Food Cost: 2,03 €

10%

Flank Steak

Sales: 24,90 €

Food Cost: 8,03 €

10%