> 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/media/headline.md).

# Headline

Cara menambahkan Headline component

Berikut langkah-langkah untuk menambahkan headline *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih headline *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="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FA4P6xw3uQmfZw7o4GOce%2Fmedia1.png?alt=media&amp;token=54598322-3519-4034-9383-d60917a1e2d4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FzdJbfaZr3gjXF6KlkSko%2Fmedia11.png?alt=media&amp;token=dd71f098-4c35-4135-b760-9752f01d65e4" alt=""><figcaption></figcaption></figure>

Properties dari headline component adalah&#x20;

Design :

* Source : sumber gambar dari headline, dapat berupa link gambar ataupun baris dalam qore data
* Style : mengubah gaya headline, apakah gambar ditampilkan secara penuh atau dalam bentuk profile
* Title : sebagai judul headline
* Description : menunjukkan keterangan atau deskripsi singkat dari headline

Berikut contoh headline yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FyNALq0dfYfxZ8E4eAI8Y%2Fmedia111.png?alt=media&amp;token=652680fd-78b6-4a7e-90d2-2838daeb3e87" alt=""><figcaption></figcaption></figure>