Skip to Content
StylingResponsive Styles

Responsive Styles

Box component support responsive styles for all layout related props.

Name

Minimum width

base
0px
sm
var(--ax-screens-sm) /* 37.5rem (600px) */
md
var(--ax-screens-md) /* 56.25rem (900px) */

#

Documentation

#

Object notation

Use the object prop notation where the key is the breakpoint name.

import { Flex } from "@optiaxiom/react";
 
export function App() {
  return <Flex flexDirection={{ base: "column", sm: "row" }}>...</Flex>;
}

#

Array notation

Use the array prop notation with the elements in order of condition [base, sm, md].

import { Flex } from "@optiaxiom/react";
 
export function App() {
  return <Flex flexDirection={["column", "row"]}>...</Flex>;
}

#

Example

import beach from "@/demos/beach.jpg";
import { Box, Flex, Text } from "@optiaxiom/react";
import Image from "next/image";
 
export function App() {
  return (
    <Box
      bg="bg.default"
      maxW={["sm", "lg"]}
      overflow="hidden"
      rounded="sm"
      shadow="sm"
    >
      <Flex alignItems="start" flexDirection={["column", "row"]} gap="0">
        <Box asChild h="auto" maxW="full">
          <Image
            alt="brown glass bottle beside white book on blue and white textile"
            src={beach}
            style={{ minWidth: "0" }}
          />
        </Box>
 
        <Box p="16">
          <Text color="fg.error" fontWeight="600" textTransform="uppercase">
            Phasellus auctor
          </Text>
 
          <Text fontSize="lg" fontWeight="700" my="8">
            Nullam rhoncus gravida urna
          </Text>
 
          <Text>
            Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Phasellus
            efficitur feugiat luctus et.
          </Text>
        </Box>
      </Flex>
    </Box>
  );
}
Last updated on
Design TokensColors