Card

Card groups related content and actions into a self-contained region whose boundary serves information structure rather than decoration.

Enter credentials to continue

Login to your account

Enter your email below to login to your account

InstallTerminal

npm install @a3s-lab/ui

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

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

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.

<div class="card" data-size="sm">
  <header>
    <h2>Small Card</h2>
    <p>This card uses the small size variant.</p>
    <div class="card-action">
      <button type="button" class="btn" data-size="sm" data-variant="outline">Action</button>
    </div>
  </header>
  <section> <p>The card component supports a size attribute that can be set to <code>sm</code> for a more compact appearance.</p></section>
</div>

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

<div class="card">
  <A3SAssetImage
    alt="Event cover"
    class="aspect-video w-full object-cover"
    path="/assets/images/screenshot.png"
  />
  <header>
    <h2>Design systems meetup</h2>
    <p>A practical talk on component APIs, accessibility, and shipping faster.</p>
    <div class="card-action">
      <span class="badge" data-variant="secondary">Featured</span>
    </div>
  </header>
  <footer>
    <button type="button" class="btn w-full">View Event</button>
  </footer>
</div>

RTL

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

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

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

<div class="card" dir="rtl">
  <header>
    <h2>تسجيل الدخول إلى حسابك</h2>
    <p>أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك</p>
    <div class="card-action">
      <button type="button" class="btn" data-variant="link">إنشاء حساب</button>
    </div>
  </header>
  <section>
    <form class="grid gap-6">
      <div class="grid gap-2">
        <label class="label" for="demo-card-rtl-email">البريد الإلكتروني</label>
        <input class="input" type="email" id="demo-card-rtl-email" placeholder="m@example.com" required />
      </div>
      <div class="grid gap-2">
        <div class="flex items-center">
          <label class="label" for="demo-card-rtl-password">كلمة المرور</label>
          <a href="#" class="ms-auto inline-flex min-h-6 items-center text-sm underline-offset-4 hover:underline">نسيت كلمة المرور؟</a>
        </div>
        <input class="input" type="password" id="demo-card-rtl-password" required />
      </div>
    </form>
  </section>
  <footer class="flex-col gap-2">
    <button type="button" class="btn w-full">تسجيل الدخول</button>
    <button type="button" class="btn w-full" data-variant="outline">تسجيل الدخول باستخدام Google</button>
  </footer>
</div>

#Card

#Usage

Include CSS

Add your card HTML

#HTML structure

#Examples

#Size

#Image