Create your first file to get started.
Need a hand? Check out our documentation.
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. |
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. |
Class | Type | |
---|---|---|
is-allow-focus
|
focus | If card as this class, is something inside focus, the card will be focus as well (keyboared focus) |
<article class="card"></article>
<article class="card is-border-dashed"></article>
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”.
<label class="card is-allow-focus u-flex u-gap-8">
<input type="checkbox" />
<span class="text">some text</span>
</label>
<label class="card is-allow-focus u-flex u-gap-8">
<input type="checkbox" />
<span class="text">some text</span>
</label>
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.