5 results

Preview
Cluster Pills
Pack items with even gaps
Preview
Lineup Row
Align items on one axis
Preview
Media Object
Lock a figure beside body copy
Preview
Pancake Rows
Split header, body, and footer vertically
Preview
Switcher Trio
Stack vertically when width runs out

Cluster Pills

Pack items with even gaps

Preview

PaletteDarkMonoWarm

HTML

<ul>
      <li>Layout</li>
      <li>Type</li>
      <li>Color</li>
      <li>Space</li>
    </ul>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 0;
  list-style: none;
}

li {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-accent);
}