ข้ามไปเนื้อหา
แบรนด์ที่แสดง
ธีม: ตามระบบ
คอมโพเนนต์ทั้งหมด

Card

พื้นผิวสำหรับหนึ่งเรื่อง กระดาษเรียบหรือแก้วกับดินเหนียว

ui/display.tsxServer safe

โครงสร้าง

Media, Header, Body และ Footer ใช้เท่าที่ต้องการ ใน ASWINOLOGY° เป็นกระดาษเรียบ ใน Lurnelle เป็นแก้วพร้อมเงาดินเหนียว

สมาธิ 10 นาทีก่อนสอบ

วิธีที่ใช้จริงก่อนสอบเข้ามหาวิทยาลัย และทำไมได้ผล

แนะนำ

ความคืบหน้าสัปดาห์นี้

Agentic Workflows58%
tsx
<Card>
  <CardMedia><img src="/img/isha.jpg" alt="" /></CardMedia>
  <CardHeader>
    <CardTitle>สมาธิ 10 นาทีก่อนสอบ</CardTitle>
    <CardDescription>วิธีที่ใช้จริงก่อนสอบเข้ามหาวิทยาลัย</CardDescription>
  </CardHeader>
  <CardFooter><Button size="sm">อ่านต่อ</Button></CardFooter>
</Card>
CardLink ขยายพื้นที่กดเต็มการ์ด แต่มีลิงก์จริงเพียงตัวเดียวให้โปรแกรมอ่านหน้าจอ

The study of becoming

บันทึกเรื่องการเติบโตทีละองศา อ่าน 6 นาที

Sunken

สำหรับพื้นที่รองหรือกลุ่มข้อมูล

Inverse

ใช้ครั้งเดียวต่อหน้าเพื่อเน้น

tsx
<Card interactive>
  <CardHeader>
    <CardTitle><CardLink href="/notes/becoming">The study of becoming</CardLink></CardTitle>
    <CardDescription>บันทึกเรื่องการเติบโตทีละองศา</CardDescription>
  </CardHeader>
  <CardBody />
</Card>

Props

PropTypeDefaultคำอธิบาย
interactivebooleanfalseยกขึ้นเมื่อชี้ ใช้คู่กับ CardLink
tone"default" | "sunken" | "inverse""default"พื้นผิว
asElementType"div"เช่น article หรือ li

ใช้เมื่อไร

ควรทำ

  • หนึ่งการ์ดหนึ่งเรื่อง
  • ใช้ระยะห่างแทนการ์ดเมื่อไม่มีลำดับชั้นจริง

ไม่ควรทำ

  • ซ้อนการ์ดในการ์ด
  • ใส่ลิงก์หลายอันซ้อนกับ CardLink