Skip to main content

Line

Luna
Luna
  • Updated

The Line Control allows you to add styled horizontal lines that divide your content. 

You can choose either the standard line with nicely styled effects, or select from a variety icon dividers for enhanced design styling.

Line_sample.jpg

In addition, you can include text or icons before, after, or in the middle of your divider.

 

Add Line to the page

Firstly, find the Line control in the controls add panel,. Then, drag and drop it into a section or container on your page.

Line_Add.jpg

 

Content

  1. Style: Choose between many classic and patterned styles, such as Solid, Dotted, Dashed and Double.
  2. Width: Control the width of the line as percentage from 0 to 100 percent.
  3. Align: Align the line to the left, center or right of the page.
  4. Add Element: Select from NoneText, or Icon. Select Text or Icon allows you to either enter the Text to be included or select an icon from the Icon Library.

Line_content.jpg

 

Style

Line

  1. Color: Choose the color of the line.
  2. Weight: Set the size/height of the line, from 1 to 100.
  3. Spacing: Slide to set the gap above and below the line, from 1 to 50

Line_style.jpg

Text

  1. Color: Choose the text color
  2. Typography: Set the typography options for the text
  3. Position: Choose the position of the text in relation to the divider, selecting from LeftCenter, or Right
  4. Spacing: Slide to add space between the text and the line, from 1 to 50

Line_text.jpg

Icon

There are 3 different VIEWS for the widget: DefaultStacked, and Framed. Each comes with its own set of options.

VIEW: Default
  1. Size: Set the size of the icon
  2. Primary Color: Choose the icon color
  3. Position: Choose the position of the icon in relation to the line, selecting from LeftCenter, or Right
  4. Spacing: Slide to add space between the icon and the line, from 1 to 50
  5. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
VIEW: Stacked
  1. Size: Set the size of the icon
  2. Spacing: Set the padding around the icon
  3. Primary Color: Set the color of the stack background
  4. Secondary Color: Set the color of the icon
  5. Position: Choose the position of the icon in relation to the line, selecting from LeftCenter, or Right
  6. Spacing: Slide to add space between the icon and the line, from 1 to 50
  7. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
  8. Radius: Set the border radius of the stack background to achieve rounded corners are completely round stacks

Line_Icon.jpg

VIEW: Framed
  1. Size: Set the size of the icon
  2. Spacing: Set the padding around the icon
  3. Primary Color: Set the color of the frame border
  4. Secondary Color: Set the color of the icon
  5. Position: Choose the position of the icon in relation to the line, selecting from LeftCenter, or Right
  6. Spacing: Slide to add space between the icon and the line, from 1 to 50
  7. Rotate: Slide to select the number of degrees to rotate the icon, from 0 to 360
  8. Border Width: Control the thickness of the frame border
  9. Radius: Set the border radius of the frame border to achieve rounded corners are completely round frames

 

Advanced Settings

Set the Advanced options that are applicable to this control.

 

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.