Card

Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements.

Class Type
card Card A class representing a card.

Styles

In the Appwrite console, we use two styles of card borders:

Class Type
- Solid Solid borders should be the default for cards.
is-border-dashed Dashed Use dashed borders only for empty state cards.

Special state

Class Type
is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus)

Focus label card

Play with the tab key to see focus of card according to the focus of checkbox.

In components section you can see more complex demo of “Label Card”.

  
  some text
  
  some text

Best Practice

Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example:

Create your first file to get started.

Need a hand? Check out our documentation.

Documentation