Title Count

This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.

Default

Use this kit as a form of label value only for a numeric value.

import React from 'react'

import TitleCount from 'playbook-ui'

const TitleCountDefault = (props) => {
  return (
    <>
      <TitleCount
          count={35.78}
          title="Appointments"
      />

      <br />

      <TitleCount
          count={7399}
          size="lg"
          title="Appointments"
      />

      <br />

      <TitleCount
          count={-379503.372}
          size="lg"
          title="Appointments"
      />
    </>
  )
}

export default TitleCountDefault

Align

import React from 'react'

import TitleCount from 'playbook-ui'

const TitleCountAlign = (props) => {
  return (
    <>
      <TitleCount
          count={527}
          title="Remodeling Consultants"
      />

      <br />

      <TitleCount
          align="center"
          count={527}
          title="Remodeling Consultants"
      />

      <br />

      <TitleCount
          align="right"
          count={527}
          title="Remodeling Consultants"
      />
    </>
  )
}

export default TitleCountAlign

Things To Avoid

Keep the format. Don’t replace the colors for any text in this kit.

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