Expander

Reveal hidden content by transitioning from a set number of lines to height: auto. Set the number of lines shown when closed via --lines.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/expander.css" />

Default

@erikt/ui is a minimal CSS design system that styles native HTML elements directly. No utility classes, no component wrappers, no build step. It ships as a single stylesheet and works with any framework or none at all. Colors, spacing, and easing are all driven by CSS custom properties, so theming is a matter of overriding a handful of variables. Dark mode is handled automatically via color-scheme. Every component is built from semantic HTML and progressively enhanced with modern CSS features like :has(), @starting-style, the Popover API, and anchor positioning.

<div class="expander">
  <p>Long content...</p>
  <label>
    <input type="checkbox" />
    Show more
  </label>
</div>

Lines

Control how many lines are shown when collapsed via --lines. Defaults to 3.

@erikt/ui is a minimal CSS design system that styles native HTML elements directly. No utility classes, no component wrappers, no build step. It ships as a single stylesheet and works with any framework or none at all. Colors, spacing, and easing are all driven by CSS custom properties, so theming is a matter of overriding a handful of variables. Dark mode is handled automatically via color-scheme. Every component is built from semantic HTML and progressively enhanced with modern CSS features like :has(), @starting-style, the Popover API, and anchor positioning.

<div class="expander" style="--lines: 6">
  <p>Long content...</p>
  <label>
    <input type="checkbox" />
    Show more
  </label>
</div>

API reference

Type Classes / attributes What it does
Lines --lines: 3 Number of lines shown while collapsed

Search 5021 icons

Type a name to find icons from the Tabler icon set.
      Move Open Esc Close