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.

Code Example

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

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

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

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

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.