#Box
<Box /> is the core component of the UI. All the components build based on <Box /> component.
#Utility first
<Box /> can help quickly build the UI without needed touch additional files for styles.
For the full list support please check the system document.
Other props will send directly to the element like id, onClick...
Hello
World!
#Responsive
Support responsive (min-width strategy).
- sm: 576px
- md: 768px
- lg: 992px
- xl: 1200px
- xxl: 1400px
You can change the default responsive breakpoints. Check the system document.
Text is red when screen size is less than 1024px
#Render as
By default the <Box /> component renders a div element.
We can change the element tag by using as props.
Also, the component can render as a React Component. It will send className props to the component.