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