Search...

Title Detail

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

Default

Email Notifications

Commits data and history

Email Notifications

Commits data and history

Email Notifications

Commits data and history

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

Props	Type	Values
align	enum	"left" \| "center" \| "right"
data	object	{ [key: string]: string; }
detail	string
title	string

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