Skip to content

Density & hit area

Utilities for consistent hit targets and control density.

Quick reference

Class	Styles
`af-hit`	`min-width/min-height: var(--af-hit-size)`
`af-hit-44`	`min-width/min-height: 44px`
`af-density-compact`	sets `--af-control-padding-*` to compact values
`af-density-comfortable`	sets `--af-control-padding-*` to comfortable values
`af-control-padding`	`padding: var(--af-control-padding-y) var(--af-control-padding-x)`

Examples

Hit target

<button class="af-btn af-hit">
  af-hit
</button>

Available classes

af-hit
af-hit-44
af-density-compact / af-density-comfortable
af-control-padding

Token: --af-hit-size defaults to 2.75rem (44px).

Responsive variants

Responsive variants are generated for af-hit and af-hit-44 only. af-density-compact, af-density-comfortable, and af-control-padding do not currently have responsive variants.

See Responsive Suffix for syntax and breakpoints.

Sizing