OTTODesign System

Code

Divider

Storybook group: Components · Sidebar path: Components/Divider · Extracted 28.09.2026

Version Tag Status API
v1 <oc-divider-v1> Stable, allowed for generation DividerV1

Overview (v1)

Source: ./src/components/divider/v1/Overview.mdx

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

Story Default:

<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)

Source: ./src/components/divider/v1/Configuration.mdx

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.

Story Configurator Only:

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

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

API v1

Source: ./src/components/divider/v1/DividerV1.API.g.mdx

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
Attribute Type Default Required Description
variant "solid" | "dashed" "solid" no Sets the visual style of the divider.
orientation "horizontal" | "vertical" "horizontal" no The orientation of the divider.

Note: The vertical orientation will only work if the parent element has a height set.
in-flow boolean false no Determines whether the divider participates in normal document flow. This makes it relatively positioned and achieves a real 1px height.
Events
Event Detail type Description
oc-property-change OcDividerV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations (v1)

Source: ./src/components/divider/v1/Variations.mdx

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>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  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>
</div>
Story source (TypeScript, verbatim from Storybook)
{
  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>
Story source (TypeScript, verbatim from Storybook)
{
  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>
    `;
  }
}