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


---

# 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/vertical-tile.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.