Popover

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<div class="aparte-popover" role="dialog" aria-label="Filters">
  <label class="aparte-field-label" for="q">Search</label>
  <input class="aparte-field" id="q" />
  <button class="aparte-btn aparte-btn--primary aparte-btn--solid">Apply</button>
</div>

A floating box, and nothing else

Deliberately just a box. A popover’s content is arbitrary — a form, a colour picker, a card of details — so this supplies the surface, border and elevation that say “this is floating above the page” and leaves the layout of what is inside, and where the box itself sits, entirely to the caller.

--aparte-popover-max-width is the one cap it imposes, so arbitrary content cannot grow the box unbounded.

Classes

.aparte-popover

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.