Draw a Line Flow Screen Component

Created by Eric Smith

This Post was most recently updated on: 4/14/23
Current Version: 1.0

The Draw a Line Lightning Web Component is included in the Flow Screen Components Base Pack and can be used in place of the older horizontalRuleFSC Aura component.

The component can be added to flow screens with the Flow Builder and it can be added to Record, App and Home Pages with the Lightning App Builder.

The advantages to using this component are that it doesn’t require a separate installation and it provides a Custom Property Editor when configuring it for use on a flow screen.

Custom Property Editor

Sample flow screen with Lines and Datatables

With the custom property editor you can select your top and bottom margins, line thickness and line color. A sample line with the selected attributes will be displayed in the property editor and it will update in sync with your selections.

Custom Property Editor in Action

Attributes (For Lightning Record Page, App Page and Home Page)

Top MarginPicklistSize selection for the top margin (Default = none)
Available Values: none,xxx-small,xx-small,x-small,small,medium,large,x-large,xx-large
Bottom MarginPicklistSize selection for the bottom margin (Default = large)
Available Values: none,xxx-small,xx-small,x-small,small,medium,large,x-large,xx-large
Line ThicknessStringNumber of pixels for the line thickness (Default = 1)
Line ColorStringColor code for the line (Default = Gray)
This attribute supports both HTML standard color names as well as hex format color definitions (#808080)
Display as vCard?BooleanSet to True for the line to display on a white background or False to show the page background (Default = true)
There are no output attributes for this component
Configuring Draw a Line in the App Builder


  • Because of the way other Salesforce components define their own margins, the default values for Top and Bottom Margins will position the line evenly between the components above and below it.


This component is part of the FlowScreenComponentsBasePack v3.1.0 or later

Release Notes

4/14/23 – Eric Smith – v1.0.0

Initial Release

Previous Versions

View Source

Source Code