@ds-kit/div
v4.1.0
Published
Div component
Downloads
7
Readme
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.