Divider

Divider is a light gray 1px horizontal or vertical line which groups and divides content in lists and layouts.

Discover ideas

Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own.

Create Pins

Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online.

Usage guidelines

Dividers should be used to bring clarity and structure to a layout. Primarily, Dividers help to separate groups of related elements or break up dense content.

Don't

Dividers shouldn't be used if elements can be separated using white space.

Best practices

Discover ideas

Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own.

Create Pins

Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online.

Use whitespace primarily to separate groups of related content.

Discover ideas

Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own.

Create Pins

Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online.

Don't

Overuse Dividers as this can cause them to lose their value and create unnecessary noise.

Get started

Add a Pinterest widget

Upgrade the Pinterest App

Interact with Idea Pins

Manage Account

Edit notification settings

Two-factor authentication

Use the default Gestalt Divider - 1px gray line.

Get started

Add a Pinterest widget

Upgrade the Pinterest App

Interact with Idea Pins

Manage Account

Edit notification settings

Two-factor authentication

Don't

Create your own divider with a different color or stroke style.

Home decor

Plants

Use horizontal Dividers from edge to edge.

Home decor

Plants

Don't

Inset Divider in a way that causes it to be free-floating or separated from content.

Public profile

First name

Last name

Use Dividers to separate collections of content or create the appearance of containers.

Our mission

Pinterest's mission is to bring everyone the inspiration to create a life they love.

Don't

Use Dividers for decoration or to separate grouped content.

Accessibility

Divider is not focusable and is treated as decorative. Screen readers on tab navigation don't announce Dividers but do announce them on left/right quick navigation.

Localization

If you are aligning Divider to content, ensure that it switches sides according to the content's start-end alignment.

Variants

Orientation

You can use this component as a vertical divider between two elements. Placing it within a Flex layout with a direction of row will shift Divider to a vertical orientation.

Discover ideas

Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own.

Create Pins

Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online.

function Example() {
  const Block = ({ title, text }) => (
    <Flex direction="column" gap={2}>
      <Heading accessibilityLevel="none" size="sm">{title}</Heading>
      <Text size="md">{text}</Text>
    </Flex>
  );

  return (
    <Flex direction="column" gap={10}>
      <Block title="Discover ideas" text="Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own." />
      <Divider />
      <Block title="Create Pins" text="Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online." />
    </Flex>
  );
}

function Example() {
  const Block = ({ title, text }) => (
    <Flex direction="column" gap={2}>
      <Heading accessibilityLevel="none" size="sm">{title}</Heading>
      <Text size="md">{text}</Text>
    </Flex>
  );
  return (
    <Flex direction="column" gap={10}>
      <Block title="Discover ideas" text="Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own." />
      <Divider />
      <Block title="Create Pins" text="Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online." />
    </Flex>
  );
}

Horizontal

Discover ideas

Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own.

Create Pins

Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online.

function Example() {
  const Block = ({ title, text }) => (
    <Flex direction="column" gap={2}>
      <Heading accessibilityLevel="none" size="sm">{title}</Heading>
      <Text size="md">{text}</Text>
    </Flex>
  );

  return (
    <Flex>
      <Box paddingX={4}>
        <Block title="Discover ideas" text="Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own." />
      </Box>
      <Divider />
      <Box paddingX={4}>
        <Block title="Create Pins" text="Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online." />
      </Box>
    </Flex>
  );
}

function Example() {
  const Block = ({ title, text }) => (
    <Flex direction="column" gap={2}>
      <Heading accessibilityLevel="none" size="sm">{title}</Heading>
      <Text size="md">{text}</Text>
    </Flex>
  );
  return (
    <Flex>
      <Box paddingX={4}>
        <Block title="Discover ideas" text="Use the search bar to discover ideas, people and trends. Explore suggested topics or search for topics of your own." />
      </Box>
      <Divider />
      <Box paddingX={4}>
        <Block title="Create Pins" text="Upload an image from your computer or mobile device to create a Pin. You can also create Pins from images you find online." />
      </Box>
    </Flex>
  );
}

Vertical

Edit page on GitHub