components

Table of Contents

Accordion
Alert
Blockquote
Buttons
Download Box
Input
List
Post Reference
Related Posts (manual)
Spoiler
Syntax Highlighter
1. Default
2. Multi Tabs
Table
Tabs
Text Area
YouTube Embed
1. Default
2. With Lazy Load
Table of Contents

Accordion

Is this template compatible with WordPress?

Currently, the Wordpress version is not available. You can only use this template on the Blogger platform.

What do you get when you buy a template here?

You will receive a template bundle according to the product you purchased, and you can download it again for free if a new version is available.

Can we assist you with the template installation process?

Of course, we will be happy to assist you if you have any difficulties during the template installation process.

Will you get updates?

Yes, you will get FREE UPDATES forever, including the latest version updates.

Are there any additional fees for updates?

No, there are no additional fees.

Can you get a refund?

Sorry, purchased items cannot be returned. Please read the Terms & Conditions for more information.

Can the template be resold?

No, you can only use the template for personal purposes. Reselling the template is strictly prohibited. Please read the Terms & Conditions for more information.

Can the template be installed on multiple blogs?

Yes, there is no limit to the number of blogs as long as the blogs are still yours.

Are free templates available on Gila Temax?

Yes, definitely. Please wait for the next update.


<div class="elementskit_accordion">
  <div class="accordion_panel">
    <div class="accordion_header">
      <div class="accordion_title">Title</div>
      <div class="accordion_icon">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
    </div>
    <div class="accordion_content">Content</div>
  </div>
  <div class="accordion_panel">
    <div class="accordion_header">
      <div class="accordion_title">Title</div>
      <div class="accordion_icon">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
    </div>
    <div class="accordion_content">Content</div>
  </div>
  <div class="accordion_panel">
    <div class="accordion_header">
      <div class="accordion_title">Title</div>
      <div class="accordion_icon">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path>
        </svg>
      </div>
    </div>
    <div class="accordion_content">Content</div>
  </div>
</div>Copy

Alert

A simple info alert—check it out!

A simple warning alert—check it out!

A simple success alert—check it out!

A simple error alert—check it out!


<div class="elementskit_alert alert_info">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="elementskit_alert alert_warning">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="elementskit_alert alert_success">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="elementskit_alert alert_error">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>Copy

Blockquote

The only way to do great work is to love what you do.


<blockquote>Satu-satunya cara untuk melakukan pekerjaan hebat adalah mencintai apa yang Anda lakukan.</blockquote>Copy

Buttons

Default Button


<a class="elementskit_button" href="#">Button Default</a>
<a class="elementskit_button outlined" href="#">Button Outlined</a>
<a class="elementskit_button unelevated" href="#">Button Unelevated</a>
<a class="elementskit_button raised" href="#">Button Raised</a>Copy

Button Rounded


<a class="elementskit_button rounded" href="#">Button Default</a>
<a class="elementskit_button outlined rounded" href="#">Button Outlined</a>
<a class="elementskit_button unelevated rounded" href="#">Button Unelevated</a>
<a class="elementskit_button raised rounded" href="#">Button Raised</a>Copy

Button with Colors


<a class="elementskit_button button_info" href="#">Button Info</a>
<a class="elementskit_button button_warning outlined" href="#">Button Warning Outlined</a>
<a class="elementskit_button button_success unelevated" href="#">Button Success Unelevated</a>
<a class="elementskit_button button_error raised" href="#">Button Error Raised</a>
<a class="elementskit_button button_dark raised" href="#">Button Dark Raised</a>Copy

Button Sizes


<a class="elementskit_button button_small unelevated" href="#">Button Small</a>
<a class="elementskit_button unelevated" href="#">Button Normal</a>
<a class="elementskit_button button_large unelevated" href="#">Button Large</a>Copy

Floating Action Button (FAB)


<a aria-label="Button" class="elementskit_button fab unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a aria-label="Button" class="elementskit_button button_large fab unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a class="elementskit_button fab extended unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>
<a class="elementskit_button button_large fab extended unelevated" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>Copy

Disabled Button


<a class="elementskit_button disabled" href="#">Button Default</a>
<a class="elementskit_button outlined disabled" href="#">Button Outlined</a>
<a class="elementskit_button unelevated disabled" href="#">Button Unelevated</a>
<a class="elementskit_button raised disabled" href="#">Button Raised</a>
<a aria-label="Button" class="elementskit_button fab unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a aria-label="Button" class="elementskit_button button_large fab unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg></a>
<a class="elementskit_button fab extended unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>
<a class="elementskit_button button_large fab extended unelevated disabled" href="#"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg> FAB Extended</a>Copy

Download Box

If you have a dedicated image, you can use it like this.

Lightrom Android

Size: 2 GB

Updated: June 1, 2025

File Type: .zip

Download


<div class="download_box">
  <div>App Name</div>
  <div class="download_box__inner">
    <div class="download_box__image">
      <img alt="App Name" height="60" src="IMAGE_URL_HERE" width="60"/>
    </div>
    <div class="download_box__info">
      <div>Size: 2 GB</div>
      <div>Updated: 1 June 2025</div>
      <div>File Type: .zip</div>
    </div>
    <div class="download_box__cta">
      <a class="elementskit_button fab extended unelevated" href="URL_HERE"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z"></path></svg> Download</a>
    </div>
  </div>
</div>Copy

Input


<input class="elementskit_input" placeholder="Email Input" type="text"/>
<input class="elementskit_input" placeholder="Password Input" type="password"/>
<input class="elementskit_input" placeholder="Number Input" type="number"/>
<input class="elementskit_input" placeholder="" type="file"/>
<input class="elementskit_input" placeholder="" type="date"/>
<input class="elementskit_input" placeholder="" type="time"/>
<input class="elementskit_input" placeholder="" type="color"/>Copy

List

Guide List

Stir-fried water spinach is a quick, easy, and healthy home-cooked dish. Here are the steps:

Ingredients:
- 2 bunches of fresh water spinach, choose ones with stems that are not too old
- 3 cloves garlic, finely chopped
- 5 cloves of shallots, thinly sliced
- 3 red chilies (adjust to your liking for spiciness), sliced diagonally
- 2 large red chilies, sliced diagonally (remove the seeds if you don't like it too spicy)
- 1 small tomato, chopped (optional)
- 1 tablespoon oyster sauce
- 1/2 teaspoon salt (to taste)
- 1/4 teaspoon granulated sugar (to taste)
- A pinch of ground pepper (optional)
- 2 tablespoons of cooking oil
- 50 ml water (optional, if you want a little more soup)
How to cook:
1. Prepare the Water Spinach:
  - Pick the young leaves and stems of the water spinach, discarding any hard or yellow parts.
  - Wash the water spinach thoroughly under running water. Make sure there's no dirt or mud attached.
  - Drain thoroughly. You can cut them into pieces if they're too long.
2. Heat the oil:
  - Heat cooking oil in a wok or frying pan over medium heat.
3. Stir-fry spices:
  - Add garlic and shallots. Saute until fragrant and wilted.
  - Add the sliced bird's eye chilies and large red chilies. Stir-fry briefly until wilted and the spicy aroma is released.
  - If using tomatoes, add them now and sauté until slightly wilted.
4. Add the Water Spinach:
  - Add the drained water spinach to the pan. Stir quickly.
  - The kale will look like a lot at first, but will shrink after a while.
5. Seasoning:
  - Tambahkan saus tiram, garam, gula pasir, dan merica bubuk. Aduk rata hingga semua bumbu tercampur dengan kangkung.
  - Jika ingin sedikit lebih berkuah atau kangkungnya sedikit lebih empuk, tambahkan sedikit air.
6. Masak Hingga Matang:
  - Masak kangkung dengan cepat, jangan terlalu lama agar teksturnya tetap renyah dan warnanya tetap hijau segar. Cukup sekitar 2-3 menit setelah kangkung masuk.
  - Cicipi dan koreksi rasa jika diperlukan. Tambahkan bumbu sesuai selera Anda.
7. Sajikan:
  - Angkat kangkung tumis dan sajikan selagi hangat dengan nasi putih.
Tips Tambahan:
- Untuk rasa yang lebih kaya, Anda bisa menambahkan irisan terasi saat menumis bumbu.
- Jangan memasak kangkung terlalu lama karena akan membuatnya layu dan kehilangan nutrisi.
- Variasi lain: Anda bisa menambahkan udang, potongan tahu, atau tempe ke dalam tumisan kangkung.


<div class="guide_list">
  <ol>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
  </ol>
</div> Copy

Ordered List

Is a standard list with number.

Satu satu satu
Dua dua dua
Tiga tiga tiga
Empat empat empat
Lima lima lima
Enam enam enam
Tujuh tujuh tujuh
Delapan delapan delapan
Sembilan sembilan sembilan
Sepuluh sepuluh sepuluh


<ol>
  <li>Satu satu satu</li>
  <li>Dua dua dua</li>
  <li>Tiga tiga tiga</li>
  <li>Empat empat empat</li>
  <li>Lima lima lima</li>
  <li>Enam enam enam</li>
  <li>Tujuh tujuh tujuh</li>
  <li>Delapan delapan delapan</li>
  <li>Sembilan sembilan sembilan</li>
  <li>Sepuluh sepuluh sepuluh</li>
</ol> Copy

Unordered List

Is a standard list without number.

Satu satu satu
Dua dua dua
Tiga tiga tiga
Empat empat empat
Lima lima lima
Enam enam enam
Tujuh tujuh tujuh
Delapan delapan delapan
Sembilan sembilan sembilan
Sepuluh sepuluh sepuluh


<ul>
  <li>Satu satu satu</li>
  <li>Dua dua dua</li>
  <li>Tiga tiga tiga</li>
  <li>Empat empat empat</li>
  <li>Lima lima lima</li>
  <li>Enam enam enam</li>
  <li>Tujuh tujuh tujuh</li>
  <li>Delapan delapan delapan</li>
  <li>Sembilan sembilan sembilan</li>
  <li>Sepuluh sepuluh sepuluh</li>
</ul> Copy

Post Reference

Reference:


<div class="post_reference">
  <strong>Reference:</strong>
  <ul>
    <li><a href="LINK_HERE">TITLE_HERE</a></li>
    <li><a href="LINK_HERE">TITLE_HERE</a></li>
    <li><a href="LINK_HERE">TITLE_HERE</a></li>
  </ul>
</div> Copy

Spoiler

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


<div class="spoiler">
  <div class="spoiler_title">
    Spoiler
    <button aria-label="Spoiler Button" class="elementskit_button fab unelevated rounded" type="button">
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H5V11H19V13Z"></path></svg>
    </button>
  </div>
  <div class="spoiler_content">
    Content
  </div>
</div> Copy

Syntax Highlighter

Default


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ubah Warna Latar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Tekan Tombol untuk Mengubah Warna Latar</h1>
    <button id="changeColorButton">Ubah Warna</button>
  </div>
  <script src="script.js"></script>
</body>
</html> Copy


body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}
.container {
  text-align: center;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
} Copy


document.getElementById('changeColorButton').addEventListener('click', function() {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
}); Copy


<pre data-lang="TITLE"><code class="language-html">Your code is here</code></pre> Copy


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ubah Warna Latar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Tekan Tombol untuk Mengubah Warna Latar</h1>
    <button id="changeColorButton">Ubah Warna</button>
  </div>
  <script src="script.js"></script>
</body>
</html> Copy


body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}
.container {
  text-align: center;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
} Copy


document.getElementById('changeColorButton').addEventListener('click', function() {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
}); Copy


<div class="tabs syntax">
  <ul class="tab_links">
    <li class="active">
      <a href="#HTML">HTML</a>
    </li>
    <li>
      <a href="#CSS">CSS</a>
    </li>
    <li>
      <a href="#JavaScript">JavaScript</a>
    </li>
  </ul>
  <div class="tab_content">
    <div class="tab_item active" id="HTML">
      <pre data-lang=".html"><code class="language-html">Your code is here</code></pre>
    </div>
    <div class="tab_item" id="CSS">
      <pre data-lang=".css"><code class="language-css">Your code is here</code></pre>
    </div>
    <div class="tab_item" id="JavaScript">
      <pre data-lang=".js"><code class="language-javascript">Your code is here</code></pre>
    </div>
  </div>
</div> Copy

Table

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00


<div class="elementskit_table">
  <table>
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Status</th>
        <th>Method</th>
        <th class="text_right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>INV001</td>
        <td>Paid</td>
        <td>Credit Card</td>
        <td class="text_right">$250.00</td>
      </tr>
      <tr>
        <td>INV002</td>
        <td>Pending</td>
        <td>PayPal</td>
        <td class="text_right">$150.00</td>
      </tr>
      <tr>
        <td>INV003</td>
        <td>Unpaid</td>
        <td>Bank Transfer</td>
        <td class="text_right">$350.00</td>
      </tr>
      <tr>
        <td>INV004</td>
        <td>Paid</td>
        <td>Credit Card</td>
        <td class="text_right">$450.00</td>
      </tr>
      <tr>
        <td>INV005</td>
        <td>Paid</td>
        <td>PayPal</td>
        <td class="text_right">$550.00</td>
      </tr>
      <tr>
        <td>INV006</td>
        <td>Pending</td>
        <td>Bank Transfer</td>
        <td class="text_right">$200.00</td>
      </tr>
      <tr>
        <td>INV007</td>
        <td>Unpaid</td>
        <td>Credit Card</td>
        <td class="text_right">$300.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Total</td>
        <td class="text_right">$2,500.00</td>
      </tr>
    </tfoot>
  </table>
</div> Copy

Tabs

Tab 1
Tab 2
Tab 3

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.


<div class="tabs">
  <ul class="tab_links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab_content">
    <div class="tab_item active" id="tab1">
      Content
    </div>

    <div class="tab_item" id="tab2">
      Content
    </div>

    <div class="tab_item" id="tab3">
      Content
    </div>
  </div>
</div>Copy

Text Area


<textarea placeholder="Type your message here"></textarea>Copy

YouTube Embed

Default


<div class="youtube_embed">
  <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/EMBED_CODE"></iframe>
</div>Copy

With Lazy Load


<div class="youtube_embed lazy" data-embed="EMBED_CODE">
  <div class="play_button">
    <span>
      <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z"></path></svg>
    </span>
  </div>
</div>Copy

This feature will work if your post includes a title h2, h3, and h4.


<div class="toc_wrap">
  <div class="toc_header">Table of Contents</div>
  <div class="toc_content"></div>
</div>Copy

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.

components

Accordion

Alert

Blockquote

Buttons

Default Button

Button Rounded

Button with Colors

Button Sizes

Floating Action Button (FAB)

Disabled Button

Download Box

Input

List

Guide List

Ingredients:

How to cook:

Tips Tambahan:

Ordered List

Unordered List

Post Reference

Related Posts (manual)

Spoiler

Syntax Highlighter

Default

Multi Tabs

Table

Tabs

Text Area

YouTube Embed

Default

With Lazy Load

Table of Contents