> ## Documentation Index
> Fetch the complete documentation index at: https://guide.smsu.in.th/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

> การ์ดลิงก์ การ์ดข้อความ และการ์ดรูปภาพ

ใข้เป็นปุ่มลิงก์ไปยังหน้าเนื้อหาอื่น/เว็บไซต์ภายนอก หรือแสดงเนื้อหาสำคัญสั้น ๆ หรือแสดงรูปภาพพร้อมชื่อเรื่องและคำอธิบาย

## เพิ่ม Card

สามารถเพิ่มโดยเลือกจาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components)

<Card title="Basic Card" icon="heart">
  Description
</Card>

### Card Group

สามารถเพิ่มโดยเลือก `Card Group` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) เพื่อสร้างกลุ่มการ์ดดังตัวอย่างด้านล่าง

<Columns cols={2}>
  <Card title="First Card" icon="sidebar">
    This is the first card.
  </Card>

  <Card title="Second Card" icon="sidebar-flip">
    This is the second card.
  </Card>
</Columns>

### เพิ่ม Card ใน Group

เอาเมาส์ hover แล้วกด <Icon icon="plus" /> เครื่องหมายบวกด้านซ้ายของ Card ล่างสุด เพื่อเพิ่ม Card ใหม่ในกลุ่ม

## แก้ไขและตั้งค่า

เอาเมาส์ hover แล้วกด <Icon icon="ellipsis-vertical" /> สามจุดมุมขวาบนของ Card เพื่อเปิดเมนูแก้ไข

### Title

แก้ไขที่ช่อง `Title`

<Card title="Title">Content</Card>

### Link Card

ตั้ง Link URL ที่ช่อง `URL` และสามารถตั้งคำอธิบาย action ได้ที่ช่อง `Call To Action`

<CardGroup cols={2}>
  <Card title="Link Card" icon="sidebar" href="https://lin.ee/hlvg4i9">
    Basic Link Card
  </Card>

  <Card title="ติดต่อเบิกเงิน" icon="line" href="https://lin.ee/hlvg4i9">
    Line Official Account: SI Finance
  </Card>

  <Card title="Link Card with CTA" icon="sidebar" href="https://drive.google.com/drive/folders/1F_qefEQ1M_r8FRJzMvdG5xqNRalWacAq?usp=drive_link" cta="Call To Action">
    Link Card with Call To Action
  </Card>

  <Card title="อัตราราคากลาง" icon="money-check-dollar" href="https://drive.google.com/drive/folders/1F_qefEQ1M_r8FRJzMvdG5xqNRalWacAq?usp=drive_link" cta="View Rates">
    เรทราคาแต่ละรายการที่คณะอนุมัติให้โครงการเบิก
  </Card>
</CardGroup>

### Horizontal card

ตั้งค่าโดยเลื่อนเปิด `Horizontal` เพื่อแสดงการ์ดในแนวนอนเทียบกับไอคอนด้านซ้าย

<Card title="Horizontal Card" icon="align-left" horizontal>
  Here is an example of a horizontal card
</Card>

### Image Card

ตั้ง URL (สำหรับรูปภายนอก) หรือ path (สำหรับรูปที่อัพโหลดใน guide ฉบับนี้ในโฟลเดอร์ `/images`) ของรูปภาพที่ต้องการแสดงในช่อง `Image Path`

ตัวอย่างการ์ดด้านล่างตั้งค่า `Image Path` เป็น `/images/smsulogo-banner-wide.webp`

<Card title="Image Card" img="https://mintcdn.com/smsu/crzVKBQ55aap7jAf/images/smsulogo-banner-wide.webp?fit=max&auto=format&n=crzVKBQ55aap7jAf&q=85&s=7e6f6f5ca7ba46aaf17ccf43c2dad8b9" width="1500" height="500" data-path="images/smsulogo-banner-wide.webp">
  Here is an example of a card with an image
</Card>

## ลบ Card

เอาเมาส์ hover แล้วกด <Icon icon="ellipsis-vertical" /> สามจุดมุมขวาบนของ Card เพื่อเปิดเมนูแก้ไข จากนั้นกด <Icon icon="trash-can" /> ไอคอนถังขยะเพื่อลบ