This text uses a serif font family.
This text uses a monospace font family (for code).
No margin
Margin 0.25rem (4px)
Margin 0.5rem (8px)
Margin 0.75rem (12px)
Margin 1rem (16px)
Margin 1.25rem (20px)
Margin 1.5rem (24px)
Margin 2rem (32px)
Margin 2.5rem (40px)
Margin 3rem (48px)
Margin 4rem (64px)
Margin 5rem (80px)
Margin top 1rem
Margin right 1rem
Margin bottom 1rem
Margin left 1rem
Margin left & right 1rem
Margin top & bottom 1rem
Centered block
Pushed to right
Pushed to left
No padding
Padding 0.25rem (4px)
Padding 0.5rem (8px)
Padding 0.75rem (12px)
Padding 1rem (16px)
Padding 1.25rem (20px)
Padding 1.5rem (24px)
Padding 2rem (32px)
Padding top 1rem
Padding right 1rem
Padding bottom 1rem
Padding left 1rem
Padding left & right 1rem
Padding top & bottom 1rem
Hidden (display: none)
Inline
Inline block
Block
Flex container
Inline flex container
Flex row (horizontal)
Flex column (vertical)
Flex with wrapping
Flex no wrap
Start
End
Center
Space between
Space around
Align start
Align end
Align center
Align baseline
Align stretch
Fill available space
Grow
Don't grow
Shrink
Don't shrink
Start aligned text
Center aligned text
End aligned text
Text that doesn't wrap
This long text will be truncated with ellipsis...
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
Min-height 2rem (32px)
Min-height 3rem (48px)
Min-height 5rem (80px)
Min-height 8rem (128px)
Min-height 10rem (160px)
Min-height 12rem (192px)
Min-height 15rem (240px)
Min-height 20rem (320px)
Min-height 25rem (400px)
Min-height 30rem (480px)
Height 2rem (32px)
Height 3rem (48px)
Height 5rem (80px)
Height 8rem (128px)
Height 10rem (160px)
Height 12rem (192px)
Height 15rem (240px)
Height 20rem (320px)
Height 25rem (400px)
Height 30rem (480px)
Height 40rem (640px)
Height 50rem (800px)

Activity Feed

Item 1

Item 2

Item 3

Max-height 5rem (80px)
Max-height 8rem (128px)
Max-height 10rem (160px)
Max-height 12rem (192px)
Max-height 15rem (240px)
Max-height 20rem (320px)
Max-height 25rem (400px)
Max-height 30rem (480px)
Max-height 40rem (640px)
Max-height 50rem (800px)

Recent Items

Item 1

Item 2

Show scrollbar when content overflows (both directions)
Show vertical scrollbar when content overflows
Show horizontal scrollbar when content overflows
Hide overflowing content (no scrollbar)
Show overflowing content outside container
Column 1 Column 2

Navigation

Messages

Message 1
Message 2

Code Example

const example = "very long line of code that extends beyond the container width and needs horizontal scrolling";

User List

Name Email Status
John Doejohn@example.comActive
Jane Smithjane@example.comActive
Static
Relative
Absolute
Fixed
Sticky
Border on all sides
Border top
Border right
Border bottom
Border left
No border
No border top
No border right
No border bottom
No border left
Rounded corners
Large rounded corners
Circle (50% radius)
No rounded corners
Rounded top corners
Rounded bottom corners
Rounded left corners
Rounded right corners
No shadow
Small shadow
Default shadow
Large shadow

Card with Utilities

Item 1
Item 2

Welcome

Get started by creating your first project.

Card 1
Card 2