Documentation

Dấu phân tách đoạn văn

<i class="separate"></i>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
<blockquote class='style-1'></blockquote>

Button

<div class='button-info'>
<a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
<a class='button outline' href='url_anda_disini'>Demo</a>
</div>
Zip Template-kalender-2021.zip Download
<div class='download-info'>
<span class='file-icon'>Zip</span>
<span class='file-text'>Template-kalender-2021.zip</span>
<a class='button file-link' href='url_anda_disini' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>

Lazy youtube

<div class='lazy-youtube' data-embed='rvrZJ5C_Nwg'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Spoiler

Judul Spoiler
Isi spoiler
<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'><b>Judul Spoiler</b><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  <div class='spoiler-isi'>
    <div>Isi spoiler</div>
  </div>
</div>

Accordion Menu

  • Jawaban pertanyaan pertama
  • Jawaban pertanyaan kedua
  • Jawaban pertanyaan ketiga
<ul class='accordion'>
  <!-- Baris pertama -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu1' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu1'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan pertama</span>
      </label>
      <div class='content'>Jawaban pertanyaan pertama</div>
    </div>
  </li>
  <!-- Baris kedua -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu2' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu2'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan kedua</span>
      </label>
      <div class='content'>Jawaban pertanyaan kedua</div>
    </div>
  </li>
  <!-- Baris ketiga -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu3' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu3'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan ketiga</span>
      </label>
      <div class='content'>Jawaban pertanyaan ketiga</div>
    </div>
  </li>
  <!-- Baris seterusnya... -->
</ul>