Horizontal Rules
Horizontal rules (<hr>) in Trongate CSS provide clean dividing lines to separate content sections. They're styled minimally by default but can be easily customized.
Default Styling
The basic horizontal rule is styled as a subtle gray line with consistent spacing:
Note that the border: 0 is used in combination with height and background to ensure consistent rendering across browsers.
Basic Usage
The code below demonstrates how to add a horizontal rule to your page:
Here's how it looks:
This is some content above the horizontal rule.
This is some content below the horizontal rule.
Customization Examples
Here are some common ways to customize horizontal rules:
Colored Rule Example
Here's the result (look closely and you'll notice it's using the --secondary color).
Thicker Rule Example
Shorter Rule with Center Alignment
Dotted Rule
Spacing Considerations
By default, horizontal rules include:
- 2em margin above and below
- 1px height for the line itself
- Full width of the container
You can adjust the margins using Trongate's margin utility classes like mt-1 or mb-2 if needed.
Here's an example of some code that use margin utilities:
Default spacing:
Reduced top margin (mt-1):
Increased bottom margin (mb-3):
Summary
Trongate CSS horizontal rules provide:
- Clean, minimal default styling
- Consistent cross-browser rendering
- Easy customization options
- Proper vertical spacing
Use horizontal rules to create visual breaks between content sections while maintaining your site's design aesthetics.
We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.
Share your thoughts in the Documentation Feedback.