Title Detail

This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.

Default

Use this kit in tables and cards to display data that doesn’t have a caption assigned.

import React from 'react'

import { TitleDetail } from 'playbook-ui'

const TitleDetailDefault = (props) => (
  <div>
    <TitleDetail
        detail="Commits data and history"
        title="Email Notifications"
    />

    <TitleDetail
        align="center"
        detail="Commits data and history"
        title="Email Notifications"
    />

    <TitleDetail
        align="right"
        detail="Commits data and history"
        title="Email Notifications"
    />

  </div>
)

export default TitleDetailDefault

Things To Avoid

Don’t use as replacement for label_value kit. This kit is to be used for small amount of text in the details.

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

Github

Connect Chat