Typography

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

This is a paragraph (.p1)

This is a paragraph with the .p2 class applied

This is a paragraph with the .p3 class applied

This is a paragraph with the .p4 class applied

Any of the headings can also be styled using html tags or classes. For example: <h1> and <p class=".h1"> will render the same.

Buttons

<button class="btn">Primary</button>

<button class="btn btn-outline">Outline</button>

<button class="btn btn-text">Text</button>

<button class="btn btn-success">Text</button>

<button class="btn btn-success-outline">Text</button>

<button class="btn btn-danger">Text</button>

<button class="btn btn-danger-outline">Text</button>

Icon Buttons

<button class="btn btn-icon"></button>

Tabs

<div class="tab-container">
  <button>Selected</button>
  <button class="btn btn-text">Unselected</button>
</div>

Chips

<div class="chip">Chip</div>
<div class="chip chip-success">Success</div>
<div class="chip chip-danger">Danger</div>

Tooltips

<div class="tooltip">
  <span class="tooltip-content">I'm a tooltip!</span>
  I have a tooltip, hover over me!
</div>

Timer

<div class="timer">⌛  12:34</div>

Inputs

<label>Enabled</label>
<input class="input" type="text" />

<label>Error</label>
<input class="input input-error" type="text" />
<p class="p3 text-error">An error has occurred</label>

Dropdown

<select class="input">
  <option value="1">Option 1</option>>
  <option value="2">Option 2</option>>
  <option value="3">Option 3</option>>
</select>

Radio Buttons

<label>
  <input class="input-radio" type="radio" name="radio" />
  Radio Button
</label>

<label>
  <input type="radio" name="radio" class="input-radio input-error" />
  Radio Button
</label>

<label>
  <input class="input-radio" type="radio" name="radio" disabled />
  Radio Button
</label>

Checkboxes

<label>
  <input class="input input-checkbox" type="checkbox" />
  Checkbox
</label>

<label>
  <input type="checkbox" class="input input-checkbox input-error" />
  Error
</label>

<label>
<input class="input-checkbox" type="checkbox" disabled />
Disabled
</label>

Tables

<table class="table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td><div class="chip chip-success">Success</div></td>
  </tr>
</table>

Cards

Card title (h4)

Card description (p2).

Card title (h4)

Card description (p2).

Card title (h4)

<div class="card">
  <div class="card-image"></div>
  <div class="card-details">
    <h4 class="card-title">Card title (h4)</h4>
    <p class="card-description p2">Card description (p2).</p>
    <div class="card-actions">
      <button class="btn btn-icon">
        <img src="https://sdk-style.s3.amazonaws.com/icons/edit.svg" />
      </button>
      <button class="btn btn-icon">
        <img src="https://sdk-style.s3.amazonaws.com/icons/cog.svg" />
      </button>
      <button class="btn btn-icon">
        <img src="https://sdk-style.s3.amazonaws.com/icons/info.svg" />
      </button>
    </div>
  </div>
</div>

Accordions

Title

This toggles collapsible content based on user interaction.

<section id="accordion" class="accordion">
  <div class="accordion-container">;
    <details class="accordion-item">
    <summary class="accordion-trigger">
        <span class="accordion-title">Title</span>
        <img class="accordion-icon" aria-hidden="true" src="https://sdk-style.s3.amazonaws.com/icons/chevronDown.svg" /> 
    </summary>
    <div class="accordion-content">
        <p>This toggles collapsible content based on user interaction.</p>
    </div>
    </details>
  </div>
</section>

Modals

<div class="modal-container">
  <div class="modal">
    <h4>Modal title (h4)</h4>
    <p2>Modal description (p2).</p2>
    <div class="actions">
      <button class="btn btn-outline">Button</button>
      <button class="btn">Button</button>
    </div>
  </div>
</div>