StylingResponsive Styles

Responsive Styles

Box component support responsive styles for all layout related props.

Breakpoint

Minimum width

Pixels

base

0px

0px

sm

37.5rem

600px

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 { Box, Flex, Text } from "@optiaxiom/react";
import Image from "next/image";
 
import beach from "./beach.jpg";
 
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">
        <Image
          alt="brown glass bottle beside white book on blue and white textile"
          src={beach}
          style={{ minWidth: "0" }}
        />
 
        <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>
  );
}
Design TokensColors