Horizontal Line Widget

Horizontal Line Widget

Last updated 03.29.24

The Horizontal Line Widget is a plug and play component designed to add a horizontal solid, dashed or dotted line to the page. It’s styled to look great no matter what your content. This document goes over recommended images sizes and configuration settings.

  • Built to display a horizontal line of various styles, widths and thicknesses
  • Can be in brand or custom color
  • Has a variety of margin and padding settings

Related Links & Videos

Add Horizontal Line Widget to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Horizontal Line widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Horizontal Line Properties

5. In the Horizontal Line properties pop up, adjust various settings including line thickness, end cap, line type, color, length, alignment, margin and padding.

6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to reposition the Horizontal Line Widget

Hover over the Horizontal Line widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Horizontal Line Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
Line ThicknessSelect line thickness from the menu. Below is list of thicknesses:
• Small (Default)
• Medium
• Large
Line End CapSelect line end cap style from the menu. Below is list of styles:
• Square (Default)
• Rounded
Line TypeSelect line type from the menu. Below is list of types:
• Solid Line – Single (Default)
• Solid Line — Double
• Dashed Line
• Dotted Line
Dash or Dot GapSelect gap size to appear between dashes or dots from the menu. Below is list of types:
• Normal (Default)
• Wide
• Extra Wide
Line Color
Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Line colors that can be selected:
• Default (None)
• Primary
• Primary Color - Light
• Primary Color - Dark
• Secondary
• Secondary - Light
• Secondary - Dark
• White
• Light Gray
• Medium Gray
• Dark Gray
• Black
• Custom (enter color in hex format – ex. #2c6090)
Line Length
Select line length from the menu. Below is list of lengths:
• Full Width
• 25%
• 50%
• 75%
AlignmentSelect line alignment from the menu. Below is list of alignments:
• Center
• Left
• Right
Margin
Use margin to increase spacing between the horizontal line and other widgets on the page.

Top
User can select from 1-5 rems to increase spacing above the horizontal line

Bottom
User can select from 1-5 rems to increase spacing below the horizontal line

Right
User can select from 1-5 rems to increase to the right of the horizontal line

Left
User can select from 1-5 rems to increase spacing to the left of the horizontal line
Padding
Use margin to increase spacing between the horizontal line and other widgets on the page.

Top
User can select from 1-5 rems to increase room in the top of horizontal line

Bottom
User can select from 1-5 rems to increase room at the bottom of the horizontal line

Right
User can select from 1-5 rems to increase room to the right of the horizontal line

Left
User can select from 1-5 rems to increase room to the left of the horizontal line
Custom CSS
Code provided by the Atlas development team to achieve custom effects

Horizontal Line Widget Examples

Line Type: Solid Line - Single  |  Line End Cap: Square  |  Line Color: Primary color  |  Line Thickness: ranging from small to large

Line Type: Solid Line - Double  |  Line End Cap: Rounded  |  Line Color: Secondary color  |  Line Thickness: ranging from small to large

Line Type: Dashed Line  |  Line End Cap: Square  |  Line Color: Primary color  |  Line Thickness: ranging from small to large

Line Type: Dotted Line  |  Line Color: Secondary color  |  Line Thickness: ranging from small to large

Line Type: Dotted Line  |  Line Color: Primary color  |  Dash or Dot Gap: Wide  |  Line Thickness: ranging from small to large

Line Type: Dotted Line  |  Line Color: Secondary color  |  Dash or Dot Gap: Extra Wide  |  Line Thickness: ranging from small to large

Line Type: Dashed Line  |  Line End Cap: Round  |  Line Color: Primary color  |  Dash or Dot Gap: Wide  |  Line Thickness: ranging from small to large

Line Type: Dashed Line  |  Line End Cap: Round  |  Line Color: Secondary color  |  Dash or Dot Gap: Extra Wide  |  Line Thickness: ranging from small to large

Line Type: Solid Line - Single  |  Line End Cap: Round  |  Line Color: Primary color  |  Line Thickness: Large  |  Line Length: ranging from 75% to 25%

Line Type: Solid Line - Double  |  Line End Cap: Square   |  Line Color: Secondary color  |  Line Thickness: Large  |  Line Length: 50%  |  Alignment: ranging from left to right

Line Type: Solid Line - Single  |  Line End Cap: Square  |  Line Thickness: Large  |  Line Color: All color options except white