Does Webflow have a <code><hr></code> feature available?
TL;DR
- Use a styled Div Block with 1–2px height, 100% width, and background color to mimic an
<hr>. - Alternatively, add a raw
<hr>in an Embed element and style it with custom CSS if needed.
Webflow does not have a dedicated <hr> element (horizontal rule) as a drag-and-drop component, but you can easily replicate its functionality.
1. Use a Styled Div Block as an <hr>
- Drag a Div Block into your project where you want the horizontal line.
- Set the Height to 1–2px, and Width to 100% (or a specific width).
- Apply a background color to mimic the line.
- This functions effectively as an
<hr>and allows full custom styling.
2. Add a Custom <hr> Element via Embed
- Drag an Embed element onto the page.
- Type in
<hr>inside the embed to insert a raw horizontal rule. - Style control is limited unless you apply custom CSS in the Page Settings > Custom Code section or through a class.
3. Style Options for Custom HR
- Give the styled div margins or padding above and below for spacing.
- You can also add border styles (e.g., border-bottom: 1px solid #ccc) instead of background color.
Summary
Webflow doesn’t have a native <hr> component, but you can easily replicate or embed it using a styled Div Block or Custom Embed code for a horizontal line.