OLYSENSE Design System

<div class="flex items-center h-32">
  <span>First</span>
  <ods-divider vertical></ods-divider>
  <span>Middle</span>
  <ods-divider vertical></ods-divider>
  <span>Last</span>
</div>

import { OdsDivider } from '@ods/components/react.divider';

const Example = () => {
  return (
    <div className="flex items-center h-32">
      <span>First</span>
      <OdsDivider vertical></OdsDivider>
      <span>Middle</span>
      <OdsDivider vertical></OdsDivider>
      <span>Last</span>
    </div>
  )
}

export default Example;

Add the vertical attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.

First

Middle

Last

<div class="w-full">
  <ods-divider></ods-divider>
</div>

Importing

import '@ods/components/web.divider';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Reflects	Type	Default
vertical		boolean	false

Divider

Examples

Horizontal

Vertical

Importing

Properties