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.

Rails
React

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 '../../'

const HomeAddressStreetDefault = () => {
  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.

Code Example

import React from 'react'
import { HomeAddressStreet } from '../../'

const HomeAddressStreetEmphasis = () => {
  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"
      />
    </div>
  )
}

export default HomeAddressStreetEmphasis

Modified

Code Example

import React from 'react'
import { HomeAddressStreet } from '../../'

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

export default HomeAddressStreetModified

Dark

Code Example

import React from 'react'
import { HomeAddressStreet } from '../../'

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

export default HomeAddressStreetDark

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.

5.2.0

Home Address Street

Things To Avoid