Title

Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
Tags can be changed using the tag prop. However, be sure follow markdown semantics (h1's are followed by h2's followed by h3's and so on).

Default UI

Prop

Title kit will use h3 tag by default, and size 3 as well.
Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.

import React from 'react'

import { Title } from 'playbook-ui'

const TitleDefault = (props) => {
  return (
    <div>
      <Title
          marginBottom='md'
          text="Default Title"
      />
      <Title
          size={1}
          tag="h1"
          text="Title 1"
      />
      <Title
          size={2}
          tag="h2"
          text="Title 2"
      />
      <Title
          size={3}
          tag="h3"
          text="Title 3"
      />
      <Title
          size={4}
          tag="h4"
          text="Title 4"
      />
    </div>
  )
}

export default TitleDefault

Light Weight UI

Prop

Title size 1, size 2, & size 3 will use font-weight: 700 by default, if you want a lighter font weight, use the bold prop set to false.
Title size 4 uses a heavy font weight by default and will not accept a lighter font weight.

import React from "react"

import { Title } from 'playbook-ui'

const TitleLightWeight = (props) => {
  return (
    <div>
      <Title bold={false}
          size={1}
          tag='h1'
          text='Title 1'
      />
      <Title bold={false}
          size={2}
          tag='h2'
          text='Title 2'
      />
      <Title bold={false}
          size={3}
          tag='h2'
          text='Title 3'
      />
    </div>
  )
}

export default TitleLightWeight

Colors

Prop

Title kit will use default color by default. Other available colors are:

*light lighter success error link

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 { Title } from 'playbook-ui'

const TitleColors = (props) => {
  return (
    <div>
      <Title
          text="Default Color"
      />
      <Title
          color="link"
          size={3}
          tag="h1"
          text="Title Color"
      />
      <Title
          color="success"
          size={3}
          tag="h1"
          text="Title Color"
      />
      <Title
          color="error"
          size={3}
          tag="h1"
          text="Title Color"
      />
    </div>
  )
}

export default TitleColors

Responsive

The size prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

import React from 'react'

import { Title } from 'playbook-ui'

const TitleResponsive = (props) => {
  return (
    <>
      <Title
          size={{xs: "3", sm: "2", md: "1"}}
          text="Responsive Title"
      />
    </>
  )
}

export default TitleResponsive

Truncate

Prop

truncate | Type: Enum | Values: 1 | 2 | 3 | 4 | 5

The truncate prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

import React from 'react';

import { Title, Caption, Flex } from 'playbook-ui'

const TitleTruncate = (props) => {
  const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"

  return (
    <Flex
        maxWidth="md"
        orientation="column"
    >
      <Caption
          text="After first row"
      />
      <Title
          marginBottom="md"
          size={4}
          text={lorem}
          truncate={1}
      />

      <Caption
          text="After second row"
      />
      <Title
          marginBottom="md"
          size={4}
          text={lorem}
          truncate={2}
      />

      <Caption
          text="After third row"
      />
      <Title
          size={4}
          text={lorem}
          truncate={3}
      />
    </Flex>
  )
}

export default TitleTruncate

Display Size

Responsive sizes for large screens and tablets, perfect for digital signage.

import React from 'react'

import { Title } from 'playbook-ui'

const TitleDisplaySize = (props) => {
  return (
    <div>
      <Title
          displaySize="xs"
          tag="h1"
          text="Display Size xs"
      />
      <Title
          displaySize="sm"
          tag="h1"
          text="Display Size sm"
      />
      <Title
          displaySize="md"
          tag="h1"
          text="Display Size md"
      />
      <Title
          displaySize="lg"
          tag="h1"
          text="Display Size lg"
      />
      <Title
          displaySize="xl"
          tag="h1"
          text="Display Size xl"
      />
      <Title
          displaySize="xxl"
          tag="h1"
          text="Display Size xxl"
      />
      <Title
          size="display"
          tag="h1"
          text="This is a size of display"
      />
    </div>
  )
}

export default TitleDisplaySize

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