Box Component Test

Basic Box

Basic box with padding and background

Flexbox Layout

Flex Item 1

Flex Item 2 (flex: 2)

Flex Item 3

Spacing System

p="1" (8px)

p="2" (16px)

p="3" (24px)

Colors

Primary

Secondary

Success

Error

Warning

Info

Complex Layout

Card Header

Badge

This is a complex layout example using only Box components. It demonstrates the flexibility and power of the Box component for creating sophisticated layouts.

Metric 1

1,234

Metric 2

5,678