3.0.0






User

Default


Close
import React from "react"
import {User} from "../../"

function UserDefault() {
  return (
    <div class="pb--doc-demo-row">

      <div>
        <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation="vertical"
          align="center"
          size='lg'
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        />
      </div>

      <div>
        <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation="horizontal"
          align="left"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        />
      </div>

      <div>
        <User
          name='Anna Black'
          orientation="horizontal"
          align="left"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        />

        <br/>

        <User
          name='Anna Black'
          orientation="horizontal"
          align="left"
          avatar={true}
        />
      </div>

    </div>
  )
}

export default UserDefault;
With Territory


Close
import React from "react"
import {User} from "../../"

function UserWithTerritory() {
  return (
    <div class="pb--doc-demo-row">

      <div>
        <User
          name='Anna Black'
          territory='PHL'
          title='Remodeling Consultant'
          orientation="vertical"
          align="center"
          size='lg'
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        />
      </div>

      <div>
        <User
          name='Anna Black'
          territory='PHL'
          title='Remodeling Consultant'
          orientation="horizontal"
          align="left"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        />
      </div>

      <div>
        <User
          name='Anna Black'
          territory='PHL'
          title='Remodeling Consultant'
          orientation='horizontal'
          align='center'
          size='sm'
        />

        <br/>

        <User
          name='Anna Black'
          territory='PHL'
          title='Remodeling Consultant'
          orientation='horizontal'
          align='left'
          size='lg'
        />
      </div>

    </div>
  )
}

export default UserWithTerritory;
Text Only


Close
import React from "react"
import {User} from "../../"

function UserTextOnly() {
  return (
    <div class="pb--doc-demo-row">
      <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation='horizontal'
          align='center'
          size='lg'
      />
      <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation='horizontal'
          align='left'
      />
    </div> 
  )
}

export default UserTextOnly;
Horizontal Size


Close
import React from "react"
import {User} from "../../"

function UserDefault() {
  return (
    <div class="pb--doc-demo-row">
      <User
          name='Anna Black'
          title='Remodeling Consultant'
          size='sm'
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
      />

      <User
          name='Anna Black'
          title='Remodeling Consultant'
          size='md'
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
      />

      <User
          name='Anna Black'
          title='Remodeling Consultant'
          size='lg'
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
      />
    </div> 
  )
}

export default UserDefault;
Vertical Size


Close
import React from "react"
import {User} from "../../"

function UserVerticalSize() {
  return (
    <div>
      <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation='vertical'
          align='center'
          size='sm'
          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
      />
      <br/><br/>
      <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation='vertical'
          align='center'
          size='md'
          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
      />
      <br/><br/>
      <User
          name='Anna Black'
          title='Remodeling Consultant'
          orientation='vertical'
          align='center'
          size='lg'
          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
      />
    </div> 
  )
}

export default UserVerticalSize;