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
Basic text divider
<text-divider>or</text-divider>In Forms
Common pattern for login/signup forms to separate primary and alternative actions.
Form with text divider
<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.
Section divider
<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.
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
<hr>— Horizontal rule without text<layout-stack>— Vertical stacking<form-field>— Form field wrapper