🃏

Cards

Component

Features

Each visible item to be shown on this page.

Style

Consider default background, border, shadow

Consistency

Ensure you have one base style for all cards

Spacing

A framework to sort your padding levels by

⭐️ Choose an easily divisible number as your padding difference, like divided by 4 or 5

Responsiveness

Consider the structure of the content in all various screen sizes

⭐️ Adopt a 'top-down' approach on mobile to not overfill the rows

Content heirarchy

Purposefully structure your content inside the card by level of value to user

⭐️ Display links at the end of the card so the user is informed by the content in the card before making a decision