Max-Width
Use maxW prop to control the max-width of an element.
Name | Value | Pixels |
|---|---|---|
xs | 20rem | 320px |
sm | 24rem | 384px |
md | 28rem | 448px |
lg | 32rem | 512px |
xl | 36rem | 576px |
2xl | 42rem | 672px |
full | 100% | 100% |
#
Documentation
#
#
Usage
#
maxW=xl
maxW=lg
maxW=md
maxW=sm
maxW=xs
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box maxW="xl" w="full">
maxW=xl
</Box>
<Box maxW="lg" w="full">
maxW=lg
</Box>
<Box maxW="md" w="full">
maxW=md
</Box>
<Box maxW="sm" w="full">
maxW=sm
</Box>
<Box maxW="xs" w="full">
maxW=xs
</Box>
</Canvas>
);
}