komponen (mode manual)

raouries

0 menit baca

Buttons

Default Button

Button Default Button Outlined Button Unelevated Button Raised

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

Button Rounded

Button Default Button Outlined Button Unelevated Button Raised

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

Button with Colors

Button Info Button Warning Outlined Button Success Unelevated Button Error Raised Button Dark Raised

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

Button Sizes

Button Small Button Normal Button Large

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

Floating Action Button (FAB)

FAB Extended FAB Extended

<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 aria-label="Button" 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 aria-label="Button" 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>

Disabled Button

Button Default Button Outlined Button Unelevated Button Raised FAB Extended FAB Extended

<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 aria-label="Button" 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 aria-label="Button" 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>

Accordion

Title

Content

Title

Content

Title

Content

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

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>

Blockquote

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.

<blockquote>
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.
</blockquote>

Guide List

Content
Content
Content

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

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"/>

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>

Spoiler

Content

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

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>

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;
});

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

<!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.querySelectorAll('.tab_links a').forEach(tab => {
  tab.addEventListener('click', function(e) {
    e.preventDefault();

    // hapus active di semua tab
    document.querySelectorAll('.tab_links li').forEach(li => li.classList.remove('active'));
    document.querySelectorAll('.tab_item').forEach(item => item.classList.remove('active'));

    // aktifkan tab yang diklik
    this.parentElement.classList.add('active');
    const target = this.getAttribute('href');
    document.querySelector(target).classList.add('active');
  });
});

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

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>

Tabs

Tab 1
Tab 2
Tab 3

Content

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

Text Area

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

YouTube Embed

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

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>

Table of Contents

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

komponen (mode manual)

Buttons

Default Button

Button Rounded

Button with Colors

Button Sizes

Floating Action Button (FAB)

Disabled Button

Accordion

Alert

Blockquote

Guide List

Input

Post Reference

Related Posts (manual)

Spoiler

Syntax Highlighter

Default

Multi Tabs

Table

Tabs

Text Area

YouTube Embed

With Lazy Load

Table Of Contents

komponen (mode manual)