Ad

Visual Elements (Formating Styles, Typography, Button, Boxes, etc)

Gila Temax
Add
...
0
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.
<div class="elementskit_accordion">
  <!--[ Panel ]-->
  <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 -960 960 960"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"></path></svg>
      </div>
    </div>
    <div class="accordion_content">
      <div class="accordion_inner">CONTENT</div>
    </div>
  </div>

  <!--[ Panel ]-->
  <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 -960 960 960"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"></path></svg>
      </div>
    </div>
    <div class="accordion_content">
      <div class="accordion_inner">CONTENT</div>
    </div>
  </div>

  <!--[ Panel ]-->
  <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 -960 960 960"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"></path></svg>
      </div>
    </div>
    <div class="accordion_content">
      <div class="accordion_inner">CONTENT</div>
    </div>
  </div>
</div>

Alert

Default Alert

Info alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Error alert! Change a few things up and try submitting again. 
<div class="elementskit_alert alert_info">
  <div class="alert_message">
    <strong>Info alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_success">
  <div class="alert_message">
    <strong>Success alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_warning">
  <div class="alert_message">
    <strong>Warning alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_error">
  <div class="alert_message">
    <strong>Error alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

Outlined Alert

Info alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Error alert! Change a few things up and try submitting again. 
<div class="elementskit_alert alert_outline alert_info">
  <div class="alert_message">
    <strong>Info alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_outline alert_success">
  <div class="alert_message">
    <strong>Success alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_outline alert_warning">
  <div class="alert_message">
    <strong>Warning alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

<div class="elementskit_alert alert_outline alert_error">
  <div class="alert_message">
    <strong>Error alert!</strong> Change a few things up and try submitting again.
  </div>
</div>

Blockquote

if you do not change the typeface, be sure to load the default 'Roboto' font. For example, from fonts.google.com.
<blockquote>if you do not change the typeface, be sure to load the default 'Roboto' font. For example, from <a href="#">fonts.google.com</a>.</blockquote>

Buttons

Square (default)

<a class="elementskit_button filled medium_font" href="#">Filled</a>
<a class="elementskit_button outlined medium_font" href="#">Outlined</a>
<a class="elementskit_button elevated medium_font" href="#">Elevated</a>
<a class="elementskit_button tonal medium_font" href="#">Tonal</a>
<a class="elementskit_button medium_font" href="#">Text</a>

Rounded

<a class="elementskit_button filled rounded medium_font" href="#">Filled</a>
<a class="elementskit_button outlined rounded medium_font" href="#">Outlined</a>
<a class="elementskit_button elevated rounded medium_font" href="#">Elevated</a>
<a class="elementskit_button tonal rounded medium_font" href="#">Tonal</a>
<a class="elementskit_button rounded medium_font" href="#">Text</a>

Square with Icon

<a class="elementskit_button filled medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Filled
</a>
<a class="elementskit_button outlined medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Outlined
</a>
<a class="elementskit_button elevated medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Elevated
</a>
<a class="elementskit_button tonal medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Tonal
</a>
<a class="elementskit_button medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Text
</a>

Rounded with Icon

<a class="elementskit_button filled rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Filled
</a>
<a class="elementskit_button outlined rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Outlined
</a>
<a class="elementskit_button elevated rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Elevated
</a>
<a class="elementskit_button tonal rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Tonal
</a>
<a class="elementskit_button rounded medium_font" href="#">
  <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
  Text
</a>

Download Box

If you have a dedicated image, you can use it as shown below.

Adobe Photoshop
Adobe Photoshop
Size: 20 GB
Updated: October 24, 2025
File Type: .zip
Download 
<div class="download_box">
  <div class="app_title">Adobe Photoshop</div>
  <div class="app_inner">
    <div class="app_icon">
      <img alt="Adobe Photoshop" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSdnHXMSITeZG1MCCT_U-SdHNyEyN0tIZ0i1VJmwaTNLOndlY3zmwR5FPng3M3sBPw5sbaqnY8czZRywWzYImgevynrpZNEBOOLup7MBytZuGYHS_G0m8hLJFvkI1863jC4YNFDr6Or8fjzJoAstwyddE7ub_seUEXae_uyIMfoqVEfb2QS7JJ-pOY2w/s1600/Adobe_Photoshop_CC_2026_icon.svg.png" width="64"/>
    </div>

    <div class="app_meta">
      <div class="app_size">Size: 20 GB</div>
      <div class="app_update">Updated: October 24, 2025</div>
      <div class="app_type">File Type: .zip</div>
    </div>

    <div class="download_right">
      <a class="elementskit_button filled rounded medium_font" href="#">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
        Download
      </a>
    </div>
  </div>
</div>

If no image is available, you may use an alternative icon. The icon can be customized as needed.

Adobe Illustrator
Size: 3 GB
Updated: October 28, 2025
File Type: .zip
Download 
<div class="download_box">
  <div class="app_title">Adobe Illustrator</div>
  <div class="app_inner">
    <div class="app_icon no_image">
      <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17V15H14V17H12M14 13V11H12V13H14M14 9V7H12V9H14M10 11H12V9H10V11M10 15H12V13H10V15M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H12V7H10V5H5V19H19V5Z"></path></svg>
    </div>

    <div class="app_meta">
      <div class="app_size">Size: 3 GB</div>
      <div class="app_update">Updated: October 28, 2025</div>
      <div class="app_type">File Type: .zip</div>
    </div>

    <div class="download_right">
      <a class="elementskit_button filled rounded medium_font" href="#">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"></path></svg>
        Download
      </a>
    </div>
  </div>
</div>

List

Guide List

  1. Sociis tellus condimentum non commodo amet vulputate leo conubia nunc egestas duis sociosqu fringilla tristique lacinia consequat a pellentesque iaculis!
    1. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
    2. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
    3. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  2. At libero bibendum semper integer phasellus ultrices volutpat nascetur vel platea hendrerit hac per lorem elementum dolor maecenas venenatis erat?
    • Aliquam tincidunt mauris eu risus.
    • Vestibulum auctor dapibus neque.
    • Nunc dignissim risus id metus.
    • Cras ornare tristique elit.
    • Vivamus vestibulum ntulla nec ante.
  3. Nascetur imperdiet congue facilisi habitasse viverra sit pharetra vulputate tellus viverra amet interdum magna posuere neque class dui suspendisse netus.
  4. Posuere a quam varius natoque blandit primis dui massa tempor praesent non massa orci class vehicula molestie nec nibh cum.
  5. Porta dolor odio diam laoreet augue sed et est tortor. 
<div class="guide_list">
  <ol>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
    <li>
      Content
    </li>
  </ol>
</div>

Ordered List

  1. Satu satu satu
  2. Dua dua dua
  3. Tiga tiga tiga
  4. Empat empat empat
  5. Lima lima lima
  6. Enam enam enam
  7. Tujuh tujuh tujuh
  8. Delapan delapan delapan
  9. Sembilan sembilan sembilan
  10. Sepuluh sepuluh sepuluh

Unordered List

  • 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

Spoiler

Show / hide content with click event to trigger.

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. 
<div class="spoiler">
  <div class="spoiler_header">
    <div class="spoiler_title">Spoiler</div>
    <button class="spoiler_toggle_button" type="button">
      <span>Open</span>
      <span>Close</span>
    </button>
  </div>

  <div class="spoiler_content">
    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.
  </div>
</div>

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>
<pre><code>Content</code></pre>

Multi Tab

  • HTML
  • CSS
  • JavaScript
<!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>
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;
}
document.getElementById('changeColorButton').addEventListener('click', function() {
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
});
<div class="multi_tab_sh">
  <div class="multi_tab_list">
    <ul>
      <li class="current">HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </div>
  <div class="multi_tab_content visible">
    <pre><code>Content</code></pre>
  </div>
  <div class="multi_tab_content">
    <pre><code>Content</code></pre>
  </div>
  <div class="multi_tab_content">
    <pre><code>Content</code></pre>
  </div>
</div>

Table

Spec Minimum Recommended
OS Windows 11 Windows 11
CPU Intel i5-8400 / AMD Ryzen 5 2600 Intel i7-8700 / AMD Ryzen 5 3600
Memory 12 GB RAM 16 GB RAM
GPU NVIDIA RTX 2060 / AMD Radeon RX 5700 NVIDIA RTX 3080 / AMD Radeon RX 6800 XT
Login Required Epic ID Epic ID
Audio Language English English
Text Languages English, French, German, Italian, Spanish (Spain), Korean, Portuguese (Brazil), Japanese, Polish, Chinese (Simplified), Chinese (Traditional), Russian English, French, German, Italian, Spanish (Spain), Korean, Portuguese (Brazil), Japanese, Polish, Chinese (Simplified), Chinese (Traditional), Russian 
<div class="elementskit_table">
  <table>
    <thead>
      <tr>
        <th>Spec</th>
        <th>Minimum</th>
        <th>Recommended</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <strong>OS</strong>
        </td>
        <td>Windows 11</td>
        <td>Windows 11</td>
      </tr>
      <tr>
        <td>
          <strong>CPU</strong>
        </td>
        <td>Intel i5-8400 / AMD Ryzen 5 2600</td>
        <td>Intel i7-8700 / AMD Ryzen 5 3600</td>
      </tr>
      <tr>
        <td>
          <strong>Memory</strong>
        </td>
        <td>12 GB RAM</td>
        <td>16 GB RAM</td>
      </tr>
      <tr>
        <td>
          <strong>GPU</strong>
        </td>
        <td>NVIDIA RTX 2060 / AMD Radeon RX 5700</td>
        <td>NVIDIA RTX 3080 / AMD Radeon RX 6800 XT</td>
      </tr>
      <tr>
        <td>
          <strong>Login Required</strong>
        </td>
        <td>Epic ID</td>
        <td>Epic ID</td>
      </tr>
      <tr>
        <td>
          <strong>Audio Language</strong>
        </td>
        <td>English</td>
        <td>English</td>
      </tr>
      <tr>
        <td>
          <strong>Text Languages</strong>
        </td>
        <td>English, French, German, Italian, Spanish (Spain), Korean, Portuguese (Brazil), Japanese, Polish, Chinese (Simplified), Chinese (Traditional), Russian</td>
        <td>English, French, German, Italian, Spanish (Spain), Korean, Portuguese (Brazil), Japanese, Polish, Chinese (Simplified), Chinese (Traditional), Russian</td>
      </tr>
    </tbody>
  </table>
</div>

WhatsApp Channel Card

Horizontal Card

<div class="wa_channel_card">
  <div class="wa_channel_icon">
    <svg fill="none" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M15.8301 8.63404C16.3081 8.35745 16.9198 8.52076 17.1964 8.9988C17.7077 9.88244 18 10.9086 18 12C18 13.0914 17.7077 14.1176 17.1964 15.0012C16.9198 15.4792 16.3081 15.6425 15.8301 15.366C15.352 15.0894 15.1887 14.4776 15.4653 13.9996C15.8052 13.4122 16 12.7304 16 12C16 11.2696 15.8052 10.5878 15.4653 10.0004C15.1887 9.52237 15.352 8.91063 15.8301 8.63404ZM8.16995 8.63404C8.64798 8.91063 8.81129 9.52237 8.5347 10.0004C8.19484 10.5878 8 11.2696 8 12C8 12.7304 8.19484 13.4122 8.5347 13.9996C8.81129 14.4776 8.64798 15.0894 8.16995 15.366C7.69191 15.6425 7.08017 15.4792 6.80358 15.0012C6.29231 14.1176 6 13.0914 6 12C6 10.9086 6.29231 9.88244 6.80358 8.9988C7.08017 8.52076 7.69191 8.35745 8.16995 8.63404Z" fill="currentColor" fill-rule="evenodd"></path><path d="M13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="currentColor"></path><path clip-rule="evenodd" d="M5.33243 16.4826L5.09622 17.2728C4.86428 18.0487 4.62086 18.8707 4.41748 19.5825C5.12931 19.3791 5.95126 19.1357 6.72722 18.9038L7.51743 18.6676L8.24444 19.057C9.36447 19.6571 10.6412 20 12 20C16.4154 20 20 16.4154 20 12C20 7.58457 16.4154 4 12 4C7.58457 4 4 7.58457 4 12C4 13.3588 4.34295 14.6355 4.94296 15.7556L5.33243 16.4826ZM3.18 16.7C2.63 18.54 2 20.69 2 21C2 21.55 2.45 22 3 22C3.31 22 5.46 21.37 7.3 20.82C8.7 21.57 10.3 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 13.7 2.43 15.3 3.18 16.7Z" fill="currentColor" fill-rule="evenodd"></path></svg>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>
  
<div class="wa_channel_card">
  <div class="wa_channel_image">
    <img alt="WhatsApp Channel Card" height="56" src="https://lh3.googleusercontent.com/a/ACg8ocIpf2EI1ylDNBqt-hs0Fz-ESo1XdCcRa1dJSNQT2r3dpAlzpW8S=s288-c-no" width="56"/>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

Vertical Card

<div class="wa_channel_card vertical_card">
  <div class="wa_channel_icon">
    <svg fill="none" viewBox="0 0 24 24"><path clip-rule="evenodd" d="M15.8301 8.63404C16.3081 8.35745 16.9198 8.52076 17.1964 8.9988C17.7077 9.88244 18 10.9086 18 12C18 13.0914 17.7077 14.1176 17.1964 15.0012C16.9198 15.4792 16.3081 15.6425 15.8301 15.366C15.352 15.0894 15.1887 14.4776 15.4653 13.9996C15.8052 13.4122 16 12.7304 16 12C16 11.2696 15.8052 10.5878 15.4653 10.0004C15.1887 9.52237 15.352 8.91063 15.8301 8.63404ZM8.16995 8.63404C8.64798 8.91063 8.81129 9.52237 8.5347 10.0004C8.19484 10.5878 8 11.2696 8 12C8 12.7304 8.19484 13.4122 8.5347 13.9996C8.81129 14.4776 8.64798 15.0894 8.16995 15.366C7.69191 15.6425 7.08017 15.4792 6.80358 15.0012C6.29231 14.1176 6 13.0914 6 12C6 10.9086 6.29231 9.88244 6.80358 8.9988C7.08017 8.52076 7.69191 8.35745 8.16995 8.63404Z" fill="currentColor" fill-rule="evenodd"></path><path d="M13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="currentColor"></path><path clip-rule="evenodd" d="M5.33243 16.4826L5.09622 17.2728C4.86428 18.0487 4.62086 18.8707 4.41748 19.5825C5.12931 19.3791 5.95126 19.1357 6.72722 18.9038L7.51743 18.6676L8.24444 19.057C9.36447 19.6571 10.6412 20 12 20C16.4154 20 20 16.4154 20 12C20 7.58457 16.4154 4 12 4C7.58457 4 4 7.58457 4 12C4 13.3588 4.34295 14.6355 4.94296 15.7556L5.33243 16.4826ZM3.18 16.7C2.63 18.54 2 20.69 2 21C2 21.55 2.45 22 3 22C3.31 22 5.46 21.37 7.3 20.82C8.7 21.57 10.3 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 13.7 2.43 15.3 3.18 16.7Z" fill="currentColor" fill-rule="evenodd"></path></svg>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>
  
<div class="wa_channel_card vertical_card">
  <div class="wa_channel_image">
    <img alt="WhatsApp Channel Card" height="56" src="https://lh3.googleusercontent.com/a/ACg8ocIpf2EI1ylDNBqt-hs0Fz-ESo1XdCcRa1dJSNQT2r3dpAlzpW8S=s288-c-no" width="56"/>
  </div>
  <div class="wa_channel_info">
    <div class="wa_channel_name">Gila Temax</div>
    <div class="wa_channel_desc">Tersedia di WhatsApp Channel</div>
  </div>
  <div class="wa_follow_button">
    <a href="#">Follow</a>
  </div>
</div>

Table of Contents

<div class="toc active">
  <div class="toc_header">
    <div class="toc_title">
      <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M120-280v-80h560v80H120Zm0-160v-80h560v80H120Zm0-160v-80h560v80H120Zm680 320q-17 0-28.5-11.5T760-320q0-17 11.5-28.5T800-360q17 0 28.5 11.5T840-320q0 17-11.5 28.5T800-280Zm0-160q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440Zm0-160q-17 0-28.5-11.5T760-640q0-17 11.5-28.5T800-680q17 0 28.5 11.5T840-640q0 17-11.5 28.5T800-600Z"></path></svg>
      <span>Table of Contents</span>
      <div class="toc_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
  </div>
  <div class="toc_content"></div>
</div>

Further Reading

Copied!

Related Posts

  • Visual Elements (Formating Styles, Typography, Button, Boxes, etc)
  • Visual Elements (Formating Styles, Typography, Button, Boxes, etc)
  • Visual Elements (Formating Styles, Typography, Button, Boxes, etc)
  • Visual Elements (Formating Styles, Typography, Button, Boxes, etc)
  • Visual Elements (Formating Styles, Typography, Button, Boxes, etc)
  • Visual Elements (Formating Styles, Typography, Button, Boxes, etc)

Post a Comment

Ad