Browse CSS

Alignment and text

Align content and apply readable emphasis with theme-aware utilities.

Align items

Class	Behavior
`items-start`	Align children at the cross-axis start.
`items-center`	Center children on the cross axis.
`items-end`	Align children at the cross-axis end.
`items-stretch`	Stretch children across the cross axis.
`items-baseline`	Align text baselines.
`self-start`	Align one child at the cross-axis start.
`self-center`	Center one child on the cross axis.
`self-end`	Align one child at the cross-axis end.
`self-stretch`	Stretch one child across the cross axis.

Use these with flex or grid containers. A stack’s cross axis is horizontal; a horizontal cluster’s cross axis is vertical.

Distribute content

Class	Behavior
`justify-start`	Group content at the main-axis start.
`justify-center`	Center content along the main axis.
`justify-end`	Group content at the main-axis end.
`justify-between`	Put available space between children.
`justify-around`	Space around children; half as much at the outer edges.
`justify-evenly`	Equal space between children and outer edges.

Text and tables

Class	Behavior
`text-start`	Align text at the start of its reading direction.
`text-end`	Align text at the end of its reading direction.
`text-center`	Center text.
`align-middle`	Vertically center inline or table-cell content.
`font-semibold`	Font weight 600.
`muted`	The theme’s secondary text color.

Responsive actions

Project overview

Wrapping actions stay aligned on narrow screens.

Explore Buttons

<div class="cluster justify-between items-center gap-md">
  <p class="m-0">Project overview</p>
  <a class="btn secondary" href="/components/button">Explore Buttons</a>
</div>

Right-to-left layouts

Start and end follow dir. Prefer these utilities over left/right CSS when an interface supports multiple languages.

סקירת הפרויקטמוכן

<div class="panel cluster justify-between items-center gap-md" dir="rtl" lang="he">
  <strong>סקירת הפרויקט</strong>
  <span class="badge">מוכן</span>
</div>