Divider

Overview (v1)

Divider

The divider component is used to provide strict differentiation between two or more components. It is a simple line that can be used to separate content, especially in accordion, expander, paper card or row components, to improve readability and organization.

The divider component is a versatile and essential element in web design, helping to create a clear visual hierarchy and guide users through the content.

Default variation

<oc-divider-v1></oc-divider-v1>

Configuration

The divider component is available in the main styling variants solid or dashed and can have a horizontal or vertical orientation. The default variant is solid and horizontal, which is the most commonly used configuration.

This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the divider component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Divider UX documentation for detailed user experience guidelines.

Configuration (v1)

Divider configuration

Configure the divider component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

<div style="height: 200px">
<oc-divider-v1 ></oc-divider-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Divider v1 API

API: <oc-divider-v1> (DividerV1)

The oc-divider-v1 component is used to provide strict differentiation between two or more components. It is a simple line that can be used to separate content, especially in accordion, expander, paper card, or row components, to improve readability and organization.

Attributes / properties

Events

Variations (v1)

Variations

Listed below are the most common variations of the divider component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-divider-variations--default · tags: components, divider, 1, variations

Default Divider

<oc-divider-v1></oc-divider-v1>

Configurator Only

Story: components-divider-variations--configurator-only · tags: components, divider, 1, variations

Default Divider with custom height, so vertical orientation can be seen on the component configurator

<div style="height: 200px">
<oc-divider-v1 ></oc-divider-v1>

{
  args: {},
  tags: ["!dev"],
  render: args => {
    return html`
      <div style="height: 200px">
        <oc-divider-v1 ${spread(args)}></oc-divider-v1>
      </div>
    `;
  }
}

Default Vertical

Story: components-divider-variations--default-vertical · tags: components, divider, 1, variations

Solid Divider in vertical orientation

Args: orientation=vertical

<div style="height: 200px">
<oc-divider-v1 orientation="vertical"></oc-divider-v1>

{
  args: {
    orientation: "vertical"
  },
  render(args) {
    return html`
      <div style="height: 200px">
        <oc-divider-v1 ${spread(args)}></oc-divider-v1>
      </div>
    `;
  }
}

Dashed

Story: components-divider-variations--dashed · tags: components, divider, 1, variations

Dashed Divider

Args: variant=dashed

<oc-divider-v1 variant="dashed"></oc-divider-v1>

Demo: Divider in several components

Story: components-divider-variations--demo-divider-in-several-components · tags: components, divider, 1, variations

Demo: Divider in several components

<h1>Solid Variant</h1>
<br />
<div style="display: flex; gap: 16px; flex-wrap: wrap">
  <!-- Card w/ Divider -->
  <div style="width: 312px">
    <p>Card with Divider</p>
    <oc-card-v2>
      <div style="padding: 8px">
        <oc-placeholder-v1 variant="text" style="height: 178px; --border-radius: 8px">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
        <oc-divider-v1 class="oc-my-50"></oc-divider-v1>
        <oc-button-v1 variant="tertiary">Label</oc-button-v1>
      </div>
    </oc-card-v2>
  </div>

  <!-- Block w/ divider (horizontal) -->
  <div>
    <p>Block with Divider (horizontal)</p>
    <div class="oc-block-v1">
      <div style="display: flex; flex-direction: column; gap: 8px">
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
        <oc-divider-v1></oc-divider-v1>
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
      </div>
    </div>
  </div>
  <!-- Block w/ divider (vertical) -->
  <div>
    <p>Block with Divider (vertical)</p>
    <div class="oc-block-v1">
      <div style="display: flex; gap: 8px">
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
        <oc-divider-v1 orientation="vertical"></oc-divider-v1>
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
      </div>
    </div>
  </div>
</div>
<br />
<br />
<h1>Dashed Variant</h1>
<br />
<div style="display: flex; gap: 16px; flex-wrap: wrap">
  <!-- Card w/ Divider -->
  <div style="width: 312px">
    <p>Card with Divider</p>
    <oc-card-v2>
      <div style="padding: 8px">
        <oc-placeholder-v1 variant="text" style="height: 178px; --border-radius: 8px">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
        <oc-divider-v1 variant="dashed" class="oc-my-50"></oc-divider-v1>
        <oc-button-v1 variant="tertiary">Label</oc-button-v1>
      </div>
    </oc-card-v2>
  </div>

  <!-- Block w/ divider (horizontal) -->
  <div>
    <p>Block with Divider (horizontal)</p>
    <div class="oc-block-v1">
      <div style="display: flex; flex-direction: column; gap: 8px">
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
        <oc-divider-v1 variant="dashed"></oc-divider-v1>
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
      </div>
    </div>
  </div>
  <!-- Block w/ divider (vertical) -->
  <div>
    <p>Block with Divider (vertical)</p>
    <div class="oc-block-v1">
      <div style="display: flex;" class="oc-gap-50">
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
        <oc-divider-v1 orientation="vertical" variant="dashed"></oc-divider-v1>
        <oc-placeholder-v1 variant="text" style="height: 88px;">
          DETACH TO REPLACE CONTENT</oc-placeholder-v1
        >
      </div>
    </div>
  </div>
</div>

{
  name: "Demo: Divider in several components",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render() {
    return html`
      <h1>Solid Variant</h1>
      <br />
      <div style="display: flex; gap: 16px; flex-wrap: wrap">
        <!-- Card w/ Divider -->
        <div style="width: 312px">
          <p>Card with Divider</p>
          <oc-card-v2>
            <div style="padding: 8px">
              <oc-placeholder-v1 variant="text" style="height: 178px; --border-radius: 8px">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
              <oc-divider-v1 class="oc-my-50"></oc-divider-v1>
              <oc-button-v1 variant="tertiary">Label</oc-button-v1>
            </div>
          </oc-card-v2>
        </div>

        <!-- Block w/ divider (horizontal) -->
        <div>
          <p>Block with Divider (horizontal)</p>
          <div class="oc-block-v1">
            <div style="display: flex; flex-direction: column; gap: 8px">
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
              <oc-divider-v1></oc-divider-v1>
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
            </div>
          </div>
        </div>
        <!-- Block w/ divider (vertical) -->
        <div>
          <p>Block with Divider (vertical)</p>
          <div class="oc-block-v1">
            <div style="display: flex; gap: 8px">
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
              <oc-divider-v1 orientation="vertical"></oc-divider-v1>
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
            </div>
          </div>
        </div>
      </div>
      <br />
      <br />
      <h1>Dashed Variant</h1>
      <br />
      <div style="display: flex; gap: 16px; flex-wrap: wrap">
        <!-- Card w/ Divider -->
        <div style="width: 312px">
          <p>Card with Divider</p>
          <oc-card-v2>
            <div style="padding: 8px">
              <oc-placeholder-v1 variant="text" style="height: 178px; --border-radius: 8px">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
              <oc-divider-v1 variant="dashed" class="oc-my-50"></oc-divider-v1>
              <oc-button-v1 variant="tertiary">Label</oc-button-v1>
            </div>
          </oc-card-v2>
        </div>

        <!-- Block w/ divider (horizontal) -->
        <div>
          <p>Block with Divider (horizontal)</p>
          <div class="oc-block-v1">
            <div style="display: flex; flex-direction: column; gap: 8px">
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
              <oc-divider-v1 variant="dashed"></oc-divider-v1>
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
            </div>
          </div>
        </div>
        <!-- Block w/ divider (vertical) -->
        <div>
          <p>Block with Divider (vertical)</p>
          <div class="oc-block-v1">
            <div style="display: flex;" class="oc-gap-50">
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
              <oc-divider-v1 orientation="vertical" variant="dashed"></oc-divider-v1>
              <oc-placeholder-v1 variant="text" style="height: 88px;">
                DETACH TO REPLACE CONTENT</oc-placeholder-v1
              >
            </div>
          </div>
        </div>
      </div>
    `;
  }
}