3.0.0


Principles

Kits

Tokens


Body

RailsReact
Light UI


Close
import React from "react"
import {Body} from "../../"

function BodyLight() {
  return (
    <div>
      <Body text="I am a body kit (Default)" />
      <Body color="light" text="I am a body kit (Light)" />
      <Body color="lighter" text="I am a body kit (Lighter)" />
      <br/>
      <br/>
      <Body status="negative" text="I am a body kit (Status: negative)" />
      <Body status="positive" text="I am a body kit (Status: positive)" />
    </div>
  )
}

export default BodyLight;
Dark UI


Close
import React from "react"
import {Body} from "../../"

function BodyDark() {
  return (
    <div>
      <Body dark text="I am a body kit (Default)" />
      <Body dark color="light" text="I am a body kit (Light)" />
      <Body dark color="lighter" text="I am a body kit (Lighter)" />
      <br/>
      <br/>
      <Body dark status="negative" text="I am a body kit (Status: negative)" />
      <Body dark status="positive" text="I am a body kit (Status: positive)" />
    </div>
  )
}

export default BodyDark;
Block


Close
import React from "react"
import {Body} from "../../"

function BodyBlock() {
  return (
    <div>
      <Body>
        I am a body kit
      </Body>
    </div>
  )
}

export default BodyBlock;