Develop

Styles

A Divider is a visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout.

<div class="tng-divider"></div>

Schemes

The divider supports different fill colors. The primary variant has a thicker stroke (2px).

<div class="tng-divider"></div>
<div class="tng-divider is-primary"></div>

<div class="tng-divider on-contast"></div>

Container Pattern

Use .tng-has-dividers on a container to add border dividers between child elements.

<ul class="tng-has-dividers" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ul>

• First item
• Second item
• Third item

Add .has-edge to also draw dividers on the container’s leading and trailing edges.

<ol class="tng-has-dividers has-edge" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ol>

1. First item
2. Second item
3. Third item

Orientation

Use .is-inline for vertical dividers. The divider will stretch to fill the available height.

<div class="tng-divider is-inline"></div>
<div class="tng-divider is-inline is-primary"></div>

Modules

Divider under heading

<header class="tng-stack">
  <h2 class="mbe-4xl | tng-text-title is-5">Title Heading</h2>
  <div class="tng-divider is-primary" style="inline-size: 40px"></div>
</header>

Title Heading

Vertical divider in nav menu

<nav class="tng-group gap-2xl">
  <a href="#" class="tng-link">Home</a>
  <a href="#" class="tng-link">Products</a>
  <div class="tng-divider is-inline" role="separator"></div>
  <a href="#" class="tng-link">Account</a>
  <a href="#" class="tng-link">Sign out</a>
</nav>

Home Products

Account Sign out

React

Import the Divider component from @tmedxp/react-components.

Properties

Prop	Type	Description	Optional
orientation	Orientation	Defines the divider orientation: 'horizontal' | 'vertical', 'horizontal' by default	✅
fillVariant	FillVariant	Defines the layout variant: 'primary'	✅
testId	string	Defines the test id attribute value	✅
as	ValidHTMLTags	Defines the html tag to use: 'hr' | 'div', 'div' by default	✅
className	ClassValue	Custom class names applied to the divider element	✅

Example

import { Divider } from '@tmedxp/react-components';

const DividerExample = () => {
  return (
    <Divider
      orientation="vertical"
      fillVariant="primary"
      className="custom-divider"
    />
  );
};

export { DividerExample };