Box

Default

Content

With Custom Padding

For demo purposes, the boxes are bordered.

With custom padding
With custom vertical and horizontal padding
With custom padding for each direction
With responsive padding

With Border

For demo purposes, the boxes have custom padding.

Border colors

With solid border style
With dotted border style
With dashed border style
With thicker border

Accent colors

With accent-01-basic border color
With accent-01-subtle border color
With accent-02-basic border color
With accent-02-subtle border color

Emotion colors

With emotion-danger-basic border color
With emotion-danger-subtle border color
With emotion-informative-basic border color
With emotion-informative-subtle border color
With emotion-success-basic border color
With emotion-success-subtle border color
With emotion-warning-basic border color
With emotion-warning-subtle border color

With Background Color

For demo purposes, the boxes have custom padding.

Background colors

With primary background
With secondary background
With tertiary background

Accent colors

With accent-01-basic background
With accent-01-subtle background
With accent-02-basic background
With accent-02-subtle background

Emotion colors

With emotion-danger-basic background
With emotion-danger-subtle background
With emotion-informative-basic background
With emotion-informative-subtle background
With emotion-success-basic background
With emotion-success-subtle background
With emotion-warning-basic background
With emotion-warning-subtle background

With Background Gradient

For demo purposes, the boxes have custom padding.

Primary background gradient
Secondary background gradient
Responsive background gradient

With Radius

For demo purposes, the boxes have custom padding.

Without radius
With custom radius
With full radius
With responsive radius

With Text Color

For demo purposes, the boxes have custom padding.

Text colors

With primary text
With secondary text
With tertiary text

Accent text colors

With accent-01-basic text
With accent-01-subtle text
With accent-02-basic text
With accent-02-subtle text

Emotion text colors

With emotion-danger-basic text
With emotion-danger-subtle text
With emotion-informative-basic text
With emotion-informative-subtle text
With emotion-success-basic text
With emotion-success-subtle text
With emotion-warning-basic text
With emotion-warning-subtle text

With All

For demo purposes, the boxes have custom padding.

With primary background, solid border and no radius
With secondary background, custom radius, dashed thicker border
With tertiary background, tertiary text color, full radius, dotted thicker border