Skip to main content

<Box />

<Box /> works as a wrapper to change the appearance of elements through utility properties. It's also used as a column component with <Grid />.

Example​

 open Ancestor

@react.component
let make = () => {
  <Box
    bgColor=[xs(#hex("#000"))]
    p=[xs(3), md(4)]
    display=[xs(#flex)]
    justifyContent=[xs(#"flex-start"), lg(#"space-between")]
    alignItems=[xs(#center)]
    flexDirection=[xs(#column), lg(#row)]>
    <Box mr=[xs(0), lg(6)] mb=[xs(2), lg(0)]>
      <Typography
        textAlign=[xs(#center), lg(#left)]
        color=[xs(#hex("#fff"))]
        mb=[xs(0)]
        tag=#h1
        fontSize=[xs(24->#px), md(32->#px)]
        m=[xs(0)]>
        {`Start using right now`->React.string}
      </Typography>
      <Typography
        textAlign=[xs(#center), lg(#left)]
        color=[xs(#hex("#b1b1b1"))]
        tag=#p
        m=[xs(0)]
        lineHeight=[xs(20->#px)]>
        {`Ancestor is production-ready and actively maintained. It’s used in production projects daily and keep breaking changes to a minimum whereever possible.`->React.string}
      </Typography>
    </Box>
    <Base
      bgColor=[xs(#hex("#fafafa"))]
      borderStyle=[xs(#none)]
      fontSize=[xs(18->#px)]
      width=[xs(256->#px)]
      height=[xs(48->#px)]
      borderRadius=[xs(3)]
      fontWeight=[xs(#600)]
      tag=#button>
      {"Let's start"->React.string}
    </Base>
  </Box>
}
info

Resize your browser to see the responsive styles in action.

Start using right now

Ancestor is production-ready and actively maintained. It’s used in production projects daily and keep breaking changes to a minimum whereever possible.

Props​

<Box /> acceppts all props defined by the system props. Furthermore, it also accepts the following properties:

columns​

Defines the column size inside of a Grid component.

  • Type: responsiveProp<[

    • | # auto
    • | #1
    • | #2
    • | #3
    • | #4
    • | #5
    • | #6
    • | #7
    • | #8
    • | #9
    • | #10
    • | #11
    • | #12

    ]>

  • Optional: true

info

The responsiveProp is a customizable type defined in the Ancestor's setup. You can see the default breakpoints defined in the Ancestor's default setup or define your own breakpoints.