DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Divider

A divider is a thin line that visually separates groups of content within a specific area of an application.

Overview
Code

Props

NameTypeDescriptionDefault
color'lightGrey' | 'mediumGrey' | 'darkGrey'Modifies the color of the divider.'mediumGrey'
decorativebooleanSpecifies whether the divider serves a purely decorative purpose or functions as a semantic separator for content. Additionally, it determines whether the divider is accessible to screen readers.true
orientation'horizontal' | 'vertical'The divider can be showed in horizontal or vertical.'horizontal'
weight'regular' | 'strong'Modifies the thickness of the divider.'regular'

Examples

Basic Usage

() => {
    return (
      <DxcInset space="var(--spacing-padding-xl)">
        <DxcFlex gap="var(--spacing-gap-ml)" direction="column">
          <DxcParagraph>
            Lorem i psum dolor sit amet, consectetur adipiscing elit.
            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </DxcParagraph>
          <DxcDivider />
          <DxcParagraph>
            Lorem i psum dolor sit amet, consectetur adipiscing elit.
            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </DxcParagraph>
        </DxcFlex>
      </DxcInset>
    );
  }

Vertical

() => {
    return (
      <DxcInset space="var(--spacing-padding-xl)">
        <DxcFlex gap="var(--spacing-gap-ml)" direction="row">
          <DxcParagraph>
            Lorem i psum dolor sit amet, consectetur adipiscing elit.
            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </DxcParagraph>
          <DxcDivider orientation="vertical" />
          <DxcParagraph>
            Lorem i psum dolor sit amet, consectetur adipiscing elit.
            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </DxcParagraph>
        </DxcFlex>
      </DxcInset>
    );
  }
On this page