Building Blocks

/

Notification Banner

Use notification banners to communicate important information to users.

Kits Used

Show Code

Fullscreen

Copy to Clipboard

import React from "react"; import { Body, Card, Flex, Icon, Title } from "playbook-ui"; const NotificationBanner = (props) => { return ( <> <Flex orientation="column" gap="md"> {/* Card #1 - Success */} <Card background="success_subtle" highlight={{ color: 'success', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" > <Icon icon="check" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Great Job!" /> <Body text="This is body text explaining what was so great!" /> </Flex> </Flex> </Card> {/* Card #2 - Error */} <Card background="error_subtle" highlight={{ color: 'error', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" > <Icon icon="exclamation-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Oh No!" /> <Body text="This is body text explaining what went wrong!" /> </Flex> </Flex> </Card> {/* Card #3 - Warning */} <Card background="warning_subtle" highlight={{ color: 'warning', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" > <Icon icon="exclamation-triangle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Watch Out!" /> <Body text="This is body text explaining what to watch out for!" /> </Flex> </Flex> </Card> {/* Card #4 - Neutral: Showing Long Text with No Width Restriction */} <Card background="neutral_subtle" highlight={{ color: 'neutral', position: 'side' }} padding="xs" paddingRight="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" > <Icon icon="info-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Some information" /> <Body text="This is body text explaining something for you that is long but has no width restriction so will span the width of the page!" /> </Flex> </Flex> </Card> {/* Card #5 - Info: Showing Long Text with Width Restriction */} <Card background="info_subtle" highlight={{ color: 'info', position: 'side' }} padding="xs" paddingRight="sm" width="sm" > <Flex paddingLeft="xxs" paddingTop="xxs" > <Flex paddingRight="xs" > <Icon icon="info-circle" size="lg" /> </Flex> <Flex gap="xxs" orientation="column" > <Title size={4} text="Some information!" /> <Body text="This is body text explaining something for you that is long and wraps to the next line because the card has a width restriction in place." /> </Flex> </Flex> </Card> {/* End of example stop here if copy+pasting */} </Flex> </> ); } export default NotificationBanner;

import React from "react";
import { Body, Card, Flex, Icon, Title } from "playbook-ui";

const NotificationBanner = (props) => {

  return (
    <>
    <Flex orientation="column" gap="md">
      {/* Card #1 - Success */}
      <Card
          background="success_subtle"
          highlight={{ color: 'success', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
          >
            <Icon
                icon="check"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Great Job!"
            />
            <Body text="This is body text explaining what was so great!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #2 - Error */}
      <Card
          background="error_subtle"
          highlight={{ color: 'error', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
          >
            <Icon
                icon="exclamation-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Oh No!"
            />
            <Body text="This is body text explaining what went wrong!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #3 - Warning */}
      <Card
          background="warning_subtle"
          highlight={{ color: 'warning', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
          >
            <Icon
                icon="exclamation-triangle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Watch Out!"
            />
            <Body text="This is body text explaining what to watch out for!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #4 - Neutral: Showing Long Text with No Width Restriction  */}
      <Card
          background="neutral_subtle"
          highlight={{ color: 'neutral', position: 'side' }}
          padding="xs"
          paddingRight="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
          >
            <Icon
                icon="info-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Some information"
            />
            <Body text="This is body text explaining something for you that is long but has no width restriction so will span the width of the page!" />
          </Flex>
        </Flex>
      </Card>
      {/* Card #5 - Info: Showing Long Text with Width Restriction  */}
      <Card
          background="info_subtle"
          highlight={{ color: 'info', position: 'side' }}
          padding="xs"
          paddingRight="sm"
          width="sm"
      >
        <Flex
            paddingLeft="xxs"
            paddingTop="xxs"
        >
          <Flex
              paddingRight="xs"
          >
            <Icon
                icon="info-circle"
                size="lg"
            /> 
          </Flex>
          <Flex
              gap="xxs"
              orientation="column"
          >
            <Title
                size={4}
                text="Some information!"
            />
            <Body text="This is body text explaining something for you that is long and wraps to the next line because the card has a width restriction in place." />
          </Flex>
        </Flex>
      </Card>
      {/* End of example stop here if copy+pasting */}
    </Flex>
    </>
  );
}

export default NotificationBanner;

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

Github

Connect Chat