LeGDieS UI — Component Docs

Hopefully this docs gonna help you

1. Font Switcher (scoped)

Affects only the box below.

The quick brown Avali jumps over the lazy prototype.

Minimal page example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font Switcher Demo</title>
  <link rel="stylesheet" href="https://assets.legdies.xyz/css/style.css">
  <link rel="stylesheet" href="https://assets.legdies.xyz/css/avali-scratch.css">
</head>
<body>
  <div id="fontDemoScope" class="orbitron-font">
    <p>The quick brown Avali jumps over the lazy prototype.</p>
  </div>
</body>
</html>

2. Holographic Block — status toggle

Status Example

Minimal page example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Status Block Demo</title>
  <link rel="stylesheet" href="https://assets.legdies.xyz/css/style.css">
</head>
<body>
  <div class="holographic-block status-initial">
    <h3>Status Example</h3>
  </div>
</body>
</html>

3. Log Item — live

Works best for index/log overview pages.

Minimal page example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Log Item Demo</title>
  <link rel="stylesheet" href="https://assets.legdies.xyz/css/style.css">
  <link rel="stylesheet" href="https://assets.legdies.xyz/css/index.css">
</head>
<body>
  <ul class="log-list">
    <li class="log-item status-error">
      <a href="#">
        <span class="log-title">Critical Failure</span>
        <span class="log-meta">
          <span class="log-date">3025-10-20</span>
          <span class="log-status">error</span>
        </span>
      </a>
    </li>
  </ul>
</body>
</html>

4. Triangles — start/stop

Minimal page example:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Triangles Demo</title>
  <link rel="stylesheet" href="https://assets.legdies.xyzcss/style.css">
  <script src="https://assets.legdies.xyz/js/triangles.js" defer></script>
</head>
<body>
  <div id="triangle-container"></div>
</body>
</html>