> For the complete documentation index, see [llms.txt](https://docs.qore.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qore.dev/component/list/vertical-tile.md).

# Vertical Tile

Cara menambahkan Vertical Tile component

Berikut langkah-langkah untuk menambahkan vertical tile *component*

* Buka Qore App Editor 

* Pada tab library, di section list pilih vertical tile *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/Lqs3wX18TwSUABeBTKmN" alt=""><figcaption></figcaption></figure>

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

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

Properties dari vertical tile component adalah&#x20;

Data :

* Source : tabel yang akan digunakan sebagai sumber data

Design :

* Header : sebagai judul atau keterangan list
* Title : sebagai judul item list
* Description : menunjukkan keterangan atau deskripsi singkat mengenai list card
* Image : sumber gambar pada list card, dapat berupa baris pada qore data ataupun link gambar

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 vertical tile yang telah dimodifikasi

<figure><img src="/files/92uch63wfRovgQ3HHMeg" alt=""><figcaption></figcaption></figure>