3.5.0


Principles

Kits

Tokens


Body

RailsReact
Light UI


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

const 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 '../../'

const BodyDark = () => {
  return (
    <div>
      <Body
          dark
          text="I am a body kit (Default)"
      />
      <Body
          color="light"
          dark
          text="I am a body kit (Light)"
      />
      <Body
          color="lighter"
          dark
          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 '../../'

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

export default BodyBlock