Highlight

Highlight is used to pick out or emphasize content.

Default

import React from 'react'

import Highlight from 'playbook-ui'
import Body from 'playbook-ui'

const HighlightDefault = (props) => (
  <div>
    <Highlight
        highlightedText={['highlight kit']}
        text="This is the Highlight Kit."
    />
    <br />
    <Body>
      {' '}
      {'Hello this is a'}
      {' '}
      <Highlight text=" highlight wrapped."/>
    </Body>
    <br />
    <Body
        highlightedText={['highlighted', 'Body Kit ']}
        highlighting
        text="This is text highlighted in the Body Kit using the text prop."
    />
  </div>
)

export default HighlightDefault

Things to Avoid

Avoid highlighting words that don’t apply or whole content areas.

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