Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Chips & tag groups
Collections

Chips & tag groups

Chips & tag groups patterns built with StyloftCSS and native HTML.

CSS only2 examplesKeyboard friendly HTML

Chip

Small static labels for categories and metadata.

Live preview
DesignCSS onlyNew
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <span class="sl-chip">Design</span><span class="sl-chip">CSS only</span
  ><span class="sl-chip">New</span>
</div>
HTML source · enable JavaScript for the playground4 lines · UTF-8

TagGroup

Selectable tags use native checkboxes. Dynamic tag creation or removal belongs to your application.

Live preview
Select topics
View HTML / PlaygroundHTML source
example.htmlHTML
<fieldset class="sl-stack">
  <legend>Select topics</legend>
  <div class="sl-cluster sl-gap-4">
    <label class="sl-toggle"
      ><input type="checkbox" name="ref-topic" value="Design" checked /><span
        >Design</span
      ></label
    ><label class="sl-toggle"
      ><input type="checkbox" name="ref-topic" value="Code" /><span>Code</span></label
    ><label class="sl-toggle"
      ><input type="checkbox" name="ref-topic" value="Writing" /><span
        >Writing</span
      ></label
    >
  </div>
</fieldset>
HTML source · enable JavaScript for the playground16 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.