Build beautiful interfaces without fighting a framework.

Here is a quick overview of all a17t's elements.


Cards

~neutral !low

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~neutral !normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~neutral !high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~neutral !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~neutral !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~neutral !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~neutral !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~neutral !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~neutral !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

~positive !low

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~positive !normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~positive !high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~positive !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~positive !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~positive !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~positive !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~positive !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~positive !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

~warning !low

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~warning !normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~warning !high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~warning !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~warning !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~warning !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~warning !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~warning !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~warning !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

~critical !low

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~critical !normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~critical !high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~critical !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~critical !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~critical !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~critical !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~critical !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~critical !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

~info !low

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~info !normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~info !high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~info !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~info !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~info !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~info !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~info !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~info !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

~urge !low

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~urge !normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

~urge !high

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et tempor lectus congue et.

Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~urge !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~urge !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~urge !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~urge !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~urge !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~urge !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

Asides

This is a neutral aside. You can specify priorities, but you probably shouldn't. (It's an aside, after all.) What you're seeing here is the default variant — that is, the !normal priority.

Example code
    <div class="aside ~neutral mb-4 md:mb-0 content">
        <p class="content"><strong>This is a neutral aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

This is a positive aside. You can specify priorities, but you probably shouldn't. (It's an aside, after all.) What you're seeing here is the default variant — that is, the !normal priority.

Example code
    <div class="aside ~positive mb-4 md:mb-0 content">
        <p class="content"><strong>This is a positive aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

This is a warning aside. You can specify priorities, but you probably shouldn't. (It's an aside, after all.) What you're seeing here is the default variant — that is, the !normal priority.

Example code
    <div class="aside ~warning mb-4 md:mb-0 content">
        <p class="content"><strong>This is a warning aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

This is a critical aside. You can specify priorities, but you probably shouldn't. (It's an aside, after all.) What you're seeing here is the default variant — that is, the !normal priority.

Example code
    <div class="aside ~critical mb-4 md:mb-0 content">
        <p class="content"><strong>This is a critical aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

This is a info aside. You can specify priorities, but you probably shouldn't. (It's an aside, after all.) What you're seeing here is the default variant — that is, the !normal priority.

Example code
    <div class="aside ~info mb-4 md:mb-0 content">
        <p class="content"><strong>This is a info aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

This is a urge aside. You can specify priorities, but you probably shouldn't. (It's an aside, after all.) What you're seeing here is the default variant — that is, the !normal priority.

Example code
    <div class="aside ~urge mb-4 md:mb-0 content">
        <p class="content"><strong>This is a urge aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

Icons

Example code
    
    <span class="icon m-2 ~neutral !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~positive !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~warning !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~critical !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~info !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~urge !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    

Typography

This is a content block

This is a paragraph. When you place your body content inside a content class, a17t makes sure that the spacing figures everything out automatically.

While a17t usually tries to avoid 'magic' solutions, type is important (and difficult) enough to warrant an exception.

This is a blockquote. Lorem ipsum dolor sit amet. These are words that were once spoken, I guess. This is its source.

This is a final closing paragraph to show you how it all comes together.

Just kidding, there's more.

Lorem ipsum dolor sit amet.

  • An item
  • Another item
  • Three items?

This is reala final closing paragraph to show you how it all comes together.

  1. One!
  2. Two?
  3. Three.
Example code
    <section class="content">
        <h3>This is a content block</h3>
        <p>This is a paragraph. When you place your body content inside a content class,
            a17t makes sure that the spacing figures everything out automatically.</p>
        <p>While a17t usually tries to avoid '<a href="https://rmrm.io">magic</a>' solutions, type is important
            (and difficult) enough to warrant an exception.</p>
        <blockquote>
            This is a blockquote. Lorem ipsum dolor sit amet. These are words that were once spoken, I guess.
            <cite>This is its source.</cite>
        </blockquote>
        <p>This is a final closing paragraph to show you how it all comes together.</p>
        <h3>Just kidding, there's more.</h3>
        <p>Lorem ipsum dolor sit amet.</p>
        <ul>
            <li>An item</li>
            <li>Another item</li>
            <li>Three items?</li>
        </ul>
        <p>This is <i>real</i>a final closing paragraph to show you how it all comes together.</p>
        <ol>
            <li>One!</li>
            <li>Two?</li>
            <li>Three.</li>
        </ol>
    </section>
    

This is a label.

It's like the opposite of a support.

These can all have tones, by the way!

Example code
    <p class="label">This is a label.</p>
    <p class="support">It's like the opposite of a support.</p>
    <p class="support ~critical">These can all have tones, by the way!</p>
    

This is some text, with an inline <code> tag. This requires a content block!

This is some longer code!

that() {
spansMultipleLines();  
}

To use this codeblock, press Cmd and CX together.

Example code
    <div class="content">
    <p>This is some text, with an inline <code>&lt;code&gt;</code> tag. This requires a content block!</p>
    <pre><code>This is some longer code!

that() {
spansMultipleLines();  
}</code></pre>

<p>To use this <code>code</code><code>block</code>, press <kbd>Cmd</kbd> and <kbd>C</kbd><kbd>X</kbd> together.</p>
</div>

This is a supra

This is a heading

Example code
    <p class="supra">This is a supra</p>
    <h3 class="heading">This is a heading</h3>
    
Name Status Price
Landinator 9000 New Completed $300
Hammer Waiting $20
Computer Processing $500
Example code
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Landinator 9000 <span class="badge ~neutral">New</span></td>
                <td><span class="chip ~positive">Completed</span></td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Hammer</td>
                <td><span class="chip ~urge">Waiting</span></td>
                <td>$20</td>
            </tr>
            <tr>
                <td>Computer</td>
                <td><span class="chip ~info">Processing</span></td>
                <td>$500</td>
            </tr>
        </tbody>
    </table>
    

This is a heading-subheading pair

I'm the subheading (which shouldn't be followed by a paragraph).

Example code
    <h3 class="heading">This is a heading-subheading pair</h3>
    <p class="subheading">I'm the subheading (which shouldn't be followed by a paragraph).</p>
    

Information

Neutral Neutral Neutral
Positive Positive Positive
Warning Warning Warning
Critical Critical Critical
Info Info Info
Urge Urge Urge
Example code
    
    <div class="mb-1">
        
        <span class="chip ~neutral !low">Neutral</span>
        
        <span class="chip ~neutral !normal">Neutral</span>
        
        <span class="chip ~neutral !high">Neutral</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~positive !low">Positive</span>
        
        <span class="chip ~positive !normal">Positive</span>
        
        <span class="chip ~positive !high">Positive</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~warning !low">Warning</span>
        
        <span class="chip ~warning !normal">Warning</span>
        
        <span class="chip ~warning !high">Warning</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~critical !low">Critical</span>
        
        <span class="chip ~critical !normal">Critical</span>
        
        <span class="chip ~critical !high">Critical</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~info !low">Info</span>
        
        <span class="chip ~info !normal">Info</span>
        
        <span class="chip ~info !high">Info</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~urge !low">Urge</span>
        
        <span class="chip ~urge !normal">Urge</span>
        
        <span class="chip ~urge !high">Urge</span>
        
    </div>
    
    
1 New 2 New 3 New
1 New 2 New 3 New
1 New 2 New 3 New
1 New 2 New 3 New
1 New 2 New 3 New
1 New 2 New 3 New
Example code
    
    <div class="mb-1">
        
        <span class="badge ~neutral !low">1</span>
        <span class="badge ~neutral !low">New</span>
        
        <span class="badge ~neutral !normal">2</span>
        <span class="badge ~neutral !normal">New</span>
        
        <span class="badge ~neutral !high">3</span>
        <span class="badge ~neutral !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~positive !low">1</span>
        <span class="badge ~positive !low">New</span>
        
        <span class="badge ~positive !normal">2</span>
        <span class="badge ~positive !normal">New</span>
        
        <span class="badge ~positive !high">3</span>
        <span class="badge ~positive !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~warning !low">1</span>
        <span class="badge ~warning !low">New</span>
        
        <span class="badge ~warning !normal">2</span>
        <span class="badge ~warning !normal">New</span>
        
        <span class="badge ~warning !high">3</span>
        <span class="badge ~warning !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~critical !low">1</span>
        <span class="badge ~critical !low">New</span>
        
        <span class="badge ~critical !normal">2</span>
        <span class="badge ~critical !normal">New</span>
        
        <span class="badge ~critical !high">3</span>
        <span class="badge ~critical !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~info !low">1</span>
        <span class="badge ~info !low">New</span>
        
        <span class="badge ~info !normal">2</span>
        <span class="badge ~info !normal">New</span>
        
        <span class="badge ~info !high">3</span>
        <span class="badge ~info !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~urge !low">1</span>
        <span class="badge ~urge !low">New</span>
        
        <span class="badge ~urge !normal">2</span>
        <span class="badge ~urge !normal">New</span>
        
        <span class="badge ~urge !high">3</span>
        <span class="badge ~urge !high">New</span>
        
    </div>
    
    
Loading Loading Loading
Loading Loading Loading
Loading Loading Loading
Loading Loading Loading
Loading Loading Loading
Loading Loading Loading
Example code
    
    <div class="mb-1">
        
        <span class="chip ~neutral !low loading text-lg">Loading</span>
        
        <span class="chip ~neutral !normal loading text-lg">Loading</span>
        
        <span class="chip ~neutral !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~positive !low loading text-lg">Loading</span>
        
        <span class="chip ~positive !normal loading text-lg">Loading</span>
        
        <span class="chip ~positive !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~warning !low loading text-lg">Loading</span>
        
        <span class="chip ~warning !normal loading text-lg">Loading</span>
        
        <span class="chip ~warning !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~critical !low loading text-lg">Loading</span>
        
        <span class="chip ~critical !normal loading text-lg">Loading</span>
        
        <span class="chip ~critical !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~info !low loading text-lg">Loading</span>
        
        <span class="chip ~info !normal loading text-lg">Loading</span>
        
        <span class="chip ~info !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~urge !low loading text-lg">Loading</span>
        
        <span class="chip ~urge !normal loading text-lg">Loading</span>
        
        <span class="chip ~urge !high loading text-lg">Loading</span>
        
    </div>
    
    
60% 60% 60%
Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~neutral !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~neutral !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~neutral !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    
60% 60% 60%
Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~positive !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~positive !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~positive !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    
60% 60% 60%
Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~warning !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~warning !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~warning !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    
60% 60% 60%
Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~critical !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~critical !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~critical !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    
60% 60% 60%
Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~info !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~info !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~info !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    
60% 60% 60%
Example code
    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~urge !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~urge !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~urge !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

Interaction

Example code
    
    <div class="mb-1">
        
        <a class="button ~neutral !low" href="https://rmrm.io">Hello</a>
        <a class="button ~neutral !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~neutral !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~neutral !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~neutral !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~neutral !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~neutral !high" href="https://rmrm.io">Hello</a>
        <a class="button ~neutral !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~neutral !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~positive !low" href="https://rmrm.io">Hello</a>
        <a class="button ~positive !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~positive !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~positive !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~positive !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~positive !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~positive !high" href="https://rmrm.io">Hello</a>
        <a class="button ~positive !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~positive !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~warning !low" href="https://rmrm.io">Hello</a>
        <a class="button ~warning !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~warning !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~warning !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~warning !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~warning !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~warning !high" href="https://rmrm.io">Hello</a>
        <a class="button ~warning !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~warning !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~critical !low" href="https://rmrm.io">Hello</a>
        <a class="button ~critical !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~critical !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~critical !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~critical !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~critical !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~critical !high" href="https://rmrm.io">Hello</a>
        <a class="button ~critical !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~critical !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~info !low" href="https://rmrm.io">Hello</a>
        <a class="button ~info !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~info !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~info !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~info !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~info !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~info !high" href="https://rmrm.io">Hello</a>
        <a class="button ~info !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~info !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~urge !low" href="https://rmrm.io">Hello</a>
        <a class="button ~urge !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~urge !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~urge !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~urge !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~urge !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~urge !high" href="https://rmrm.io">Hello</a>
        <a class="button ~urge !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~urge !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    
Example code
    
    <div class="mb-1">
        
        <a class="portal ~neutral !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~neutral !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~neutral !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~neutral !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~neutral !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~neutral !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~positive !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~positive !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~positive !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~positive !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~positive !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~positive !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~warning !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~warning !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~warning !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~warning !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~warning !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~warning !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~critical !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~critical !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~critical !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~critical !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~critical !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~critical !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~info !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~info !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~info !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~info !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~info !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~info !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~urge !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~urge !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~urge !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~urge !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~urge !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~urge !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    

Forms

Example code
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~neutral !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~neutral !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~neutral !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~positive !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~positive !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~positive !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~warning !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~warning !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~warning !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~critical !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~critical !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~critical !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~info !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~info !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~info !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~urge !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~urge !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~urge !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    
Example code
    
    <textarea class="field !low mb-1" placeholder="Type something"></textarea>
    
    <textarea class="field !normal mb-1" placeholder="Type something"></textarea>
    
    <textarea class="field !high mb-1" placeholder="Type something"></textarea>
    
    
Example code
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~neutral !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~neutral !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~neutral !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~positive !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~positive !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~positive !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~warning !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~warning !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~warning !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~critical !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~critical !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~critical !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~info !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~info !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~info !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~urge !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~urge !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~urge !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    
Example code
    <label class="switch block">
        <input type="checkbox">
        <span>Save my information</span>
    </label>
    <label class="switch block">
        <input type="checkbox">
        <span>I am not a robot</span>
    </label>
    
Example code
    <label class="switch">
        <input type="radio" name="rad">
        <span>I am cool</span>
    </label>
    <label class="switch">
        <input type="radio" name="rad">
        <span>I am not cool</span>
    </label>
    <label class="switch">
        <input type="radio" name="rad" disabled>
        <span>Disabled</span>
    </label>
    
Example code
    <label class="upload">
        <input type="file">
        <span class="button field">Upload</span>
        <span>Pick a file...</span>
    </label>
    
More Options
Example code
    <div class="button ~neutral !high">
        More Options
        <span class="icon ml-4 mr-1">
            <i class="chev"></i>
        </span>
    </div>