Box
Learn how to use the box component in Rocketship.
experimentalEnhanced Box Component Examples with Border Styles
1. Basic Box with Dotted Border
Dotted border box
2. Responsive Box with Different Border Styles
This box has responsive border styles
3. Card-like Box with Double Border
Card with double border
4. Grid of Boxes with Different Border Styles
Solid
Dashed
Dotted
Double
Groove
Ridge
5. Responsive Border with Changing Style and Color
This box changes border width, style, and color at different breakpoints
Box Component Examples
1. Basic Box
This is a basic box
2. Responsive Box
This box changes width and padding at different breakpoints
3. Flex Box
Flex Item 1
Flex Item 2
Flex Item 3
4. Grid Box
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6
5. Positioned Box
Top Left
Bottom Right
6. Box with Overflow
This is a long paragraph that will overflow the box. You should be able to scroll to see all the content.
Here’s even more content to ensure we have enough to scroll.