Playbook Design System

Contact

Default

Code Example

Close

import React from 'react'
import { Contact } from '../../'

const ContactDefault = (props) => {
  return (
    <div>
      <Contact
          contactType="cell"
          contactValue="349-185-9988"
          {...props}
      />
      <Contact
          contactValue="5555555555"
          {...props}
      />
      <Contact
          contactType="email"
          contactValue="email@example.com"
          {...props}
      />
      <Contact
          contactType="work"
          contactValue="3245627482"
          {...props}
      />
      <Contact
          contactType="work-cell"
          contactValue="3245627482"
          {...props}
      />
    </div>
  )
}

export default ContactDefault

Detail Indicator

Code Example

Close

import React from 'react'
import { Contact } from '../../'

const ContactDefault = (props) => {
  return (
    <div>
      <Contact
          contactDetail="Cell"
          contactType="cell"
          contactValue="349-185-9988"
          {...props}
      />
      <Contact
          contactDetail="Home"
          contactValue="5555555555"
          {...props}
      />
      <Contact
          contactDetail="Work"
          contactType="work"
          contactValue="3245627482"
          {...props}
      />
      <Contact
          contactDetail="Work-Cell"
          contactType="work-cell"
          contactValue="3245627482"
          {...props}
      />
      <Contact
          contactDetail="Ext"
          contactType='extension'
          contactValue="1234"
          {...props}
      />
    </div>
  )
}

export default ContactDefault

Currency

Variants

Code Example

Close

import React from 'react'

import Currency from '../_currency'

const CurrencyVariants = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          emphasized={false}
          label="Emphasized False"
          marginBottom="md"
          size="sm"
          {...props}
      />
      <Currency
          amount="342"
          label="Light"
          marginBottom="md"
          size="sm"
          symbol="€"
          variant="light"
          {...props}
      />
      <Currency
          amount="45"
          label="Bold"
          size="sm"
          unit="/mo"
          variant="bold"
          {...props}
      />
    </>
  )
}

export default CurrencyVariants

Size

Code Example

Close

import React from 'react'

import Currency from '../_currency'

const CurrencySize = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Small"
          marginBottom="md"
          size="sm"
          {...props}
      />
      <Currency
          amount="342"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
          {...props}
      />
      <Currency
          amount="45"
          label="Large"
          size="lg"
          unit="/mo"
          {...props}
      />
    </>
  )
}

export default CurrencySize

Alignment

Code Example

Close

import React from 'react'

import Currency from '../_currency'

const CurrencyAlignment = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Left"
          size="sm"
          {...props}
      />
      <Currency
          align="center"
          amount="342"
          label="Center"
          size="sm"
          symbol="€"
          {...props}
      />
      <Currency
          align="right"
          amount="45"
          label="Right"
          size="sm"
          unit="/mo"
          {...props}
      />
    </>
  )
}

export default CurrencyAlignment

No Symbol

Code Example

Close

import React from 'react'

import Currency from '../_currency'

const CurrencyNoSymbol = (props) => {
  return (
    <Currency
        amount="309"
        label="Sales"
        size="md"
        symbol=""
        unit="/week"
        {...props}
    />
  )
}

export default CurrencyNoSymbol

Abbreviate Larger Amounts

Code Example

Close

import React from 'react'

import Currency from '../_currency'

const CurrencyAbbreviated = (props) => {
  return (
    <>
      <Currency
          abbreviate
          amount="2,500"
          label="Thousands (with Unit)"
          marginBottom="md"
          size="md"
          unit="/mo"
          {...props}
      />
      <Currency
          abbreviate
          amount="45300000"
          label="Millions"
          marginBottom="md"
          size="md"
          {...props}
      />
      <Currency
          abbreviate
          amount="6,700,000,000"
          label="Billions"
          marginBottom="md"
          size="md"
          {...props}
      />
      <Currency
          abbreviate
          amount="9,900,000,000,000"
          label="Trillions"
          size="md"
          {...props}
      />
    </>
  )
}

export default CurrencyAbbreviated

Matching Decimals

Code Example

Close

import React from 'react'

import Currency from '../_currency'

const CurrencyMatchingDecimals = (props) => {
  return (
    <>
      <Currency
          amount="372.12"
          decimals="matching"
          label="Small"
          marginBottom="md"
          size="sm"
          unit="/day"
          {...props}
      />
      <Currency
          amount="30,327.43"
          decimals="matching"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
          {...props}
      />
      <Currency
          amount="621,953.99"
          decimals="matching"
          label="Large"
          size="lg"
          {...props}
      />
    </>
  )
}

export default CurrencyMatchingDecimals

Dashboard Value

Full Example

Code Example

Close

import React from 'react'

import DashboardValue from '../../pb_dashboard_value/_dashboard_value'

const DashboardValueDefault = (props) => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Decreased Value"
          statValue={{ value: '1,428', unit: 'appts' }}
          {...props}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ change: 'increase', value: 56.1 }}
          statLabel="Increased Value"
          statValue={{ value: '938', unit: 'homes' }}
          {...props}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ value: 86 }}
          statLabel="Neutral Value"
          statValue={{ value: '261', unit: 'windows' }}
          {...props}
      />

      <br />
      <br />

      <DashboardValue
          statLabel="Pitch Rate"
          statValue={{ value: '90.9', unit: '%' }}
          {...props}
      />
    </div>
  )
}

export default DashboardValueDefault

Align

Code Example

Close

import React from 'react'

import DashboardValue from '../../pb_dashboard_value/_dashboard_value'

const DashboardValueAlign = (props) => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
          {...props}
      />

      <br />
      <br />

      <DashboardValue
          align="center"
          statChange={{ change: 'decrease', value: 56.1 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
          {...props}
      />

      <br />
      <br />

      <DashboardValue
          align="right"
          statChange={{ change: 'decrease', value: 86 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
          {...props}
      />
    </div>
  )
}

export default DashboardValueAlign

Home Address Street

Default

Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas.

Code Example

Close

import React from 'react'

import HomeAddressStreet from '../_home_address_street'

const HomeAddressStreetDefault = (props) => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId="8250263"
        homeUrl="https://powerhrg.com/"
        houseStyle="Colonial"
        state="PA"
        territory="PHL"
        zipcode="19382"
        {...props}
    />
  )
}

export default HomeAddressStreetDefault

Emphasis

Emphasis on street happens by default. (no prop needed)
Emphasis on "city" makes the city emphasized, rather than the street.

Code Example

Close

import React from 'react'

import HomeAddressStreet from '../_home_address_street'

const HomeAddressStreetEmphasis = (props) => {
  return (
    <div>
      <HomeAddressStreet
          address="70 Prospect Ave"
          addressCont="Apt M18"
          city="West Chester"
          homeId="8250263"
          homeUrl="https://powerhrg.com/"
          houseStyle="Colonial"
          state="PA"
          territory="PHL"
          zipcode="19382"
          {...props}
      />
      <br />
      <br />
      <HomeAddressStreet
          address="70 Prospect Ave"
          addressCont="Apt M18"
          city="West Chester"
          emphasis="city"
          homeId="8250263"
          homeUrl="https://powerhrg.com/"
          houseStyle="Colonial"
          state="PA"
          territory="PHL"
          zipcode="19382"
          {...props}
      />
    </div>
  )
}

export default HomeAddressStreetEmphasis

Modified

Code Example

Close

import React from 'react'

import HomeAddressStreet from '../_home_address_street'

const HomeAddressStreetModified = (props) => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        city="West Chester"
        state="PA"
        territory="PHL"
        zipcode="19382"
        {...props}
    />
  )
}

export default HomeAddressStreetModified

Link

Use the newWindow / new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

Code Example

Close

import React from 'react'

import HomeAddressStreet from '../_home_address_street'

const HomeAddressStreetLink= (props) => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId={8250263}
        homeUrl="https://powerhrg.com/"
        houseStyle="Colonial"
        newWindow
        state="PA"
        territory="PHL"
        zipcode="19382"
        {...props}
    />
  )
}

export default HomeAddressStreetLink

Label Pill

Default

Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.

Code Example

Close

import React from 'react'

import LabelPill from '../_label_pill'

const LabelPillDefault = (props) => (

  <>
    <LabelPill
        label="Service Needed"
        pillValue="76"
        {...props}
    />

    <LabelPill
        label="Waiting"
        pillValue="69"
        variant="success"
        {...props}
    />

    <LabelPill
        label="In Service"
        pillValue="28"
        variant="error"
        {...props}
    />

    <LabelPill
        label="Fully Serviced"
        pillValue="101"
        variant="warning"
        {...props}
    />

    <LabelPill
        label="Inbox"
        pillValue="197"
        variant="info"
        {...props}
    />

    <LabelPill
        label="Outbox"
        pillValue="13"
        variant="neutral"
        {...props}
    />

    <LabelPill
        label="Inbox"
        pillValue="218"
        variant="primary"
        {...props}
    />
  </>
)

export default LabelPillDefault

Label Value

Default

Use this kit to display a label and value text for almost every data entry.

Code Example

Close

import React from 'react'
import { LabelValue } from '../../'

const LabelValueDefault = (props) => {
  return (
    <div>
      <LabelValue
          label="Role"
          value="Administrator, Moderator"
          {...props}
      />

      <br />

      <LabelValue
          label="Email"
          value="anna.black@powerhrg.com"
          {...props}
      />

      <br />

      <LabelValue
          label="Bio"
          value="Proin pulvinar feugiat massa in luctus. Donec urna nulla,
            elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
            lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
            orci vehicula condimentum"
          {...props}
      />
    </div>
  )
}

export default LabelValueDefault

Details

Variant details can pass icon, description, title, date, and active props.

Code Example

Close

import React from 'react'
import { LabelValue } from '../../'

const LabelValueDetails = (props) => {
  return (
    <div>
      <LabelValue
          icon="truck"
          label="Installer"
          title="JD Installations LLC"
          variant="details"
          {...props}
      />

      <br />

      <LabelValue
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
          {...props}
      />

      <br />

      <LabelValue
          date={new Date('18 Nov 2019')}
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
          {...props}
      />

      <br />

      <LabelValue
          active
          date={new Date('18 Nov 2019')}
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
          {...props}
      />
    </div>
  )
}

export default LabelValueDetails

Other Examples

Code Example

Close

import React from 'react'
import { Flex, LabelValue, Title } from '../../'

const LabelValueDetailsExamples = (props) => {
  return (
    <div>
      <Title
          marginBottom="sm"
          size={4}
          text="Patient Profile"
          {...props}
      />

      <Flex>
        <Flex
            marginRight="lg"
            orientation="column"
            {...props}
        >
          <LabelValue
              icon="user"
              label="Age"
              paddingBottom="sm"
              title="24 yrs old"
              variant="details"
              {...props}
          />
          <LabelValue
              icon="weight"
              label="Weight"
              title="91 kg"
              variant="details"
              {...props}
          />
        </Flex>
        <Flex
            orientation="column"
            {...props}
        >
          <LabelValue
              icon="tint"
              label="Blood"
              paddingBottom="sm"
              title="A +"
              variant="details"
              {...props}
          />
          <LabelValue
              icon="arrows-v"
              label="Height"
              title="187 cm"
              variant="details"
              {...props}
          />
        </Flex>
      </Flex>

      <br />
      <br />
      <br />

      <Title
          marginBottom="sm"
          size={4}
          text="Workout Schedule"
          {...props}
      />

      <LabelValue
          active
          description="6 sets • 8 reps • 40-100 kg"
          icon="dumbbell"
          label="Chest"
          paddingBottom="sm"
          title="Bench Press"
          variant="details"
          {...props}
      />
      <LabelValue
          active
          description="5 sets • 12 reps • 20-40 kg"
          icon="dumbbell"
          label="Biceps"
          paddingBottom="sm"
          title="Barbell Curl"
          variant="details"
          {...props}
      />
      <LabelValue
          active
          description="8 sets • 8 reps • 40-120 kg"
          icon="dumbbell"
          label="Back"
          paddingBottom="sm"
          title="Back Squat"
          variant="details"
          {...props}
      />
    </div>
  )
}

export default LabelValueDetailsExamples

Message

Default

Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section.

Code Example

Close

import React from 'react'

import Message from '../_message'
import Image from '../../pb_image/_image'

const MessageDefault = (props) => {
  return (
    <div>
      <Message
          avatarName="Mike Bishop"
          avatarStatus="online"
          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
          label="Anna Black"
          message="How can we assist you today?"
          timestamp="20 seconds ago"
          {...props}
      />

      <br />
      <br />

      <Message
          alignTimestamp="left"
          avatarName="Wade Winningham"
          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
          label="Patrick Welch"
          message="We will escalate this issue to a Senior Support agent."
          timestamp="9 minutes ago"
          {...props}
      />

      <br />
      <br />

      <Message
          avatarName="Becca Jacobs"
          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
          label="Lucille Sanchez"
          message="Application for Kate Smith is waiting for your approval"
          timestamp="2 days ago"
          {...props}
      />

      <br />
      <br />

      <Message
          avatarName="Timothy Wenhold"
          label="Beverly Reyes"
          message="We are so sorry you had a bad experience!"
          timestamp="2 days ago"
          {...props}
      />

      <br />
      <br />

      <Message
          label="Keith Craig"
          message="Please hold for one moment, I will check with my manager."
          timestamp="2 days ago"
          {...props}
      />

      <br />
      <br />

      <Message
          label="Keith Craig"
          timestamp="2 days ago"
          {...props}
      >
        <Image
            alt="picture of a misty forest"
            size="md"
            url="https://unsplash.it/500/400/?image=634"
        />
      </Message>

      <br />
      <br />

      <Message
          label="Keith Craig"
          message="Please hold for one moment, I will check with my manager."
          timestamp="2 days ago"
          {...props}
      >
        <Image
            alt="picture of a misty forest"
            size="md"
            url="https://unsplash.it/500/400/?image=634"
        />
      </Message>

    </div>
  )
}

export default MessageDefault

With Timestamp Hover

Code Example

Close

import React from 'react'
import { Message } from '../../'

const MessageTimestamp = (props) => {
  return (
    <>
      <Message
          avatarName="Wade Winningham"
          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
          label="Anna Black"
          message="We will escalate this issue to a Senior Support agent."
          timestamp="9 minutes ago"
          timestampObject={new Date}
          {...props}
      />
      <br />
      <br />
      <Message
          alignTimestamp="left"
          avatarName="Wade Winningham"
          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
          label="Becca Jacobs"
          message="Application for Kate Smith is waiting for your approval"
          timestamp="12.20p"
          timestampObject={new Date}
          {...props}
      />
    </>
  )
}

export default MessageTimestamp

Person

Default

Use this kit to display users, homeowners, or person of contact.

Code Example

Close

import React from 'react'

import Person from '../_person'

const PersonDefault = (props) => {
  return (
    <Person
        firstName="Kyle"
        lastName="Fadigan"
        {...props}
    />
  )
}

export default PersonDefault

Person Contact

Default

Code Example

Close

import React from 'react'

import PersonContact from '../_person_contact'

const PersonContactDefault = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
          },
        ]}
          firstName="Pauline"
          lastName="Smith"
          {...props}
      />
    </div>
  )
}

export default PersonContactDefault

Multiple People

Code Example

Close

import React from 'react'

import PersonContact from '../_person_contact'

const PersonContactMultiple = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
          },
        ]}
          firstName="Harvey"
          lastName="Walters"
          {...props}
      />
      <PersonContact
          contacts={[
          {
            contactValue: '5555555555',
          },
        ]}
          firstName="Brenda"
          lastName="Walters"
          {...props}
      />
    </div>
  )
}

export default PersonContactMultiple

With Detail

Code Example

Close

import React from 'react'

import PersonContact from '../_person_contact'

const PersonContactWithDetail = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
            contactDetail: 'Home',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
            contactDetail: 'Work',
          },
        ]}
          firstName="Harvey"
          lastName="Walters"
          {...props}
      />
    </div>
  )
}

export default PersonContactWithDetail

With Wrong Numbers

Code Example

Close

import React from 'react'

import PersonContact from '../_person_contact'

const PersonContactWithWrongNumbers = (props) => {
  return (
    <>
      <PersonContact
          contacts={[
            {
              contactType: 'email',
              contactValue: 'email@example.com',
            },
            {
              contactValue: '5555555555',
            },
            {
              contactType: 'wrong-phone',
              contactValue: '3245627482',
            },
            {
              contactType: 'phone',
              contactValue: '3048615385',
            },
          ]}
          firstName="Pauline"
          key="person-contact-1"
          lastName="Smith"
          {...props}
      />
    </>
  )
}

export default PersonContactWithWrongNumbers

Source

Default

Code Example

Close

import React from 'react'

import Source from '../_source'

const SourceDefault = (props) => (
  <>
    <Source
        source="BJ's Johnston-208"
        type="retail"
        {...props}
    />

    <br />
    <br />

    <Source
        source="Referral-phrg"
        type="inbound"
        {...props}
    />

    <br />
    <br />

    <Source
        source="BJ's Future CB"
        type="user"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                },
                userId: '48582',
              }
            }
        {...props}
    />
  </>
)

export default SourceDefault

Hide Icon

Code Example

Close

import React from 'react'

import Source from '../_source'

const SourceNoicon = (props) => (
  <>
    <Source
        hideIcon
        source="BJ's Johnston-208"
        type="retail"
        {...props}
    />

    <br />
    <br />

    <Source
        hideIcon
        source="Referral-phrg"
        type="inbound"
        {...props}
    />

    <br />
    <br />

    <Source
        hideIcon
        source="BJ's Future CB"
        type="user"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                  },
                userId: '48582',
                }
              }
        {...props}
    />
  </>
)

export default SourceNoicon

Source Types

Code Example

Close

import React from 'react'

import Source from '../_source'

const SourceTypes = (props) => (
  <>
    <Source
        source="BJ's Johnston-208"
        type="retail"
        {...props}
    />

    <br />
    <br />

    <Source
        source="Referral-phrg"
        type="inbound"
        {...props}
    />

    <br />
    <br />

    <Source
        source="B.B.B. Outbound"
        type="outbound"
        {...props}
    />

    <br />
    <br />

    <Source
        source="Contractor.com"
        type="prospecting"
        {...props}
    />

    <br />
    <br />

    <Source
        source="Beards, Beers and Brats"
        type="events"
        {...props}
    />

    <br />
    <br />

    <Source
        source="BJ's Johnston-208"
        type="referral"
        {...props}
    />

    <br />
    <br />

    <Source
        source="Employee Referral"
        type="referral"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                },
                userId: '48582',
              }
            }
        {...props}
    />

    <br />
    <br />

    <Source
        source="BJ's Future CB"
        type="user"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                },
                userId: '48582',
              }
            }
        {...props}
    />
  </>
)

export default SourceTypes

Stat Change

Default

Code Example

Close

import React from 'react'
import { StatChange } from '../../'

const StatChangeDefault = (props) => {
  return (
    <div>
      <StatChange
          change="increase"
          value="28.4"
          {...props}
      />

      <br />

      <StatChange
          change="decrease"
          value={6.1}
          {...props}
      />

      <br />

      <StatChange
          change="neutral"
          value={102}
          {...props}
      />
    </div>
  )
}

export default StatChangeDefault

Icon

Code Example

Close

import React from 'react'
import { StatChange } from '../../'

const StatChangeUnit = (props) => {
  return (
    <div>
      <StatChange
          icon="chart-line"
          value="28.4"
          {...props}
      />

      <br />

      <StatChange
          icon="chart-line-down"
          value={6.1}
          {...props}
      />

      <br />

      <StatChange
          value={102}
          {...props}
      />
    </div>
  )
}

export default StatChangeUnit

Colors

Increase colors your icon GREEN & Decrease colors your icon RED.

Code Example

Close

import React from 'react'
import { StatChange } from '../../'

const StatChangeUnitTwo = (props) => {
  return (
    <div>
      <StatChange
          change="increase"
          icon="level-up"
          value="28.4"
          {...props}
      />

      <br />

      <StatChange
          change="decrease"
          icon="level-down"
          value={6.1}
          {...props}
      />

      <br />

      <StatChange
          change="neutral"
          value={102}
          {...props}
      />
    </div>
  )
}

export default StatChangeUnitTwo

Stat Value

Default

Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view.

Code Example

Close

import React from 'react'

import StatValue from '../_stat_value'

const StatValueDefault = (props) => {
  return (
    <>
      <StatValue
          value={1048}
          {...props}
      />
      <br />
      <br />
      <StatValue
          value={10.48}
          {...props}
      />
    </>
  )
}

export default StatValueDefault

Unit Value

Code Example

Close

import React from 'react'
import StatValue from '../_stat_value'

const StatValueUnit = (props) => {
  return (
    <StatValue
        unit="appt"
        value="5,294"
        {...props}
    />
  )
}

export default StatValueUnit

Title Count

Default

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

Code Example

Close

import React from 'react'

import TitleCount from '../_title_count'

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

      <br />

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

      <br />

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

export default TitleCountDefault

Align

Code Example

Close

import React from 'react'

import TitleCount from '../_title_count'

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

      <br />

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

      <br />

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

export default TitleCountAlign

Title Detail

Default

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

Code Example

Close

import React from 'react'

import TitleDetail from '../_title_detail'

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

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

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

  </div>
)

export default TitleDetailDefault

Typography Patterns

Contact

Currency

Dashboard Value

Home Address Street

Label Pill

Label Value

Message

Person

Person Contact

Source

Stat Change

Stat Value

Title Count

Title Detail