Line

Beta Added in 2.0.0

Add horizontal or vertical line to other components.

Usage

Arrows consist of the base gls-line class in addition to a positioning modifier class.

Note Add gls-overflow-hidden class to containing element if you don’t want the line to extend to the edge of the screen.

Class	Description
`.gls-line-bl`	Positions line vertically at the bottom left of the parent element
`.gls-line-b`	Positions line vertically at the center bottom of the parent element
`.gls-line-br`	Positions line vertically at the bottom right of the parent element
`.gls-line-lt`	Positions line horizontally at the top on the left side of the parent element
`.gls-line-l`	Positions line horizontally centered on the left side of the parent element
`.gls-line-lb`	Positions line horizontally at the bottom on the left side of the parent element
`.gls-line-rt`	Positions line horizontally at the top on the right side of the parent element
`.gls-line-r`	Positions line horizontally centered on the right side of the parent element
`.gls-line-rb`	Positions line horizontally at the bottom on the right side of the parent element
`.gls-line-tl`	Positions line vertically at the top left of the parent element
`.gls-line-t`	Positions line vertically at the center top of the parent element
`.gls-line-tr`	Positions line vertically at the top right of the parent element

<div class="gls-line gls-line-l"></div>

Left

Top

Bottom

Right

<div class="gls-flex gls-flex-middle gls-flex-center gls-height-medium gls-overflow-hidden">
    <div class="gls-card gls-card-default gls-card-body gls-line gls-line-l">Left</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left gls-line gls-line-t">Top</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left gls-line gls-line-b">Bottom</div>
    <div class="gls-card gls-card-default gls-card-body gls-margin-left gls-line gls-line-r">Right</div>
</div>