Home Address Street

This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.

Default

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

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

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"
    />
  )
}

export default HomeAddressStreetDefault

Emphasis

Emphasis on street happens by default. (no prop needed)
Emphasis on "city" makes the city emphasized, rather than the street.
Adding "none" to emphasis prop will provide no emphasis.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

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"
      />
      <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"
      />
      <br />
      <br />
      <HomeAddressStreet
          address="70 Prospect Ave"
          addressCont="Apt M18"
          city="West Chester"
          emphasis="none"
          homeId="8250263"
          homeUrl="https://powerhrg.com/"
          houseStyle="Colonial"
          state="PA"
          territory="PHL"
          zipcode="19382"
      />
    </div>
  )
}

export default HomeAddressStreetEmphasis

Modified

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

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

export default HomeAddressStreetModified

Link

Use the target prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any web/standard values or a custom string to specify your link target.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

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

export default HomeAddressStreetLink

Formatting

The state prop will always capitalize the state name, even if the data entered is in lowercase. For example, when state="pa" is passed, it will be rendered as "PA". When you pass preserveCase, the street address will be rendered exactly as entered, without automatic title capitalization.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

const HomeAddressStreetFormatting = (props) => {
  return (
    <HomeAddressStreet
        address="70 pRoSpEcT ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId="8250263"
        homeUrl="https://powerhrg.com/"
        preserveCase
        state="pa"
        territory="PHL"
        zipcode="19382"
    />
  )
}

export default HomeAddressStreetFormatting

Things To Avoid

Don’t change the design format (Bold fonts and light fonts), and keep the text stacked. Do not use on a singe line.

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