Palette

Accessible color combinations

Utility Colors

Theme Colors

Each color below maps to specific UI elements and states, and updates according to the selected theme.

This site uses Ionicons. To use an icon, select it and copy the web component code.

Example:

<ion-icon name="heart-outline"><ion-icon>

Standard Grid

Column widths can be changed at each breakpoint with size prefixes:

• .col-default-X — used to set the initial width for narrow screens
• .col-xs-X
• .col-sm-X
• .col-md-X — the default for grid builder
• .col-lg-X
• .col-xl-X
• .col-xxl-X

Gap

The horizontal gap between columns can be set with the following size classes:

None (default)

.gap-0

Extra Small

.gap-xs

Small

.gap-sm

Medium

.gap-md

Large

.gap-lg

Extra Large

.gap-xl

Vertical Alignment

Columns can be vertically aligned with the following size classes:

Top (default)

.align-top

Middle

.align-middle

Bottom

.align-bottom

Columns can be auto-sized by ommitting the size suffix from the column class. This can be set at each breakpoint with the appropriate prefix.

Block Grid

Elements can automatically be arranged into a block grid with a specified number of equal-width columns between one and six. The number of columns can be changed at each breakpoint with the prefixes:

• .block-grid-default-X — used to set the initial number of columns for narrow screens
• .block-grid-xs-X
• .block-grid-sm-X
• .block-grid-md-X
• .block-grid-lg-X
• .block-grid-xl-X
• .block-grid-xxl-X

Gap

The gap between grid items can be set for both axes or each axis individually with the following size classes:

None (default)

Both axes: .gap-0

X axis: .gap-x-0

Y axis: .gap-y-0

Extra Small

Both axes: .gap-xs

X axis: .gap-x-xs

Y axis: .gap-y-xs

Small

Both axes: .gap-sm

X axis: .gap-x-sm

Y axis: .gap-y-sm

Medium

Both axes: .gap-md

X axis: .gap-x-md

Y axis: .gap-y-md

Large

Both axes: .gap-lg

X axis: .gap-x-lg

Y axis: .gap-y-lg

Extra Large

Both axes: .gap-xl

X axis: .gap-x-xl

Y axis: .gap-y-xl

Additional Spacing

Standard spacing can be set with the following margin and padding classes and is not limited to grids:

Margin

None

All Sides: .m-0

Top: .m-t-0

Right: .m-r-0

Left: .m-l-0

Bottom: .m-b-0

Extra Small

All Sides: .m-xs

Top: .m-t-xs

Right: .m-r-xs

Left: .m-l-xs

Bottom: .m-b-xs

Small

All Sides: .m-sm

Top: .m-t-sm

Right: .m-r-sm

Left: .m-l-sm

Bottom: .m-b-sm

Medium

All Sides: .m-md

Top: .m-t-md

Right: .m-r-md

Left: .m-l-md

Bottom: .m-b-md

Large

All Sides: .m-lg

Top: .m-t-lg

Right: .m-r-lg

Left: .m-l-lg

Bottom: .m-b-lg

Extra Large

All Sides: .m-xl

Top: .m-t-xl

Right: .m-r-xl

Left: .m-l-xl

Bottom: .m-b-xl

Padding

None

All Sides: .p-0

Top: .p-t-0

Right: .p-r-0

Left: .p-l-0

Bottom: .p-b-0

Extra Small

All Sides: .p-xs

Top: .p-t-xs

Right: .p-r-xs

Left: .p-l-xs

Bottom: .p-b-xs

Small

All Sides: .p-sm

Top: .p-t-sm

Right: .p-r-sm

Left: .p-l-sm

Bottom: .p-b-sm

Medium

All Sides: .p-md

Top: .p-t-md

Right: .p-r-md

Left: .p-l-md

Bottom: .p-b-md

Large

All Sides: .p-lg

Top: .p-t-lg

Right: .p-r-lg

Left: .p-l-lg

Bottom: .p-b-lg

Extra Large

All Sides: .p-xl

Top: .p-t-xl

Right: .p-r-xl

Left: .p-l-xl

Bottom: .p-b-xl

Font sizes scale within defined ranges between the extra small (xs) and extra large (xl) breakpoints.

Standard Styles

Additional Styles

Unordered Lists

An unordered list is a list in which the sequence of items is not important.

Ordered Lists

An ordered list is a list in which the sequence of items is important.

Ruled List

A list with horizonal rules between items can be created with the class .ruled-list.

Striped List

A list with alternating background colors can be created with the class .striped-list.

List Item Spacing

The space inside ruled and striped list items can be set for both axes or each axis individually with the following size classes:

Extra Small (Default)

Both axes: .space-xs

X axis: .space-x-xs

Y axis: .space-y-xs

Small

Both axes: .space-sm

X axis: .space-x-sm

Y axis: .space-y-sm

Medium

Both axes: .space-md

X axis: .space-x-md

Y axis: .space-y-md

Large

Both axes: .space-lg

X axis: .space-x-lg

Y axis: .space-y-lg

Extra Large

Both axes: .space-xl

X axis: .space-x-xl

Y axis: .space-y-xl

Primary Button

Used for primary actions on a page. An optional arrow icon can be appended with the .has-arrow class.

Secondary Button

Used for secondary actions. An optional arrow icon can be appended with the .has-arrow class.

Simple Button

Used for tertiary actions and emphasized links.

Scrolling Table (Default)

This table scrolls horizontally when the content is wider than the available space.

Stacking Table

This table stacks content in a list format until the medium (md) breakpoint using the .list-table class.

Additional Options

• .full-width — the table will fill the available horizontal space. Auto-sizing based on table content is the default.
• .valign-top — content inside of table cells will vertically align to the top. Middle alignment is the default.