Noora (0.81.4)
- 1.3.0

Line Divider

Separates adjacent content with an optional inline label.

LineDivider web component

Separates adjacent content with an optional inline label.

Setup 

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic dividers

Match the LiveView component with a plain divider and an inline label. 

<noora-line-divider></noora-line-divider>
<noora-line-divider text="OR"></noora-line-divider>

Text variations

Use the same text variations as the LiveView component. 

<noora-line-divider text="AND"></noora-line-divider>
<noora-line-divider text="Continue with"></noora-line-divider>
<noora-line-divider text="2"></noora-line-divider>
<noora-line-divider text="Alternative method"></noora-line-divider>

Attributes

Attribute Type or allowed values Default Description
text string None Sets the optional inline label.

Styling parts

Name Description
divider The divider.
text The inline label.