← Back to Components

QDS Gradient Line

A horizontal gradient line component with a customizable gradient.

Usage

<qds-gradient-line></qds-gradient-line>

With custom colors and height:

<qds-gradient-line start-color="#FF6B6B" end-color="#4D96FF" height="5"></qds-gradient-line>

Attributes

Attribute	Type	Default	Description
start-color	String	#98E7A9	The starting color of the gradient
end-color	String	#032E9D	The ending color of the gradient
height	Number	3	The height of the line in pixels

Styling

The component includes a horizontal line with a gradient background. The default styling includes:

• 3px height
• Green to blue gradient (#98E7A9 to #032E9D)
• z-index of 99 to ensure visibility

CSS Parts

• line: The horizontal line element

Examples

See test.html for a usage example.

Integration with Main Toolbar

This component is integrated into the qds-main-toolbar component, displaying a gradient line at the bottom of the toolbar.