Card

Login to your account

Enter your email below to login to your account

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Card component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/card.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your card HTML

<div class="card">
  <header>
    <h2>Card Title</h2>
    <p>Card Description</p>
    <div class="card-action">Card Action</div>
  </header>
  <section> <p>Card Content</p></section>
  <footer>
    <p>Card Footer</p>
  </footer>
</div>

HTML structure

<div class="card">

The card container. Use data-size="sm" for a denser layout.

<header>

The card header.

<h2> or <h3>: The card title.
<p> Optional: The card description.
<div class="card-action"> Optional: Action or metadata placed in the top-right of the header. Use <menu class="card-action"> when the content is a list of commands.

<section>

The main card content.

<footer> Optional

Footer actions or secondary content at the bottom of the card.

Examples

Size

Use data-size="sm" to set the size of the card to small. The small size variant uses smaller spacing.

Small Card

This card uses the small size variant.

The card component supports a size attribute that can be set to sm for a more compact appearance.

Image

Add an image before the card header to create a card with an image.

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

Featured

RTL

Add dir="rtl" to the card or an ancestor.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

#Card

#Usage

Include CSS

Add your card HTML

#HTML structure

#Examples

#Size

#Image