Cursor

  <div class="d-flex d-flex-wrap gap-2">
    <button class="c-default">c-default</button>
    <button class="c-click">c-click</button>
    <button class="c-help">c-help</button>
    <button class="c-wait">c-wait</button>
    <button class="c-crosshair">c-crosshair</button>
    <button class="c-not-allowed">c-not-allowed</button>
    <button class="c-zoom-in">c-zoom-in</button>
    <button class="c-zoom-out">c-zoom-out</button>
    <button class="c-grab">c-grab</button>
    <button class="c-grabbing">c-grabbing</button>
    <button class="c-no-drop">c-no-drop</button>
    <button class="c-text">c-text</button>
    <button class="c-copy">c-copy</button>
    <button class="c-move">c-move</button>
  </div>

Cursors

c-default, c-click, c-help, c-wait, c-crosshair, c-not-allowed, c-zoom-in, c-zoom-out, c-grab, c-grabbing, c-no-drop, c-text, c-copy, c-move

No Link

default no-link

  <div class="d-flex d-flex-wrap gap-2">
    <a href="javascript:alert('defautl tag A')">default</a>
    <a class="no-link" href="javascript:alert('class no-link')">no-link</a>
  </div>

no-link

Disable linking for tag A

Article

header3 header3 header3 header3

Text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text

header4 header4 header4 header4

text text text text text text text text text text text text text text text text text text text text text

  <div class="article article-x3">
    <h3>header3 header3 header3 header3</h3>
    <p class="letter-x2">Text text text text text text text text text text text text text text text text text text
      text text text </p>
    <p class="letter-x3">text text text text text text text text text text text text text text text text text text
      text text text </p>
    <p class="letter-x4">text text text text text text text text text text text text text text text text text text
      text text text </p>
    <p class="letter-x5">text text text text text text text text text text text text text text text text text text
      text text text </p>
    <h4>header4 header4 header4 header4</h4>
    <p class="letter-x2">text text text text text text text text text text text text text text text text text text text text text </p>
    <p class="letter-x2">text text text text text text text text text text text text text text text text text text text text text </p>
    <p class="letter-x2">text text text text text text text text text text text text text text text text text text text text text </p>
    <p class="letter-x2">text text text text text text text text text text text text text text text text text text text text text </p>
    <p class="letter-x2">text text text text text text text text text text text text text text text text text text text text text </p>
    <p class="letter-x2">text text text text text text text text text text text text text text text text text text text text text </p>
  </div>

article	Base class
article-x2...6	Count column
letter-x2...6	Cap size

Image Ratio

  <img alt="" src="/assets/icons/apple-icon-114x114.png" class="w-10rem h-5rem" />
  <img alt="" src="/assets/icons/apple-icon-114x114.png" class="ratio w-10rem h-5rem" />
  <img alt="" src="/assets/icons/apple-icon-114x114.png" class="w-5rem h-10rem" />
  <img alt="" src="/assets/icons/apple-icon-114x114.png" class="ratio w-5rem h-10rem" />

ratio

Enables a 1:1 aspect ratio with the image positioned in the center along the minimum side of the container.

Button

btn

btn btn-light btn btn-secondary btn btn-warning btn btn-danger btn btn-success btn btn-info btn btn-primary btn btn-dark

5%5%5%5%5%5%

  <div class="d-flex d-flex-wrap gap-2">
    <a class="btn" href="/" target="_blank">btn</a>
    <button class="btn">btn</button>
    <button class="btn" disabled>btn with disabled</button>
  </div>
  <div class="d-flex d-flex-wrap gap-2 mt-2">
    <a class="btn btn-light">btn btn-light</a>
    <a class="btn btn-secondary">btn btn-secondary</a>
    <a class="btn btn-warning">btn btn-warning</a>
    <a class="btn btn-danger">btn btn-danger</a>
    <a class="btn btn-success">btn btn-success</a>
    <a class="btn btn-info">btn btn-info</a>
    <a class="btn btn-primary">btn btn-primary</a>
    <a class="btn btn-dark">btn btn-dark</a>
  </div>
  <div class="d-flex d-flex-wrap gap-2 mt-2 d-flex-y-baseline">
    <a class="btn btn-info btn-circle btn-xs"><i class="ong ong-home"></i></a>
    <a class="btn btn-info btn-circle btn-xs">5%</a>
    <a class="btn btn-info btn-circle btn-sm"><i class="ong ong-home"></i></a>
    <a class="btn btn-info btn-circle btn-sm">5%</a>
    <a class="btn btn-info btn-circle btn-md"><i class="ong ong-home"></i></a>
    <a class="btn btn-info btn-circle btn-md">5%</a>
    <a class="btn btn-info btn-circle btn-lg"><i class="ong ong-home"></i></a>
    <a class="btn btn-info btn-circle btn-lg">5%</a>
    <a class="btn btn-info btn-circle btn-xl"><i class="ong ong-home"></i></a>
    <a class="btn btn-info btn-circle btn-xl">5%</a>
    <a class="btn btn-info btn-circle btn-2xl"><i class="ong ong-home"></i></a>
    <a class="btn btn-info btn-circle btn-2xl">5%</a>
  </div>

btn	Base button
btn-circle	Circle button
btn-light, btn-secondary, btn-warning, btn-danger, btn-success, btn-info, btn-primary, btn-dark	Color of button
btn-xs, btn-sm, btn-md, btn-lg, btn-xl, btn-2xl, btn-3xl, btn-4xl, btn-5xl, btn-6xl, btn-7xl, btn-8xl, btn-9xl	Size of button

Heading

The HTML Section Heading elements

  <h1>The HTML Section Heading elements</h1>
  <h2>The HTML Section Heading elements</h2>
  <h3>The HTML Section Heading elements</h3>
  <h4>The HTML Section Heading elements</h4>
  <h5>The HTML Section Heading elements</h5>
  <h6>The HTML Section Heading elements</h6>

h1...6

Elements represent six levels of section headings. h1 is the highest section level and h6 is the lowest.

Table

#	Name	City
1	Harly	SPb
2	Joy	SPb

  <table>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>

    <tr>
      <td>1</td>
      <td>Harly</td>
      <td>SPb</td>
    </tr>

    <tr>
      <td>2</td>
      <td>Joy</td>
      <td>SPb</td>
    </tr>
  </table>

Input

Input:

File:

Textarea:

Select:

Check:

checked

not checked

disabled

<div class="box">
    Input:
    <input type="text" class="full-width">
  </div>
  <div class="box">
    File:
    <input type="file" class="full-width">
  </div>
  <div class="box">
    Textarea:
    <textarea class="full-width"></textarea>
  </div>
  <div class="box">
    Select:
    <select class="full-width">
      <option>demo</option>
    </select>
  </div>
  <div class="box">
    Check:
    <div class="r">
      <div class="c4">
        <input type="checkbox" checked="checked" id="demo-check-1">
        <label for="demo-check-1">checked</label>
      </div>
      <div class="c4">
        <input type="checkbox" id="demo-check-2">
        <label for="demo-check-2">not checked</label>
      </div>
      <div class="c4">
        <input type="checkbox" id="demo-check-2" checked="checked" disabled>
        <label for="demo-check-2">disabled</label>
      </div>
    </div>
  </div>

Dialog

Dialog:

Dialog:
    <button onClick="document.querySelector('#di').showModal()" class="btn">show</button>

    <dialog id="di">
      <form>
        <h1>demo dialog</h1>
        <div>
          The HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
        </div>
        <p class="mt-2">press [Esc] for exit or <button value="cancel" formmethod="dialog" class="btn">Close</button></p>
      </form>
    </dialog>