Source

General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.

Summary

Uses Icons

Default

import React from 'react'

import Source from 'playbook-ui'

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

    <br />
    <br />

    <Source
        source="Referral-phrg"
        type="inbound"
    />

    <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',
              }
            }
    />
  </>
)

export default SourceDefault

Hide Icon

import React from 'react'

import Source from 'playbook-ui'

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

    <br />
    <br />

    <Source
        hideIcon
        source="Referral-phrg"
        type="inbound"
    />

    <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',
                }
              }
    />
  </>
)

export default SourceNoicon

Source Types

import React from 'react'

import Source from 'playbook-ui'

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

    <br />
    <br />

    <Source
        source="Referral-phrg"
        type="inbound"
    />

    <br />
    <br />

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

    <br />
    <br />

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

    <br />
    <br />

    <Source
        source="Beards, Beers and Brats"
        type="events"
    />

    <br />
    <br />

    <Source
        source="BJ's Johnston-208"
        type="referral"
    />

    <br />
    <br />

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

    <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',
              }
            }
    />
  </>
)

export default SourceTypes

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