Components

Scroll Dots

Position within a horizontally scrolling set.

Use it with a carousel or a scrolling row of cards, so people know how much is left.

Watch out. It is an indicator first. Don't rely on the dots alone as the way to move between items.

Sub-brand

Theme

Liverendered from the shipped recipe

Code

The HTML for the live example above is on the page - use your browser's inspector, or copy the CSS here and the markup from the preview. Load post-ui.css once per site and this component works anywhere.

/* ============================================================================
   POST UI System — components
   HAND-WRITTEN. Not generated: this file encodes the RULES the components follow,
   which is not the same thing as whatever the Figma canvas currently looks like.
   The contract it implements (variant axes + reasoning) is synced in components.json.

   Import order:  tokens.css  ->  type.css  ->  components.css

   NAMING. Every class is `post-` prefixed. This ships into Webflow projects where
   `.button`, `.field`, `.label` or `.text-body` are exactly the classes a site
   already has, and an unprefixed collision would silently restyle real content.
   Block `post-x` · modifier `post-x--y` · state `is-*`.

   THE FOUR RULES EVERYTHING BELOW OBEYS
   1. Tokens are named by scale, never by consumer — space/m, stroke/m, icon-size/m
      and text/md all mean "the middle step".
   2. Strokes are altitude, not component — s detail · m component · l section.
   3. Optical padding — outer padding is uniform, the LABEL carries space/xs left and
      right, and the gap is 0. Text ends up inset by outer+xs while an icon sits at
      outer, which is correct: a glyph carries internal whitespace and text does not.
      One recipe covers icon-left, icon-right, both, or neither.
   4. Control height comes from the ICON TIER, never from text. Every control label
      carries min-height = its icon-size token. Without it the icon becomes the
      tallest child and toggling an optional icon grows the control — a chip jumped
      28 -> 32px exactly this way. With it, toggling an icon changes width only.

   currentColor is load-bearing. Outline/ghost controls bind their label fill AND
   their stroke to the same `action` token, so the border is written as
   `border-color: currentColor` and one colour change moves both.
   ============================================================================ */

/* ---- scroll-dots ---- */
/* The gap is space/s — the CONTROL step. This is the token that used to be called
   "control padding" while actually being a carousel dot gap; naming by scale instead
   of by consumer is what removed that confusion. */
.post-dots { display: inline-flex; align-items: center; gap: var(--space-s); }
/* An inactive dot is OUTLINED, not greyed. Grey-and-faded read as disabled — as if
   those slides could not be reached — when the whole point of the control is that they
   can. Outline says "a slide lives here"; fill says "you are on it".
   box-sizing is declared for the same reason it is on Icon Button: there is no global
   border-box reset here, so without it the bordered dot would be 2 x stroke bigger than
   dot-size and the outlined and filled dots would not match. */
.post-dots__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  box-sizing: border-box;
  border-radius: 50%;
  background: none;
  border: var(--stroke-m) solid var(--action);
  padding: 0;
  cursor: pointer;
}
.post-dots__dot.is-active { background: var(--action); border-color: var(--action); }