Utilities

Display, flex, position, overflow, colour, border, shadow, and cursor helpers.

Spacing

Margin and padding utilities follow the pattern na-{property}-{size}. Sizes map to the spacing scale tokens.

Class pattern	Properties	Scale
`na-margin-{n}`	margin	0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24
`na-mt / mr / mb / ml-{n}`	margin top/right/bottom/left
`na-margin-x-{n}`	margin-inline
`na-margin-y-{n}`	margin-block
`na-margin-x-auto`	margin-inline: auto
`na-padding-{n}`	padding
`na-pt / pr / pb / pl-{n}`	padding top/right/bottom/left
`na-padding-x-{n}`	padding-inline
`na-padding-y-{n}`	padding-block

<div class="na-margin-top-8 na-margin-bottom-4 na-padding-x-6">...</div>

Display

Class	Value
`na-block`	display: block
`na-inline-block`	display: inline-block
`na-inline`	display: inline
`na-hidden`	display: none
`na-flex`	display: flex
`na-inline-flex`	display: inline-flex
`na-grid`	display: grid

Text

na-text-xs - 0.75rem

na-text-s - 0.875rem

na-text (base) - 1rem

na-text-l - 1.125rem

na-text-xl - 1.25rem

na-text-2xl - 1.5rem

na-font-weight-700

na-font-weight-600

na-font-weight-400

na-text-muted

na-text-center

na-uppercase

na-truncate - long text gets truncated with an ellipsis when it overflows

<p class="na-text-s na-text-muted">Helper text</p>
<span class="na-font-weight-600">Label</span>
<h2 class="na-text-2xl na-font-weight-700">Heading</h2>

Colour

na-text-primary na-text-success na-text-warning na-text-danger na-text-info na-text-muted

na-bg-primary na-bg-success na-bg-warning na-bg-danger na-bg-gray-100

<span class="na-text-danger">Error</span>
<div class="na-bg-primary na-text-white na-padding-4">...</div>

Flex helpers

Class	Value
`na-items-start / center / end / stretch`	align-items
`na-justify-start / center / end / between / around`	justify-content
`na-flex-wrap / na-flex-nowrap`	flex-wrap
`na-flex-column`	flex-direction: column
`na-flex-1`	flex: 1
`na-flex-auto`	flex: auto
`na-flex-none`	flex: none
`na-gap-{n}`	gap

Width & height

Class	Value
`na-width-full`	width: 100%
`na-width-auto`	width: auto
`na-height-full`	height: 100%
`na-height-screen`	height: 100vh
`na-min-width-0`	min-width: 0
`na-max-width-full`	max-width: 100%

Border & radius

Class	Value
`na-border`	1px solid border
`na-border-top / right / bottom / left`	Single-side border
`na-border-none`	border: none
`na-rounded-none / s / m / l / full`	border-radius scale (framework uses 0 as default)

Overflow & position

Class	Value
`na-overflow-hidden`	overflow: hidden
`na-overflow-auto`	overflow: auto
`na-overflow-scroll`	overflow: scroll
`na-relative`	position: relative
`na-absolute`	position: absolute
`na-sticky`	position: sticky
`na-sr-only`	Visually hidden (screen reader accessible)