Card
contains content and actions about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Note: I have set the root font-size to 10px for this library.
Instructions to import the Card component in your CSS or HTML:
Standard Card
is a vertical card. It can have have badge and text overlay (hover the card title):
Trash Gryphons: Pigeon Rat
by Mel Tillery (Cyaneus)
Pride Birds: Gouldian Finch Classic T-Shirt
by Mel Tillery (Cyaneus)
Horizontal Card
similar to standard card in horizontal spread (list)
Trash Gryphons: Pigeon Rat
by Mel Tillery (Cyaneus)
Pride Birds: Gouldian Finch Classic T-Shirt
by Mel Tillery (Cyaneus)
Text and Dismiss Card
text only card can be used with title, content and CTA. Dismiss button can be used on any card to dismiss it:
Violet-backed Starling
Feb 1 2022
The violet-backed starling is a common bird in Sub-Saharan Africa, occurring in most locations with the exception of the dense rainforest of the Congo Basin, and the more arid parts of southwestern Africa. It is found in open woodland, gallery forests, forest verges and clearings. In the Chyulu Hills of Kenya, it occurs at altitudes of up to 2,100 m.