# List Card

Cara menambahkan List Card component

Berikut langkah-langkah untuk menambahkan list *component*

* Buka Qore App Editor 

* Pada tab library, di section list pilih list card *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="/files/YJpFVzxK7sOkcTkm42Uy" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka list *card component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="/files/dGiJ4ktdfSom87OtgipL" alt=""><figcaption></figcaption></figure>

Properties dari list card component adalah&#x20;

Data :

* Source : tabel yang akan digunakan sebagai sumber data
* Limit : batas data yang akan diretrieve, defaultnya adalah 50. Pengguna juga dapat menentukan sendiri batas dengan custom limit.

Design :

* List title : sebagai judul atau keterangan list
* Title : sebagai judul item list
* Label : seperti tag, label digunakan untuk mengelompokkan list card berdasar kategori tertentu
* Description : menunjukkan keterangan atau deskripsi singkat mengenai list card
* Caption : isi dari item list
* Image : sumber gambar pada list card, dapat berupa baris pada qore data ataupun link gambar
* Display : mengatur jumlah item list yang ditampilkan, apakah semua, infinite scroll, atau menggunakan pagination. Jika menggunakan pagination, atur jumlah limit untuk setiap page

Thumbnail :

* Avatar : sumber gambar untuk thumbnail yang akan muncul sebagai gambar kecil, bisa berupa link gambar atau baris dalam qore data
* Icon : menambahkan icon pada list, dapat dengan memilih icon yang telah tersedia ataupun mengunggah gambar
* Icon style : mengatur gaya tampilan dari icon
* Size : mengatur ukuran list card, apakah half size atau full size jika ingin lebih lebar
* Style : mengatur style tampilan dari list card, apakah default, card, atau overlay
* Round : mengatur bentuk card, apakah menggunakan round atau tidak

Empty state :

* Title : judul dari list ketika dalam kondisi kosong
* Subtitle : keterangan lebih detail mengenai kondisi list yang kosong, misalnya "Anda tidak memiliki data apapun"
* Image : Gambar ketika list dalam kondisi kosong

Berikut contoh list card yang telah dimodifikasi

<figure><img src="/files/XpFlXjL0VCPaGJdONRbo" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.qore.dev/component/list/list-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.