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)


      <article class="card"></article>

      <article class="card is-border-dashed"></article>

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 textsome text


      <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>

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