Slots & layouts

Slots are dashed placeholders for composing regions in wireframes or empty shells. Slots layouts arrange them in a horizontal row (--column) or vertical stack (--row) with a 24px gap. For full page recipes (forms, tables, toolbars), start at Patterns overview. Styles live in scss/components/_slot.scss and _slots-layout.scss.

Slot

Single placeholder block before grouping into layouts.

<div class="slot">Header region</div>

Column layout

.slots-layout.slots-layout--column places slots side by side (Figma « Column », 1 to 6 slots). In production, slots keep min-width: 139px and do not shrink; wide sets may overflow their container. Demos below use a doc-only wrap so slots reflow without horizontal scrollbars.

1–2 slots (horizontal)

3–4 slots (horizontal)

5–6 slots (horizontal)

<div class="slots-layout slots-layout--column" role="group" aria-label="3 slots in a row">
  <div class="slot">Slot component</div>
  <div class="slot">Slot component</div>
  <div class="slot">Slot component</div>
</div>

Row layout

In Figma, Row means slots stacked vertically (reading order top to bottom), not a horizontal row of examples. Class .slots-layout.slots-layout--row is 139px wide with a 24px gap between slots. Add .slots-layout--fluid for full-width stacks inside cards.

1–3 slots (vertical stack)

6 slots · fluid (blank card)

<div class="slots-layout slots-layout--row slots-layout--fluid" role="group" aria-label="3 stacked slots">
  <div class="slot">Slot component</div>
  <div class="slot">Slot component</div>
  <div class="slot">Slot component</div>
</div>

In context

Blank cards use a fluid row layout inside .card__slots so teams can map header, body, and actions.

Class reference

Customize (Sass)

1. 01

   Slot spacing

   Override gap and minimum slot width before importing components.
   variables

   @use "pimentcss-design-system" with (
     $slot-gap: 1.5rem,
     $slot-min-width: 10rem
   );

2. 02

   Rebuild CSS

   Run after editing _slot.scss or _slots-layout.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps