## Feature Examples

### Direction
- description: Control how the divider is placed with the `direction` prop. - `horizontal` separates content into rows. - `vertical` separates content into columns.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  Horizontal:
  <Divider direction="horizontal" />
  Vertical:
  <StorybookComponents.Stack height="50px" justifyContent="space-between">
    <Divider direction="vertical" />
    <Divider direction="vertical" />
    <Divider direction="vertical" />
    <Divider direction="vertical" />
    <Divider direction="vertical" />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Skin
- description: Set the color of a divider with one of these values: - `light` is the default for common cases on light backgrounds. - `dark` is for common cases on dark backgrounds. - `standard` is for light blue backgrounds. - `warning` is for light orange backgrounds. - `destructive` is for light red backgrounds. - `success` is for light green backgrounds. - `premium` is for light purple backgrounds.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <Divider skin="light" />
  <Divider skin="dark" />
  <Divider skin="standard" />
  <Divider skin="warning" />
  <Divider skin="destructive" />
  <Divider skin="success" />
  <Divider skin="premium" />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Lists
- description: Separate entities from one another with a divider for an easy-to-read list.
- example:
```jsx
() => {
  const ListItem = ({ title, subtitle }) => {
    const [checked, setChecked] = React.useState(true);
    return (
      <Box align="space-between">
        <Box direction="vertical">
          <Text weight="normal">{title}</Text>
          <Text size="small" secondary>
            {subtitle}
          </Text>
        </Box>
        <Box gap="24px" verticalAlign="middle">
          <ToggleSwitch
            size="medium"
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
          <TextButton>Edit</TextButton>
        </Box>
      </Box>
    );
  };

  return (
    <Card>
      <Card.Header title="Default emails" />
      <Card.Divider />
      <Card.Content>
        <Box direction="vertical" gap="18px">
          <ListItem
            title="Confirmation"
            subtitle="Let guests know their spot is confirmed"
          />
          <Divider />
          <ListItem
            title="Reminder"
            subtitle="Send a friendly reminder when the event is coming up"
          />
          <Divider />
          <ListItem
            title="Cancellation"
            subtitle="Notify guests if this event is canceled"
          />
        </Box>
      </Card.Content>
    </Card>
  );
};
```

### Separated content
- description: Create a full-bleed divider to separate secondary content.
- example:
```jsx
<Card>
  <MarketingLayout
    title="Add sessions to get booked"
    description="Set when this service is offered and the staff who provide it."
    actions={<Button size="small">Add Sessions</Button>}
    size="tiny"
    image={
      <Box align="right">
        <Image
          transparent
          width="120px"
          height="120px"
          src="PromotionalBookingsUpgrade.svg"
        />
      </Box>
    }
  />
  <Divider />
  <Box padding="12px 30px">
    <Text size="tiny" skin="standard">
      You can also add sessions directly from your <a>Calendar</a>
    </Text>
  </Box>
</Card>;
```