Skip to main content

Divider

The <Divider> component adds a horizontal line with spacing and optional text. You can assign an optional id to it for linking to a specific anchor, such as #hello. It can also be used invisibly, serving solely as an anchor like #hidden.

Simple Divider​

Example of a simple <Divider> with a text.

<Divider text="Hello World"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat.

Result​


Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Example of a <Divider> with a text and the anchor link hello. Try jumping to #hello .

<Divider text="Hello World" id="hello"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat.

Result​


Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Divider without Text​

If you use <Divider> without text it will act as an invisible anchor that you can use to link to positions. Try jumping to #hidden .

<Divider id="hidden" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat.

Result​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

info

Do not set your own #anchor links in /src/pages/ as you might in plain HTML because they do not work as expected in React due to its handling of routing and navigation. Instead, use the <Divider> component.

Divider with Forced White Text​

Normally, the <Divider> component itself takes care of the color of the text depending on dark mode or light mode. However, you may find yourself in a situation where you need to force the color, e.g. if you use <Divider> within a dark <BackgroundWrapper>:

<BackgroundWrapper backgroundType="gradientDark">
  <BoundaryBox>
    <Divider text="Hello World" id="hello" white= {true}/>
  </BoundaryBox>
</BackgroundWrapper>

Result​


White Divider Text