Patterns

/

Custom User Display

For a custom user display, you can use multiple kits to create a unique user experience. This pattern is designed to be flexible and adaptable to your needs.

Kits Used

Show Code

Fullscreen

Copy to Clipboard

import React from "react"; import { Flex, Avatar, Title, Body, Badge } from "playbook-ui"; export default function App() { return ( <Flex flexDirection="column"> <Avatar imageAlt="Tori Johnson Standing" imageUrl="https://randomuser.me/api/portraits/women/27.jpg" name="Tori Johnson" size="md" status="offline" /> <Flex alignItems="center" justifyContent="center"> <Title paddingRight="xs" text="Tori Johnson" size={4} /> <Badge text="inactive" variant="neutral" dark /> </Flex> <Body color="light"> <b>User Experience Designer</b> </Body> <Body color="light" text="PHL • User Experience" /> </Flex> ); }

import React from "react";
import { Flex, Avatar, Title, Body, Badge } from "playbook-ui";

export default function App() {
  return (
      <Flex flexDirection="column">
        <Avatar
          imageAlt="Tori Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/women/27.jpg"
          name="Tori Johnson"
          size="md"
          status="offline"
        />
        <Flex alignItems="center" justifyContent="center">
          <Title paddingRight="xs" text="Tori Johnson" size={4} />
          <Badge text="inactive" variant="neutral" dark />
        </Flex>
        <Body color="light">
          <b>User Experience Designer</b>
        </Body>
        <Body color="light" text="PHL • User Experience" />
      </Flex>
  );
}

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