Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Divider

Guidance Code Accessibility

Component demo

Interactive example

Coffee options

Web component React
StackBlitz
Show full code 
<ic-divider></ic-divider>
<ic-dividerborder-style="dashed"></ic-divider>
<ic-dividerlabel="Coffee options"label-placement="center"></ic-divider>

Divider details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property borderStyle
Attribute border-style

The line style of the divider.

type: IcDividerStyles - "dashed" | "solid" | undefined
"solid"
Property label
Attribute label

The label for the divider. The label placement will need to be set for the label to be displayed correctly.

type: string - string | undefined
Property labelPlacement
Attribute label-placement

The position the label is placed on the divider.Left andright placement is only applicable when orientation is set tohorizontal .Top andbottom placement is only applicable when orientation is set tovertical .Center placement is applicable for both orientations.

type: IcDividerLabelPlacement - "bottom" | "center" | "left" | "right" | "top" | undefined
"center"
Property monochrome
Attribute monochrome

Iftrue , the divider will be displayed in a grey colour.

type: boolean - boolean | undefined
false
Property orientation
Attribute orientation

The orientation of the divider.

type: IcOrientation - "horizontal" | "vertical" | undefined
"horizontal"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode | IcBrandForeground - "dark" | "default" | "inherit" | "light" | undefined
"inherit"
Property weight
Attribute weight

The thickness of the divider.

type: IcDividerWeights - "medium" | "thick" | "thin" | "very-thick" | undefined
"thin"
Property borderStyle
Attribute border-style

The line style of the divider.

type: IcDividerStyles - "dashed" | "solid" | undefined
Default: "solid"
Property label
Attribute label

The label for the divider. The label placement will need to be set for the label to be displayed correctly.

type: string - string | undefined
Property labelPlacement
Attribute label-placement

The position the label is placed on the divider.Left andright placement is only applicable when orientation is set tohorizontal .Top andbottom placement is only applicable when orientation is set tovertical .Center placement is applicable for both orientations.

type: IcDividerLabelPlacement - "bottom" | "center" | "left" | "right" | "top" | undefined
Default: "center"
Property monochrome
Attribute monochrome

Iftrue , the divider will be displayed in a grey colour.

type: boolean - boolean | undefined
Default: false
Property orientation
Attribute orientation

The orientation of the divider.

type: IcOrientation - "horizontal" | "vertical" | undefined
Default: "horizontal"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode | IcBrandForeground - "dark" | "default" | "inherit" | "light" | undefined
Default: "inherit"
Property weight
Attribute weight

The thickness of the divider.

type: IcDividerWeights - "medium" | "thick" | "thin" | "very-thick" | undefined
Default: "thin"

CSS Custom Properties

Name Description
--ic-divider-horizontal-width The width of a horizontal divider. The default value is `inherit`.
--ic-divider-label-width The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.
--ic-divider-vertical-height The height of a vertical divider. The default value is `inherit`.
--ic-divider-horizontal-width The width of a horizontal divider. The default value is `inherit`.
--ic-divider-label-width The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.
--ic-divider-vertical-height The height of a vertical divider. The default value is `inherit`.

Variants

Weight

Interactive example

Coffee options

Coffee options

Web component React
StackBlitz
Show full code 
<ic-dividerweight="thin"></ic-divider>
<ic-dividerweight="medium"></ic-divider>
<ic-dividerweight="thick"></ic-divider>
<ic-dividerweight="very-thick"></ic-divider>
<ic-divider
weight="medium"
label="Coffee options"
label-placement="center"
></ic-divider>
<ic-divider
weight="thick"
label="Coffee options"
label-placement="center"
></ic-divider>

Border style

Interactive example

Web component React
StackBlitz
Show full code 
<ic-dividerborder-style="solid"></ic-divider>
<ic-dividerborder-style="dashed"></ic-divider>

Vertical

Interactive example

Web component React
StackBlitz
Show full code 
<ic-dividerorientation="vertical"></ic-divider>
<ic-dividerorientation="vertical"border-style="dashed"></ic-divider>
<ic-dividerorientation="vertical"weight="thick"></ic-divider>
<ic-divider
orientation="vertical"
border-style="dashed"
weight="thick"
></ic-divider>

Label placement (horizontal)

Interactive example

Coffee options

Coffee options

Coffee options

Web component React
StackBlitz
Show full code 
<ic-dividerlabel="Coffee options"label-placement="left"></ic-divider>
<ic-dividerlabel="Coffee options"label-placement="center"></ic-divider>
<ic-dividerlabel="Coffee options"label-placement="right"></ic-divider>

Label placement (vertical)

Interactive example

Coffee options

Coffee options

Coffee options

Web component React
StackBlitz
Show full code 
<ic-divider
label="Coffee options"
orientation="vertical"
label-placement="top"
></ic-divider>
<ic-divider
label="Coffee options"
orientation="vertical"
label-placement="center"
></ic-divider>
<ic-divider
label="Coffee options"
orientation="vertical"
label-placement="bottom"
></ic-divider>

Slotted label

Interactive example

Coffee options
Web component React
StackBlitz
Show full code 
<ic-dividerlabel-placement="center">
<ic-typographystyle="width: max-content;"variant="label"slot="label">
<span>Coffee options</span>
</ic-typography>
</ic-divider>

Theme

Interactive example

Coffee options

Coffee options

Web component React
StackBlitz
Show full code 
<ic-dividertheme="light"></ic-divider>
<ic-divider
theme="light"
label="Coffee options"
label-placement="center"
></ic-divider>
<ic-dividertheme="dark"></ic-divider>
<ic-divider
theme="dark"
label="Coffee options"
label-placement="center"
></ic-divider>

Monochrome

Interactive example

Coffee options

Coffee options

Web component React
StackBlitz
Show full code 
<ic-dividertheme="light"monochrome="true"></ic-divider>
<ic-divider
theme="light"
monochrome="true"
label="Coffee options"
label-placement="center"
></ic-divider>
<ic-dividertheme="dark"monochrome="true"></ic-divider>
<ic-divider
theme="dark"
monochrome="true"
label="Coffee options"
label-placement="center"
></ic-divider>
Last reviewed 2 December 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Divider - Intelligence Community Design System