The design of HammerTime as an extensible, HTML/CSS-only framework. Everything on this page is rendered with the published stylesheet; the controls below are docs-only JavaScript and are not part of the package.
npm install @went.tf/hammertime-css
Info and warning variants, plus a compact layout with actions.
<div class="alert info">
<div class="alert-icon">i</div>
<div class="alert-content">
<div class="alert-title">Info alert</div>
<div class="alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="alert warning">
<div class="alert-icon">!</div>
<div class="alert-content">
<div class="alert-title">Warning alert</div>
<div class="alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="alert">
<div class="alert-content">
<div class="alert-title">Plain alert</div>
<div class="alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<div class="alert compact info">
<div class="alert-content">
<div class="alert-title">Compact alert title</div>
<div class="alert-text">Compact alert text</div>
<div class="alert-actions"><button type="button" class="button"><span class="button-content"><span class="button-text">Compact alert action</span></span></button></div>
</div>
</div>Every colour in the default, disabled, pressed and loading state. Icon-only variants (.icon-only with a .button-icon) follow. The loading state puts a .loading-icon (a slot for any icon, here the clock indicator) over the dimmed content, on a gradient in the button colour.
.loading-icon element before .button-content inside the button. The gradient and the dimming of the content come from it, a button with only .loading shows no gradient. It is a slot for any icon or spinner. .icon-only buttons put their icon in .button-icon.<div class="button-group separated">
<button type="button" class="button"><span class="button-content"><span class="button-text">Default</span></span></button>
<button type="button" class="button" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button icon-only" aria-label="Default icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button icon-only" disabled aria-label="Default icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button icon-only loading" disabled aria-label="Default icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>
<div class="button-group separated">
<button type="button" class="button button-primary"><span class="button-content"><span class="button-text">Primary</span></span></button>
<button type="button" class="button button-primary" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-primary pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-primary loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-primary icon-only" aria-label="Primary icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-primary icon-only" disabled aria-label="Primary icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-primary icon-only loading" disabled aria-label="Primary icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>
<div class="button-group separated">
<button type="button" class="button button-success"><span class="button-content"><span class="button-text">Success</span></span></button>
<button type="button" class="button button-success" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-success pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-success loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-success icon-only" aria-label="Success icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-success icon-only" disabled aria-label="Success icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-success icon-only loading" disabled aria-label="Success icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>
<div class="button-group separated">
<button type="button" class="button button-danger"><span class="button-content"><span class="button-text">Danger</span></span></button>
<button type="button" class="button button-danger" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-danger pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-danger loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-danger icon-only" aria-label="Danger icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-danger icon-only" disabled aria-label="Danger icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-danger icon-only loading" disabled aria-label="Danger icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>
<div class="button-group separated">
<button type="button" class="button button-warning"><span class="button-content"><span class="button-text">Warning</span></span></button>
<button type="button" class="button button-warning" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-warning pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-warning loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-warning icon-only" aria-label="Warning icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-warning icon-only" disabled aria-label="Warning icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-warning icon-only loading" disabled aria-label="Warning icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>
<div class="button-group separated">
<button type="button" class="button button-light"><span class="button-content"><span class="button-text">Light</span></span></button>
<button type="button" class="button button-light" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-light pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-light loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-light icon-only" aria-label="Light icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-light icon-only" disabled aria-label="Light icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-light icon-only loading" disabled aria-label="Light icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>
<div class="button-group separated">
<button type="button" class="button button-dark"><span class="button-content"><span class="button-text">Dark</span></span></button>
<button type="button" class="button button-dark" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-dark pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-dark loading" disabled><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-dark icon-only" aria-label="Dark icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-dark icon-only" disabled aria-label="Dark icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-dark icon-only loading" disabled aria-label="Dark icon-only button"><span class="loading-icon"><svg class="loading-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"><path d="M35 32a3.001 3.001 0 0 1-6 0l3-26.074L35 32Z" class="minute"/><path d="M35 32a3.001 3.001 0 0 1-6 0l3-13.037L35 32Z" class="hour"/><g class="base"><circle cx="32" cy="32" r="29" class="face"/><path d="M32 3v7m0 44v7m22-29h7M3 32h7" class="ticking"/></g></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>Input, select, checkbox and radio.
.form-checkbox-check-icon and .form-select-icon are positioned for a fixed-width icon (about 1.25em wide, 1em tall, such as Font Awesome's fa-fw), a text glyph will not line up..form-radio-input-wrap and .form-radio-label pushed the label out. From v0.1.2 the control is a flex row and the markup may be formatted freely.<div class="form-control-group vertical">
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="regular-text">Text input</label>
<input id="regular-text" class="input-field" type="text" value="Hello">
</div>
</div>
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="regular-select">Select</label>
<div class="form-control-select">
<select id="regular-select" class="form-select-input input-field">
<option>First</option>
<option>Second</option>
</select>
<span class="form-select-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></span>
</div>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-checkbox">
<span class="form-checkbox-input-wrap">
<input id="regular-check" class="form-checkbox-input" type="checkbox" checked>
<svg class="form-checkbox-check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>
</span>
<label class="form-checkbox-label" for="regular-check">Checkbox</label>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-radio">
<span class="form-radio-input-wrap">
<input id="regular-radio" class="form-radio-input" type="radio" name="regular-radio" checked>
<span class="form-radio-select-icon"></span>
</span><label class="form-radio-label" for="regular-radio">Radio</label>
</div>
</div>
</div>The same controls with the readonly attribute.
<div class="form-control-group vertical">
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="readonly-text">Text input</label>
<input id="readonly-text" class="input-field" type="text" value="Hello" readonly>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="readonly-select">Select</label>
<div class="form-control-select">
<select id="readonly-select" class="form-select-input input-field" readonly>
<option>First</option>
<option>Second</option>
</select>
<span class="form-select-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></span>
</div>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-checkbox">
<span class="form-checkbox-input-wrap">
<input id="readonly-check" class="form-checkbox-input" type="checkbox" checked disabled>
<svg class="form-checkbox-check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>
</span>
<label class="form-checkbox-label" for="readonly-check">Checkbox</label>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-radio">
<span class="form-radio-input-wrap">
<input id="readonly-radio" class="form-radio-input" type="radio" name="readonly-radio" checked disabled>
<span class="form-radio-select-icon"></span>
</span><label class="form-radio-label" for="readonly-radio">Radio</label>
</div>
</div>
</div>The same controls disabled.
<div class="form-control-group vertical">
<div class="form-control-wrap disabled">
<div class="form-control">
<label class="form-control-label" for="disabled-text">Text input</label>
<input id="disabled-text" class="input-field" type="text" value="Hello" disabled>
</div>
</div>
<div class="form-control-wrap disabled">
<div class="form-control">
<label class="form-control-label" for="disabled-select">Select</label>
<div class="form-control-select">
<select id="disabled-select" class="form-select-input input-field" disabled>
<option>First</option>
<option>Second</option>
</select>
<span class="form-select-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></span>
</div>
</div>
</div>
<div class="form-control-wrap disabled">
<div class="form-control-checkbox">
<span class="form-checkbox-input-wrap">
<input id="disabled-check" class="form-checkbox-input" type="checkbox" checked disabled>
<svg class="form-checkbox-check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>
</span>
<label class="form-checkbox-label" for="disabled-check">Checkbox</label>
</div>
</div>
<div class="form-control-wrap disabled">
<div class="form-control-radio">
<span class="form-radio-input-wrap">
<input id="disabled-radio" class="form-radio-input" type="radio" name="disabled-radio" checked disabled>
<span class="form-radio-select-icon"></span>
</span><label class="form-radio-label" for="disabled-radio">Radio</label>
</div>
</div>
</div>The framework ships no icons, only empty slots for them: .form-checkbox-check-icon, .form-select-icon, .button-icon and .loading-icon. These demos fill them with Font Awesome Free solid icons (CC BY 4.0, fontawesome.com), which are only used by this documentation and are not part of the package. The loading buttons here use the set's spinner icon (spinner) rotated by a docs-only animation, the main demos use the clock indicator. Any inline SVG or icon font works.
<div class="form-control-group vertical">
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="icons-fontawesome-text">Text input</label>
<input id="icons-fontawesome-text" class="input-field" type="text" value="Hello">
</div>
</div>
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="icons-fontawesome-select">Select</label>
<div class="form-control-select">
<select id="icons-fontawesome-select" class="form-select-input input-field">
<option>First</option>
<option>Second</option>
</select>
<span class="form-select-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></span>
</div>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-checkbox">
<span class="form-checkbox-input-wrap">
<input id="icons-fontawesome-check" class="form-checkbox-input" type="checkbox" checked>
<svg class="form-checkbox-check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>
</span>
<label class="form-checkbox-label" for="icons-fontawesome-check">Checkbox</label>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-radio">
<span class="form-radio-input-wrap">
<input id="icons-fontawesome-radio" class="form-radio-input" type="radio" name="icons-fontawesome-radio" checked>
<span class="form-radio-select-icon"></span>
</span><label class="form-radio-label" for="icons-fontawesome-radio">Radio</label>
</div>
</div>
</div>
<div class="button-group separated">
<button type="button" class="button button-primary"><span class="button-content"><span class="button-text">Primary</span></span></button>
<button type="button" class="button button-primary" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-primary pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-primary loading" disabled><span class="loading-icon"><svg class="docs-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M208 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm0 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM48 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm368 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM75 369.1A48 48 0 1 1 142.9 437 48 48 0 1 1 75 369.1zM75 75A48 48 0 1 1 142.9 142.9 48 48 0 1 1 75 75zM437 369.1A48 48 0 1 1 369.1 437 48 48 0 1 1 437 369.1z"/></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-primary icon-only" aria-label="Primary icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-primary icon-only" disabled aria-label="Primary icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
<button type="button" class="button button-primary icon-only loading" disabled aria-label="Primary icon-only button"><span class="loading-icon"><svg class="docs-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M208 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm0 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM48 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm368 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM75 369.1A48 48 0 1 1 142.9 437 48 48 0 1 1 75 369.1zM75 75A48 48 0 1 1 142.9 142.9 48 48 0 1 1 75 75zM437 369.1A48 48 0 1 1 369.1 437 48 48 0 1 1 437 369.1z"/></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1.25em" height="1em" fill="currentColor" aria-hidden="true"><path d="M320 32l-8.6 0C300.4 12.9 279.7 0 256 0L128 0C104.3 0 83.6 12.9 72.6 32L64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64zM136 112c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0z"/></svg></span></span></button>
</div>The framework ships no icons, only empty slots for them: .form-checkbox-check-icon, .form-select-icon, .button-icon and .loading-icon. These demos fill them with Lucide icons (ISC, lucide.dev), which are only used by this documentation and are not part of the package. The loading buttons here use the set's spinner icon (loader-circle) rotated by a docs-only animation, the main demos use the clock indicator. Any inline SVG or icon font works.
<div class="form-control-group vertical">
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="icons-lucide-text">Text input</label>
<input id="icons-lucide-text" class="input-field" type="text" value="Hello">
</div>
</div>
<div class="form-control-wrap">
<div class="form-control">
<label class="form-control-label" for="icons-lucide-select">Select</label>
<div class="form-control-select">
<select id="icons-lucide-select" class="form-select-input input-field">
<option>First</option>
<option>Second</option>
</select>
<span class="form-select-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg></span>
</div>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-checkbox">
<span class="form-checkbox-input-wrap">
<input id="icons-lucide-check" class="form-checkbox-input" type="checkbox" checked>
<svg class="form-checkbox-check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
</span>
<label class="form-checkbox-label" for="icons-lucide-check">Checkbox</label>
</div>
</div>
<div class="form-control-wrap">
<div class="form-control-radio">
<span class="form-radio-input-wrap">
<input id="icons-lucide-radio" class="form-radio-input" type="radio" name="icons-lucide-radio" checked>
<span class="form-radio-select-icon"></span>
</span><label class="form-radio-label" for="icons-lucide-radio">Radio</label>
</div>
</div>
</div>
<div class="button-group separated">
<button type="button" class="button button-primary"><span class="button-content"><span class="button-text">Primary</span></span></button>
<button type="button" class="button button-primary" disabled><span class="button-content"><span class="button-text">Disabled</span></span></button>
<button type="button" class="button button-primary pressed"><span class="button-content"><span class="button-text">Pressed</span></span></button>
<button type="button" class="button button-primary loading" disabled><span class="loading-icon"><svg class="docs-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></span><span class="button-content"><span class="button-text">Loading</span></span></button>
<button type="button" class="button button-primary icon-only" aria-label="Primary icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /> <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /></svg></span></span></button>
<button type="button" class="button button-primary icon-only" disabled aria-label="Primary icon-only button"><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /> <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /></svg></span></span></button>
<button type="button" class="button button-primary icon-only loading" disabled aria-label="Primary icon-only button"><span class="loading-icon"><svg class="docs-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></span><span class="button-content"><span class="button-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /> <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /></svg></span></span></button>
</div>Colours, with optional prefix and suffix.
<span class="badge-group">
<span class="badge"><span class="badge-content">Default badge</span></span>
<span class="badge badge-green"><span class="badge-content">Green badge</span></span>
<span class="badge badge-blue"><span class="badge-content">Blue badge</span></span>
<span class="badge badge-cyan"><span class="badge-content">Cyan badge</span></span>
<span class="badge badge-purple"><span class="badge-content">Purple badge</span></span>
<span class="badge badge-red"><span class="badge-content">Red badge</span></span>
<span class="badge badge-yellow"><span class="badge-content">Yellow badge</span></span>
<span class="badge badge-muted"><span class="badge-content">Muted badge</span></span>
</span>
<span class="badge-group">
<span class="badge"><span class="badge-prefix">Prefixed</span><span class="badge-content">Default badge</span></span>
<span class="badge badge-green"><span class="badge-prefix">Prefixed</span><span class="badge-content">Green badge</span></span>
<span class="badge badge-blue"><span class="badge-prefix">Prefixed</span><span class="badge-content">Blue badge</span></span>
<span class="badge badge-cyan"><span class="badge-prefix">Prefixed</span><span class="badge-content">Cyan badge</span></span>
<span class="badge badge-purple"><span class="badge-prefix">Prefixed</span><span class="badge-content">Purple badge</span></span>
<span class="badge badge-red"><span class="badge-prefix">Prefixed</span><span class="badge-content">Red badge</span></span>
<span class="badge badge-yellow"><span class="badge-prefix">Prefixed</span><span class="badge-content">Yellow badge</span></span>
<span class="badge badge-muted"><span class="badge-prefix">Prefixed</span><span class="badge-content">Muted badge</span></span>
</span>
<span class="badge-group">
<span class="badge"><span class="badge-content">Default badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-green"><span class="badge-content">Green badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-blue"><span class="badge-content">Blue badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-cyan"><span class="badge-content">Cyan badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-purple"><span class="badge-content">Purple badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-red"><span class="badge-content">Red badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-yellow"><span class="badge-content">Yellow badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-muted"><span class="badge-content">Muted badge</span><span class="badge-suffix">Suffixed</span></span>
</span>
<span class="badge-group">
<span class="badge"><span class="badge-prefix">Prefixed</span><span class="badge-content">Default badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-green"><span class="badge-prefix">Prefixed</span><span class="badge-content">Green badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-blue"><span class="badge-prefix">Prefixed</span><span class="badge-content">Blue badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-cyan"><span class="badge-prefix">Prefixed</span><span class="badge-content">Cyan badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-purple"><span class="badge-prefix">Prefixed</span><span class="badge-content">Purple badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-red"><span class="badge-prefix">Prefixed</span><span class="badge-content">Red badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-yellow"><span class="badge-prefix">Prefixed</span><span class="badge-content">Yellow badge</span><span class="badge-suffix">Suffixed</span></span>
<span class="badge badge-muted"><span class="badge-prefix">Prefixed</span><span class="badge-content">Muted badge</span><span class="badge-suffix">Suffixed</span></span>
</span>Header, body header cell and footer. Add .responsive to the wrapper to scroll on narrow screens.
| Table header cell 1 | Table header cell 2 | Table header cell 3 |
|---|---|---|
| Data cell 1 / 1 | Data cell 1 / 2 | Data cell 1 / 3 |
| Body header cell 2 / 1 | Data cell 2 / 2 | Data cell 2 / 3 |
| Footer cell 1 | Footer cell 2 | Footer cell 3 |
<div class="table-wrap">
<table class="table">
<thead>
<tr><th>Table header cell 1</th><th>Table header cell 2</th><th>Table header cell 3</th></tr>
</thead>
<tbody>
<tr><td>Data cell 1 / 1</td><td>Data cell 1 / 2</td><td>Data cell 1 / 3</td></tr>
<tr><th>Body header cell 2 / 1</th><td>Data cell 2 / 2</td><td>Data cell 2 / 3</td></tr>
</tbody>
<tfoot>
<tr><td>Footer cell 1</td><td>Footer cell 2</td><td>Footer cell 3</td></tr>
</tfoot>
</table>
</div>Styling hooks only: toggle .visible (and set an explicit height) from your own script. This demo toggles it with the button.
<summary> (list-style: none), so a <details> toggle shows no hint that it can be clicked. Give <summary> its own affordance, such as a chevron, a border or a pointer cursor (see the "HTML source" toggles on this page). The framework only styles .collapsible, it never drives .visible for you.This is the contents of the collapsible container.
Visibility is controlled with the .visible class.
<button type="button" class="button" data-demo-toggle="#collapsible-demo"><span class="button-content"><span class="button-text">Toggle visibility</span></span></button>
<div id="collapsible-demo" class="collapsible animate visible">
<div class="collapsible-inner">
<p>This is the contents of the collapsible container.</p>
<p>Visibility is controlled with the <code class="code-span">.visible</code> class.</p>
</div>
</div>A container with an optional header.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<article class="card">
<header class="card-header"><h2>Card title</h2></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>Needs the CSS-only build, which derives the palette from --ht-brand at runtime. Edit any custom property below to see it applied live.
The gradient is opt-in in the library ($background-gradient: true in Sass), the compiled stylesheet does not include it. This toggle only paints it with docs-only CSS from the same --ht-color-bg-gradient-* and --ht-value-bg-gradient-* tokens. The middle is the brand color, the start and end follow it until you pick a color.
Generated from the compiled Sass token maps. Use the copy button next to a property name to copy it.
| Property | Default |
|---|---|
--ht-brand
|
#5865f2 |
| Property | Default |
|---|---|
--ht-value-base-font-size
|
16px |
--ht-value-font-family-base
|
Montserrat, sans-serif |
--ht-value-font-family-mono
|
Source Code Pro, Consolas, monospace |
--ht-value-bg-gradient-opacity
|
0.5 |
--ht-value-bg-gradient-start-position
|
0% |
--ht-value-bg-gradient-mid-position
|
50% |
--ht-value-bg-gradient-end-position
|
100% |
--ht-value-bg-gradient-angle
|
15deg |
--ht-value-header-height
|
3.25rem |
--ht-value-header-spacing-horizontal
|
0.625rem |
--ht-value-header-spacing-vertical
|
0.625rem |
--ht-value-header-border
|
0.0625rem |
--ht-value-header-brand-font-size
|
1.25rem |
--ht-value-content-spacing
|
1rem |
--ht-value-content-container-max-width
|
1080px |
--ht-value-content-heading-1
|
1.8125em |
--ht-value-content-heading-2
|
1.625em |
--ht-value-content-heading-3
|
1.375em |
--ht-value-content-heading-4
|
1.25em |
--ht-value-content-heading-margin-bottom
|
0.25em |
--ht-value-button-padding-horizontal
|
0.375rem |
--ht-value-button-padding-vertical
|
0.25rem |
--ht-value-button-border-width
|
0.0625rem |
--ht-value-button-shadow-size
|
0.125rem |
--ht-value-button-border-radius
|
0.25rem |
--ht-value-button-font-size
|
0.875rem |
--ht-value-button-content-gap
|
0.25rem |
--ht-value-button-group-gap
|
0.375rem |
--ht-value-grid-column-gap
|
0 |
--ht-value-popup-max-width
|
400px |
--ht-value-popup-wide-max-width
|
40em |
--ht-value-card-padding
|
1rem |
--ht-value-card-border-radius
|
0.25rem |
--ht-value-card-spacing
|
0.5rem |
--ht-value-alert-spacing
|
1rem |
--ht-value-alert-border-radius
|
0.5rem |
--ht-value-popup-border
|
0.125rem |
--ht-value-popup-box-shadow
|
1rem |
--ht-value-input-field-padding
|
0.375rem |
--ht-value-input-field-border
|
0.0625rem |
--ht-value-input-field-color-width
|
4rem |
--ht-value-input-field-color-height
|
2.5rem |
--ht-value-input-field-border-radius
|
0.25rem |
--ht-value-input-field-box-shadow-inset-y
|
0.0625rem |
--ht-value-input-field-box-shadow
|
0.125rem |
--ht-value-form-control-spacing
|
0.5rem |
--ht-value-focus-outline
|
0.1875em |
--ht-value-collapsible-padding
|
0.375em |
--ht-value-collapsible-border-radius
|
0.5em |
--ht-value-form-checkbox-width
|
1em |
--ht-value-form-checkbox-height
|
1em |
--ht-value-form-checkbox-border
|
0.0625em |
--ht-value-form-checkbox-border-radius
|
0.25em |
--ht-value-form-radio-select-icon
|
65% |
--ht-value-form-select-icon-size
|
1em |
--ht-value-form-select-icon-padding
|
0.25em |
--ht-value-table-cell-spacing
|
0.5em |
--ht-value-table-border-size
|
0.0625em |
--ht-value-code-border
|
0.0625em |
--ht-value-code-padding-vertical
|
0.125em |
--ht-value-code-padding-horizontal
|
0.5em |
--ht-value-code-border-radius
|
0.25em |
--ht-value-code-line-height
|
1.5em |
--ht-value-code-small-font-size
|
0.75em |
--ht-value-progress-bar-height
|
0.75em |
--ht-value-loading-indicator-full-revolution-time
|
5s |
--ht-value-badge-border
|
0.125rem |
--ht-value-badge-border-radius
|
0.5rem |
--ht-value-badge-padding-horozontal
|
0.25rem |
--ht-value-badge-spacing
|
0.25rem |
--ht-value-badge-grooup-spacing
|
0.25rem |
--ht-value-badge-font-size
|
0.875rem |
--ht-value-nav-spacing
|
0.125rem |
--ht-value-nav-link-border-radius
|
0.25rem |
--ht-value-nav-link-padding-horizontal
|
0.375rem |
--ht-value-nav-link-padding-vertical
|
0.25rem |
--ht-value-faq-body-padding
|
0.75rem |
--ht-value-faq-body-line-height
|
1.3 |
--ht-value-spacing-0
|
0 |
--ht-value-spacing-1
|
0.25em |
--ht-value-spacing-2
|
0.5em |
--ht-value-spacing-3
|
1em |
--ht-value-spacing-4
|
1.75em |
--ht-value-size-10
|
1em |
--ht-value-size-15
|
1.5em |
--ht-value-size-20
|
2em |
--ht-value-size-100
|
10em |
| Property | Default |
|---|---|
--ht-color-layout-bg-light
|
#bbb |
--ht-color-layout-bg-dark
|
#000 |
--ht-color-layout-bg
|
var(--ht-color-layout-bg-light) |
--ht-color-layout-color-light
|
#313131 |
--ht-color-layout-color-dark
|
#C1C2C5 |
--ht-color-layout-color
|
var(--ht-color-layout-color-light) |
--ht-color-bg-gradient-start-light
|
hsl(from var(--ht-brand) calc(h + 2) clamp(0, s + 0, 100) clamp(0, l + 0, 100)) |
--ht-color-bg-gradient-start-dark
|
hsl(from var(--ht-brand) calc(h + 2) clamp(0, s + 0, 100) clamp(0, l + 0, 100)) |
--ht-color-bg-gradient-start
|
var(--ht-color-bg-gradient-start-light) |
--ht-color-bg-gradient-mid-light
|
var(--ht-brand) |
--ht-color-bg-gradient-mid-dark
|
var(--ht-brand) |
--ht-color-bg-gradient-mid
|
var(--ht-color-bg-gradient-mid-light) |
--ht-color-bg-gradient-end-light
|
hsl(from var(--ht-brand) calc(h + 65) clamp(0, s + -59, 100) clamp(0, l + -13, 100)) |
--ht-color-bg-gradient-end-dark
|
hsl(from var(--ht-brand) calc(h + 65) clamp(0, s + -59, 100) clamp(0, l + -13, 100)) |
--ht-color-bg-gradient-end
|
var(--ht-color-bg-gradient-end-light) |
--ht-color-header-bg-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 27, 100)) |
--ht-color-header-bg-dark
|
#1A1B1E |
--ht-color-header-bg
|
var(--ht-color-header-bg-light) |
--ht-color-header-border-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 20, 100)) |
--ht-color-header-border-dark
|
#2C2E33 |
--ht-color-header-border
|
var(--ht-color-header-border-light) |
--ht-color-header-brand-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -15, 100) clamp(0, l + -5, 100)) |
--ht-color-header-brand-dark
|
#909296 |
--ht-color-header-brand
|
var(--ht-color-header-brand-light) |
--ht-color-card-bg-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 30, 100)) |
--ht-color-card-bg-dark
|
#1A1B1E |
--ht-color-card-bg
|
var(--ht-color-card-bg-light) |
--ht-color-card-color-light
|
#313131 |
--ht-color-card-color-dark
|
#C1C2C5 |
--ht-color-card-color
|
var(--ht-color-card-color-light) |
--ht-color-alert-bg-light
|
rgba(255, 255, 255, 0.2) |
--ht-color-alert-bg-dark
|
rgba(20, 21, 23, 0.2) |
--ht-color-alert-bg
|
var(--ht-color-alert-bg-light) |
--ht-color-alert-color-light
|
rgb(62, 61, 58) |
--ht-color-alert-color-dark
|
rgb(193, 194, 197) |
--ht-color-alert-color
|
var(--ht-color-alert-color-light) |
--ht-color-alert-warning-bg-light
|
rgba(246, 178, 143, 0.2) |
--ht-color-alert-warning-bg-dark
|
rgba(232, 89, 12, 0.2) |
--ht-color-alert-warning-bg
|
var(--ht-color-alert-warning-bg-light) |
--ht-color-alert-warning-color-light
|
#000 |
--ht-color-alert-warning-color-dark
|
rgb(255, 255, 255) |
--ht-color-alert-warning-color
|
var(--ht-color-alert-warning-color-light) |
--ht-color-alert-warning-hl-color-light
|
rgb(126, 58, 4) |
--ht-color-alert-warning-hl-color-dark
|
#ffd8a8 |
--ht-color-alert-warning-hl-color
|
var(--ht-color-alert-warning-hl-color-light) |
--ht-color-button-gradient-shade-light
|
rgba(0, 0, 0, 0.05) |
--ht-color-button-gradient-shade-dark
|
rgba(0, 0, 0, 0.05) |
--ht-color-button-gradient-shade
|
var(--ht-color-button-gradient-shade-light) |
--ht-color-button-border-color-light
|
rgba(0, 0, 0, 0.2) |
--ht-color-button-border-color-dark
|
rgba(255, 255, 255, 0.2) |
--ht-color-button-border-color
|
var(--ht-color-button-border-color-light) |
--ht-color-button-default-color-light
|
#000 |
--ht-color-button-default-color-dark
|
#fff |
--ht-color-button-default-color
|
var(--ht-color-button-default-color-light) |
--ht-color-button-default-bg-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -100, 100) clamp(0, l + 20, 100)) |
--ht-color-button-default-bg-dark
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -100, 100) clamp(0, l + -25, 100)) |
--ht-color-button-default-bg
|
var(--ht-color-button-default-bg-light) |
--ht-color-button-default-border-color-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -100, 100) clamp(0, l + 10, 100)) |
--ht-color-button-default-border-color-dark
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -100, 100) clamp(0, l + -30, 100)) |
--ht-color-button-default-border-color
|
var(--ht-color-button-default-border-color-light) |
--ht-color-button-primary-color-light
|
#000 |
--ht-color-button-primary-color-dark
|
#fff |
--ht-color-button-primary-color
|
var(--ht-color-button-primary-color-light) |
--ht-color-button-primary-bg-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + 0, 100) clamp(0, l + 22, 100)) |
--ht-color-button-primary-bg-dark
|
var(--ht-brand) |
--ht-color-button-primary-bg
|
var(--ht-color-button-primary-bg-light) |
--ht-color-button-primary-border-color-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 12, 100)) |
--ht-color-button-primary-border-color-dark
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + -10, 100)) |
--ht-color-button-primary-border-color
|
var(--ht-color-button-primary-border-color-light) |
--ht-color-button-success-color-light
|
#000 |
--ht-color-button-success-color-dark
|
#fff |
--ht-color-button-success-color
|
var(--ht-color-button-success-color-light) |
--ht-color-button-success-bg-light
|
rgb(55.6666666667%, 81%, 43%) |
--ht-color-button-success-bg-dark
|
#559933 |
--ht-color-button-success-bg
|
var(--ht-color-button-success-bg-light) |
--ht-color-button-success-border-color-light
|
rgb(45.6%, 71.2%, 32.8%) |
--ht-color-button-success-border-color-dark
|
rgb(26%, 42%, 18%) |
--ht-color-button-success-border-color
|
var(--ht-color-button-success-border-color-light) |
--ht-color-button-danger-color-light
|
#000 |
--ht-color-button-danger-color-dark
|
#fff |
--ht-color-button-danger-color
|
var(--ht-color-button-danger-color-light) |
--ht-color-button-danger-bg-light
|
rgb(85%, 55%, 55%) |
--ht-color-button-danger-bg-dark
|
#993333 |
--ht-color-button-danger-bg
|
var(--ht-color-button-danger-bg-light) |
--ht-color-button-danger-border-color-light
|
rgb(76%, 44%, 44%) |
--ht-color-button-danger-border-color-dark
|
rgb(42%, 18%, 18%) |
--ht-color-button-danger-border-color
|
var(--ht-color-button-danger-border-color-light) |
--ht-color-button-warning-color-light
|
#000 |
--ht-color-button-warning-color-dark
|
#fff |
--ht-color-button-warning-color
|
var(--ht-color-button-warning-color-light) |
--ht-color-button-warning-bg-light
|
rgb(85%, 75%, 55%) |
--ht-color-button-warning-bg-dark
|
#997733 |
--ht-color-button-warning-bg
|
var(--ht-color-button-warning-bg-light) |
--ht-color-button-warning-border-color-light
|
rgb(76%, 65.3333333333%, 44%) |
--ht-color-button-warning-border-color-dark
|
rgb(42%, 34%, 18%) |
--ht-color-button-warning-border-color
|
var(--ht-color-button-warning-border-color-light) |
--ht-color-button-light-color-light
|
#222 |
--ht-color-button-light-color-dark
|
#222 |
--ht-color-button-light-color
|
var(--ht-color-button-light-color-light) |
--ht-color-button-light-bg-light
|
#eee |
--ht-color-button-light-bg-dark
|
#eee |
--ht-color-button-light-bg
|
var(--ht-color-button-light-bg-light) |
--ht-color-button-light-border-color-light
|
#aaa |
--ht-color-button-light-border-color-dark
|
#aaa |
--ht-color-button-light-border-color
|
var(--ht-color-button-light-border-color-light) |
--ht-color-button-dark-color-light
|
#eee |
--ht-color-button-dark-color-dark
|
#eee |
--ht-color-button-dark-color
|
var(--ht-color-button-dark-color-light) |
--ht-color-button-dark-bg-light
|
#222 |
--ht-color-button-dark-bg-dark
|
#222 |
--ht-color-button-dark-bg
|
var(--ht-color-button-dark-bg-light) |
--ht-color-button-dark-border-color-light
|
#000 |
--ht-color-button-dark-border-color-dark
|
#000 |
--ht-color-button-dark-border-color
|
var(--ht-color-button-dark-border-color-light) |
--ht-color-popup-border-color-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 20, 100)) |
--ht-color-popup-border-color-dark
|
#2c2e33 |
--ht-color-popup-border-color
|
var(--ht-color-popup-border-color-light) |
--ht-color-input-field-color-light
|
#212121 |
--ht-color-input-field-color-dark
|
#c1c2c5 |
--ht-color-input-field-color
|
var(--ht-color-input-field-color-light) |
--ht-color-input-field-placeholder-color-light
|
rgba(33, 33, 33, 0.5) |
--ht-color-input-field-placeholder-color-dark
|
rgba(193, 194, 197, 0.5) |
--ht-color-input-field-placeholder-color
|
var(--ht-color-input-field-placeholder-color-light) |
--ht-color-input-field-bg-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 25, 100)) |
--ht-color-input-field-bg-dark
|
#25262b |
--ht-color-input-field-bg
|
var(--ht-color-input-field-bg-light) |
--ht-color-input-field-invalid-color-light
|
#763211 |
--ht-color-input-field-invalid-color-dark
|
#eeaa80 |
--ht-color-input-field-invalid-color
|
var(--ht-color-input-field-invalid-color-light) |
--ht-color-input-field-invalid-bg-light
|
#fff0ee |
--ht-color-input-field-invalid-bg-dark
|
#44332b |
--ht-color-input-field-invalid-bg
|
var(--ht-color-input-field-invalid-bg-light) |
--ht-color-input-field-border-color-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -10, 100) clamp(0, l + 20, 100)) |
--ht-color-input-field-border-color-dark
|
#373a40 |
--ht-color-input-field-border-color
|
var(--ht-color-input-field-border-color-light) |
--ht-color-input-field-focus-border-color-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + 0, 100) clamp(0, l + 20, 100)) |
--ht-color-input-field-focus-border-color-dark
|
var(--ht-brand) |
--ht-color-input-field-focus-border-color
|
var(--ht-color-input-field-focus-border-color-light) |
--ht-color-input-field-invalid-focus-border-color-light
|
#763211 |
--ht-color-input-field-invalid-focus-border-color-dark
|
#eeaa80 |
--ht-color-input-field-invalid-focus-border-color
|
var(--ht-color-input-field-invalid-focus-border-color-light) |
--ht-color-input-field-box-shadow-light
|
rgba(0, 0, 0, 0.25) |
--ht-color-input-field-box-shadow-dark
|
rgba(0, 0, 0, 0.5) |
--ht-color-input-field-box-shadow
|
var(--ht-color-input-field-box-shadow-light) |
--ht-color-collapsible-bg-light
|
rgba(255, 255, 255, 0.5) |
--ht-color-collapsible-bg-dark
|
rgba(0, 0, 0, 0.5) |
--ht-color-collapsible-bg
|
var(--ht-color-collapsible-bg-light) |
--ht-color-table-border-light
|
#6d6e70 |
--ht-color-table-border-dark
|
#373a40 |
--ht-color-table-border
|
var(--ht-color-table-border-light) |
--ht-color-code-color-light
|
#323339 |
--ht-color-code-color-dark
|
#EFEFF0 |
--ht-color-code-color
|
var(--ht-color-code-color-light) |
--ht-color-code-bg-light
|
#F5F5FA |
--ht-color-code-bg-dark
|
#1F202F |
--ht-color-code-bg
|
var(--ht-color-code-bg-light) |
--ht-color-code-border-light
|
#D4D3D9 |
--ht-color-code-border-dark
|
#373846 |
--ht-color-code-border
|
var(--ht-color-code-border-light) |
--ht-color-code-syntax-command-light
|
#7A3E9D |
--ht-color-code-syntax-command-dark
|
#C792EA |
--ht-color-code-syntax-command
|
var(--ht-color-code-syntax-command-light) |
--ht-color-code-syntax-flag-light
|
#1B6B93 |
--ht-color-code-syntax-flag-dark
|
#82AAFF |
--ht-color-code-syntax-flag
|
var(--ht-color-code-syntax-flag-light) |
--ht-color-code-syntax-string-light
|
#2E7D32 |
--ht-color-code-syntax-string-dark
|
#C3E88D |
--ht-color-code-syntax-string
|
var(--ht-color-code-syntax-string-light) |
--ht-color-code-syntax-number-light
|
#B25000 |
--ht-color-code-syntax-number-dark
|
#F78C6C |
--ht-color-code-syntax-number
|
var(--ht-color-code-syntax-number-light) |
--ht-color-code-syntax-key-light
|
#1B6B93 |
--ht-color-code-syntax-key-dark
|
#89DDFF |
--ht-color-code-syntax-key
|
var(--ht-color-code-syntax-key-light) |
--ht-color-code-syntax-punctuation-light
|
#6B6D78 |
--ht-color-code-syntax-punctuation-dark
|
#8A8CA0 |
--ht-color-code-syntax-punctuation
|
var(--ht-color-code-syntax-punctuation-light) |
--ht-color-content-link-light
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + 0, 100) clamp(0, l + -10, 100)) |
--ht-color-content-link-dark
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + 0, 100) clamp(0, l + 10, 100)) |
--ht-color-content-link
|
var(--ht-color-content-link-light) |
--ht-color-combobox-highlighted-item-bg-light
|
hsl(from hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + 0, 100) clamp(0, l + 22, 100)) calc(h + 0) clamp(0, s + -15, 100) clamp(0, l + 0, 100)) |
--ht-color-combobox-highlighted-item-bg-dark
|
hsl(from var(--ht-brand) calc(h + 0) clamp(0, s + -15, 100) clamp(0, l + 0, 100)) |
--ht-color-combobox-highlighted-item-bg
|
var(--ht-color-combobox-highlighted-item-bg-light) |
--ht-color-badge-default-color-light
|
hsl(219, 0%, 25%) |
--ht-color-badge-default-color-dark
|
hsl(219, 0%, 80%) |
--ht-color-badge-default-color
|
var(--ht-color-badge-default-color-light) |
--ht-color-badge-default-bg-light
|
hsl(219, 0%, 80%) |
--ht-color-badge-default-bg-dark
|
hsl(219, 0%, 25%) |
--ht-color-badge-default-bg
|
var(--ht-color-badge-default-bg-light) |
--ht-color-badge-secondary-bg-light
|
rgba(255, 255, 255, 0.2) |
--ht-color-badge-secondary-bg-dark
|
rgba(0, 0, 0, 0.2) |
--ht-color-badge-secondary-bg
|
var(--ht-color-badge-secondary-bg-light) |
--ht-color-badge-muted-color-light
|
hsl(219, 0%, 40%) |
--ht-color-badge-muted-color-dark
|
hsl(219, 0%, 95%) |
--ht-color-badge-muted-color
|
var(--ht-color-badge-muted-color-light) |
--ht-color-badge-muted-bg-light
|
hsl(219, 0%, 95%) |
--ht-color-badge-muted-bg-dark
|
hsl(219, 0%, 40%) |
--ht-color-badge-muted-bg
|
var(--ht-color-badge-muted-bg-light) |
--ht-color-badge-green-color-light
|
hsl(159, 50%, 25%) |
--ht-color-badge-green-color-dark
|
hsl(159, 50%, 80%) |
--ht-color-badge-green-color
|
var(--ht-color-badge-green-color-light) |
--ht-color-badge-green-bg-light
|
hsl(159, 50%, 80%) |
--ht-color-badge-green-bg-dark
|
hsl(159, 50%, 25%) |
--ht-color-badge-green-bg
|
var(--ht-color-badge-green-bg-light) |
--ht-color-badge-blue-color-light
|
hsl(219, 50%, 25%) |
--ht-color-badge-blue-color-dark
|
hsl(219, 50%, 80%) |
--ht-color-badge-blue-color
|
var(--ht-color-badge-blue-color-light) |
--ht-color-badge-blue-bg-light
|
hsl(219, 50%, 80%) |
--ht-color-badge-blue-bg-dark
|
hsl(219, 50%, 25%) |
--ht-color-badge-blue-bg
|
var(--ht-color-badge-blue-bg-light) |
--ht-color-badge-cyan-color-light
|
hsl(194, 50%, 25%) |
--ht-color-badge-cyan-color-dark
|
hsl(194, 50%, 80%) |
--ht-color-badge-cyan-color
|
var(--ht-color-badge-cyan-color-light) |
--ht-color-badge-cyan-bg-light
|
hsl(194, 50%, 80%) |
--ht-color-badge-cyan-bg-dark
|
hsl(194, 50%, 25%) |
--ht-color-badge-cyan-bg
|
var(--ht-color-badge-cyan-bg-light) |
--ht-color-badge-purple-color-light
|
hsl(269, 50%, 25%) |
--ht-color-badge-purple-color-dark
|
hsl(269, 50%, 80%) |
--ht-color-badge-purple-color
|
var(--ht-color-badge-purple-color-light) |
--ht-color-badge-purple-bg-light
|
hsl(269, 50%, 80%) |
--ht-color-badge-purple-bg-dark
|
hsl(269, 50%, 25%) |
--ht-color-badge-purple-bg
|
var(--ht-color-badge-purple-bg-light) |
--ht-color-badge-red-color-light
|
hsl(339, 50%, 25%) |
--ht-color-badge-red-color-dark
|
hsl(339, 50%, 80%) |
--ht-color-badge-red-color
|
var(--ht-color-badge-red-color-light) |
--ht-color-badge-red-bg-light
|
hsl(339, 50%, 80%) |
--ht-color-badge-red-bg-dark
|
hsl(339, 50%, 25%) |
--ht-color-badge-red-bg
|
var(--ht-color-badge-red-bg-light) |
--ht-color-badge-yellow-color-light
|
hsl(49, 50%, 25%) |
--ht-color-badge-yellow-color-dark
|
hsl(49, 50%, 80%) |
--ht-color-badge-yellow-color
|
var(--ht-color-badge-yellow-color-light) |
--ht-color-badge-yellow-bg-light
|
hsl(49, 50%, 80%) |
--ht-color-badge-yellow-bg-dark
|
hsl(49, 50%, 25%) |
--ht-color-badge-yellow-bg
|
var(--ht-color-badge-yellow-bg-light) |
--ht-color-drop-shadow-light
|
rgba(255, 255, 255, 0.5) |
--ht-color-drop-shadow-dark
|
rgba(0, 0, 0, 0.5) |
--ht-color-drop-shadow
|
var(--ht-color-drop-shadow-light) |
--ht-color-form-message-error-light
|
#800 |
--ht-color-form-message-error-dark
|
#faa |
--ht-color-form-message-error
|
var(--ht-color-form-message-error-light) |
--ht-color-form-message-success-light
|
#282 |
--ht-color-form-message-success-dark
|
#afa |
--ht-color-form-message-success
|
var(--ht-color-form-message-success-light) |
--ht-color-muted-text-light
|
#555 |
--ht-color-muted-text-dark
|
#999 |
--ht-color-muted-text
|
var(--ht-color-muted-text-light) |
| Property | Default |
|---|---|
--ht-z-index-background
|
1 |
--ht-z-index-default
|
2 |
--ht-z-index-focus
|
3 |
--ht-z-index-form-input-group-symbol
|
4 |
--ht-z-index-header
|
5 |
--ht-z-index-sidebar-close-overlay
|
6 |
--ht-z-index-sidebar
|
7 |
--ht-z-index-combobox
|
8 |
--ht-z-index-combobox-suggestions
|
9 |
--ht-z-index-combobox-suggestions-header
|
10 |