Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Alerts & badges
Data & feedback

Alerts & badges

Context and status that remain understandable without color alone.

CSS only4 examplesKeyboard friendly HTML

Messages with meaning

Live preview
Good to know. Optional modules can be loaded independently after the core.
Example error. A project name is required before you can continue.
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-stack">
  <div class="sl-alert">
    <strong>Good to know.</strong> Optional modules can be loaded independently after
    the core.
  </div>
  <div class="sl-alert sl-alert--danger">
    <strong>Example error.</strong> A project name is required before you can continue.
  </div>
</div>
HTML source · enable JavaScript for the playground9 lines · UTF-8

A useful little label

Live preview
NewIn progressCSS onlyOptional module
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <span class="sl-badge">New</span><span class="sl-badge">In progress</span
  ><span class="sl-badge">CSS only</span><span class="sl-badge">Optional module</span>
</div>
HTML source · enable JavaScript for the playground4 lines · UTF-8

Success with visible text

Live preview
Example complete.

Your layout is ready to customize. This is a static message, not a live announcement.

Choose the next step →
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-alert sl-stack">
  <strong class="sl-text-success">Example complete.</strong>
  <p>
    Your layout is ready to customize. This is a static message, not a live
    announcement.
  </p>
  <a class="sl-link sl-link--underline" href="/getting-started/"
    >Choose the next step →</a
  >
</div>
HTML source · enable JavaScript for the playground10 lines · UTF-8

Status and metadata

Live preview

Example project

In review

Status text remains understandable without relying on color.

CSS onlyOptional module
View HTML / PlaygroundHTML source
example.htmlHTML
<article class="sl-card sl-stack">
  <div class="sl-cluster sl-justify-between">
    <h3 class="sl-text-lg">Example project</h3>
    <span class="sl-badge">In review</span>
  </div>
  <p class="sl-text-muted">
    Status text remains understandable without relying on color.
  </p>
  <div class="sl-cluster">
    <span class="sl-badge">CSS only</span><span class="sl-badge">Optional module</span>
  </div>
</article>
HTML source · enable JavaScript for the playground12 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.