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.
||Card||A class representing a card.|
In the Appwrite console, we use two styles of card borders:
|-||Solid||Solid borders should be the default for cards.|
||Dashed||Use dashed borders only for empty state cards.|
||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: