Cards
A card is container for a few short, related pieces of information. This wireframed example of a card component features several different types of information: an image, a title, a short summary, a time stamp, a hashtag, and a secondary call-to-action button for social media sharing.
Vertical Card
Keychron K6
Blue SwitchesThe K6 has included keycaps for both Windows and Mac operating systems. Hot-swappable version comes with Gateron switch pre-installed.
For using these vertical cards in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.
Horizontal Card
Men Premium Jacket
For using these horizontal cards in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.
Vertical Card with Badges
Keychron K6
Blue SwitchesThe K6 has included keycaps for both Windows and Mac operating systems. Hot-swappable version comes with Gateron switch pre-installed.
For using these vertical card with badge in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.
Vertical Card with Dismiss
Keychron K6
Blue SwitchesThe K6 has included keycaps for both Windows and Mac operating systems. Hot-swappable version comes with Gateron switch pre-installed.
For using these vertical card with dismiss in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.
Vertical Card with Text Overlay
Keychron K6
Blue SwitchesThe K6 has included keycaps for both Windows and Mac operating systems. Hot-swappable version comes with Gateron switch pre-installed.
For using these vertical card with text overlay in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.
Text Only Card
Keychron K6
Blue SwitchesThe K6 has included keycaps for both Windows and Mac operating systems. Hot-swappable version comes with Gateron switch pre-installed.
For using these text card in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.
Vertical Card with Box Shadow
Keychron K6
Blue SwitchesThe K6 has included keycaps for both Windows and Mac operating systems. Hot-swappable version comes with Gateron switch pre-installed.
For using these vertical card with box shadow in your codebase use below code snippets and for the addition of paddings and margins, you can use their utility classes.