Skip to main content
The divider component creates a horizontal line or text separator to visually divide content sections on a page.

​
Basic Usage

SELECT 'divider' AS component;
This creates a simple horizontal line.

​
Properties

​
contents
text
Text to display in the divider. If omitted, creates a plain horizontal line.
​
position
text
Text alignment within the divider: left, center (default), or right
​
color
color
Text color
​
bold
boolean
Make the text bold
​
italics
boolean
Make the text italic
​
underline
boolean
Underline the text
​
size
integer
Font size from 1 (largest) to 6 (smallest). Maps to HTML heading sizes.
​
link
url
Make the divider text clickable with this URL
​
class
text
Custom CSS class for styling

​
Examples

​
Basic Horizontal Line

SELECT 'text' AS component, 'Section 1' AS contents;

SELECT 'divider' AS component;

SELECT 'text' AS component, 'Section 2' AS contents;

​
Divider with Text

SELECT 'text' AS component, 'Content above the divider' AS contents;

SELECT 'divider' AS component, 'OR' AS contents;

SELECT 'text' AS component, 'Content below the divider' AS contents;

​
Centered Text Divider

SELECT 'divider' AS component,
       'Continue Reading' AS contents,
       'center' AS position;

​
Left-Aligned Divider

SELECT 'divider' AS component,
       'Chapter 1' AS contents,
       'left' AS position;

​
Right-Aligned Divider

SELECT 'divider' AS component,
       'End of Section' AS contents,
       'right' AS position;

​
Colored Divider

SELECT 'divider' AS component,
       'Important Section' AS contents,
       'red' AS color;

​
Bold Divider

SELECT 'divider' AS component,
       'Key Information' AS contents,
       true AS bold,
       'blue' AS color;

​
Large Divider Text

SELECT 'divider' AS component,
       'Part II' AS contents,
       2 AS size,
       true AS bold;

SELECT 'divider' AS component,
       'View More Articles' AS contents,
       '/articles.sql' AS link,
       'blue' AS color;

​
Styled Divider

SELECT 'divider' AS component,
       'Featured Content' AS contents,
       'center' AS position,
       'purple' AS color,
       true AS bold,
       true AS underline,
       3 AS size;

​
Section Dividers

-- Introduction
SELECT 'text' AS component,
       '## Introduction' AS contents_md;
SELECT 'text' AS component,
       'This is the introduction section.' AS contents;

SELECT 'divider' AS component,
       'Background' AS contents,
       'left' AS position;

-- Background
SELECT 'text' AS component,
       'Background information here.' AS contents;

SELECT 'divider' AS component,
       'Conclusion' AS contents,
       'left' AS position;

-- Conclusion
SELECT 'text' AS component,
       'Final thoughts and conclusions.' AS contents;

​
Multiple Dividers

SELECT 'text' AS component, 'User Information' AS contents;

SELECT 'divider' AS component;

SELECT 'text' AS component, 'Account Details' AS contents;

SELECT 'divider' AS component;

SELECT 'text' AS component, 'Billing Information' AS contents;

SELECT 'divider' AS component;

SELECT 'text' AS component, 'Preferences' AS contents;

​
Dividers in Forms

SELECT 'form' AS component;

SELECT 'name' AS name, 'Full Name' AS label;
SELECT 'email' AS name, 'email' AS type;

SELECT 'divider' AS component, 'Address Information' AS contents;

SELECT 'street' AS name, 'Street Address' AS label;
SELECT 'city' AS name, 'City' AS label;
SELECT 'zipcode' AS name, 'ZIP Code' AS label;
Note: Form dividers work better with the header type: 
SELECT 'form' AS component;

SELECT 'name' AS name, 'Full Name' AS label;
SELECT 'email' AS name, 'email' AS type;

SELECT 'header' AS type, 'Address Information' AS label;

SELECT 'street' AS name, 'Street Address' AS label;
SELECT 'city' AS name, 'City' AS label;

​
Content Separation

SELECT 'card' AS component;
SELECT 'Product 1' AS title, 'Description 1' AS description;
SELECT 'Product 2' AS title, 'Description 2' AS description;

SELECT 'divider' AS component,
       'More Products' AS contents,
       'center' AS position,
       'blue' AS color;

SELECT 'card' AS component;
SELECT 'Product 3' AS title, 'Description 3' AS description;
SELECT 'Product 4' AS title, 'Description 4' AS description;

​
Use Cases

  • Separate logical sections of content
  • Create visual breaks between different components
  • Add labeled section headers
  • Improve content readability
  • Organize long pages into digestible chunks
  • Create chapter or article divisions

​
Styling Tips

  • Use plain dividers (no text) for subtle separation
  • Add text to dividers for labeled sections
  • Use colors sparingly to highlight important divisions
  • Combine with other formatting options (bold, size) for emphasis
  • Left-align section headers, center call-to-actions
  • Keep divider text short and descriptive
  • text - For paragraphs and formatted text
  • form - Use header type for form section dividers
  • card - Cards provide built-in visual separation

Build docs developers (and LLMs) love

Get started for freeTalk to us