Detail

Used for tables or designs with large amounts of data or text.

Default

import React from 'react'
import { Detail } from 'playbook-ui'

const DetailDefault = (props) => (
  <div>
    <Detail
        text="I am a detail kit"
    />
  </div>
)

export default DetailDefault

Colors

Prop

This kit uses the light color by default, and can be replaced with colors below:

default lighter link error success

These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.

import React from 'react'
import { Detail } from 'playbook-ui'

const DetailColors = (props) => (
  <div>
    <Detail
        color="default"
        text="I am a detail kit"
    />

    <Detail
        color="lighter"
        text="I am a detail kit"
    />

    <Detail
        color="link"
        text="I am a detail kit"
    />

    <Detail
        color="error"
        text="I am a detail kit"
    />

    <Detail
        color="success"
        text="I am a detail kit"
    />
  </div>
)

export default DetailColors

Bold

Use the bold prop to strongly emphasis your text.

import React from 'react'
import { Detail } from 'playbook-ui'

const DetailBold = (props) => (
  <div>
    <Detail
        bold
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="default"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="lighter"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="link"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="error"
        text="I am a bold detail kit"
    />

    <Detail
        bold
        color="success"
        text="I am a bold detail kit"
    />
  </div>
)

export default DetailBold

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat