Utilities

Global utility attributes that work across plain HTML and bf-* components.

Back to Examples

Row + Col

Alignment utilities: row="left|center|right" and col="top|center|bottom".

Left 1Left 2
Center 1Center 2
Right 1Right 2
TopAction
CenterAction
BottomAction

Grid spans still use numeric values: col="3" .. col="12".

3
6
3

Stack

Spacing utility on any element: stack="xs|sm|md|lg|xl".

xsgapstack
mdgapstack
xlgapstack

Typography

Display Utility

Heading 1 Utility

Heading 2 Utility

Body utility text for standard copy.

Caption utility text. Label utility text. const mode = 'utility'

Table Utilities

Use table, thead, tbody, tr, th, and td directly on plain elements.

Key
Value
Note
layout
row / col / stack
Global utility attrs
typography
display, h1..code
No class names required
skeleton
skeleton="1200"
Auto-reveal supported

Skeleton Utility

Attach loading state directly to target elements: skeleton or skeleton="1200".

Utility Loading Card

This content appears after the skeleton delay.

View
Plain Div Skeleton

Works on regular HTML too.

Replay Skeleton Utility