#卡片

#用途

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

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

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

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

#示例

#尺寸

使用data-size="sm"将卡的尺寸设置为小。小尺寸变体使用更小的间距。

#图片

在卡片标题前添加图像以创建带有图像的卡片。

Live previewHTML · CSS · JavaScript

Design systems meetup

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

Featured

#RTL

将 dir="rtl" 添加到卡或祖先。