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="var(--theme-warning)"
  end-color="var(--theme-accent-primary)"
  height="5">
</qds-gradient-line>

Attributes

Attribute	Type	Default	Description
start-color	String	var(--theme-success)	The starting color of the gradient
end-color	String	var(--theme-accent-primary)	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
• Success-to-accent gradient from the shared theme token layer
• 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.