Wondering what’s next for npm?Check out our public roadmap! »

    @ds-kit/div

    4.1.0 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @ds-kit/div

    DownloadsWeekly Downloads

    2

    Version

    4.1.0

    License

    LicenseRef-LICENSE

    Unpacked Size

    14.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar