text-divider

Horizontal divider with centered text. Use to separate content sections or provide alternative action labels.

Overview

The text-divider element creates a horizontal line with centered text. Common uses include separating form sections ("or"), chapter markers, and content transitions.

Attributes

This element has no custom attributes. It's styled purely through CSS.

Basic Usage

or

Code

<text-divider>or</text-divider>

In Forms

Common pattern for login/signup forms to separate primary and alternative actions.

or continue with

Code

<form> <layout-stack data-layout-gap="m"> <form-field> <label for="email">Email</label> <input type="email" id="email" name="email" required /> </form-field> <button type="submit">Continue with email</button> <text-divider>or continue with</text-divider> <layout-cluster data-layout-justify="center"> <button type="button">Google</button> <button type="button">GitHub</button> </layout-cluster> </layout-stack> </form>

Content Sections

Use to mark transitions between content sections.

This is the introduction to our guide. It covers the basics you need to know before getting started.

Chapter 1

Now we dive into the details. This chapter covers installation and setup procedures.

Code

<article> <h2>Getting Started</h2> <p>Introduction content...</p> <text-divider>Chapter 1</text-divider> <p>Chapter content...</p> </article>

Variations

The text content can be anything meaningful for the context.

or
continue reading
2024
* * *

CSS Implementation

text-divider { display: flex; align-items: center; gap: var(--size-m); color: var(--color-text-muted); font-size: var(--font-size-s); &::before, &::after { content: ''; flex: 1; block-size: 1px; background: var(--color-border); } }

Accessibility

  • The divider is purely decorative - screen readers will read the text content naturally
  • Avoid using the divider for critical navigation or structural purposes
  • Keep text concise and meaningful

Related Elements