@ds-kit/div NPM

title: "Div" slug: "/packages/div" category: "layout" componentNames:

"Div"

Div

The Div component is a simple wrapper around the div tag to allow for quick prototyping and styling on the fly.

import Div from "@ds-kit/div"

Basic Example

The simplest example of a div with a custom background and text color, as well as some padding, can look like this:

<Div bg="primary" color="white" p="3rem">
  This is a div
</Div>

Dimensions

Sometimes it is useful to be able to set fixed dimensions on a div.

<Div width="6rem" height="6rem" bg="primary" borderRadius="100%" />

Layout

You can use Divs for simple layout tasks, such as limiting the width of a box.

<Div maxWidth="20rem" bg="grey.50" p="3rem">
  Box with a limited width
</Div>

Visibility

You can easily handle responsive visibility with the <Div /> component.

<>
  <Div p="1rem" bg="grey.50" display={["block", "none"]}>
    visible only on mobile
  </Div>
  <Div p="1rem" bg="grey.100" display={["none", "block"]}>
    visible as of tablet
  </Div>
  <Div p="1rem" bg="grey.200" display={["none", null, "block"]}>
    visible only on desktop
  </Div>
</>

Text

Sometimes it is more convenient to set the text alignment at a box level.

<Div textAlign="center" p="3rem" bg="primary" color="white">
  Centered Text
</Div>

Positioning

You can position elements combining position and left, right, top, bottom props.

<Div bg="primary" height={300} position="relative">
  <Div
    position="absolute"
    width={100}
    height={100}
    top={50}
    left={50}
    bg="white"
  />
</Div>

Props

Check out styled-system display, position, width, height, maxWidth, space, color, textAlign, borderRadius, overflow, borders, alignSelf, order for possible options.