Arrow

Beta Added in 2.0.0

Add arrows to other components.

Usage

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

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

<div class="gls-arrow gls-arrow-bl"></div>

Right

Bottom

Top

Left

<div class="gls-child-width-1-2@s gls-text-center" gls-grid>
    <div>
        <div class="gls-tile gls-tile-default gls-arrow gls-arrow-r" style="box-shadow: var(--global-medium-box-shadow); border: 1px solid var(--color-gray-3)">
            <p class="gls-h4">Right</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-muted gls-arrow gls-arrow-b" style="border: 1px solid var(--color-gray-3)">
            <p class="gls-h4">Bottom</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-primary gls-arrow gls-arrow-t">
            <p class="gls-h4">Top</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-tertiary gls-arrow gls-arrow-l">
            <p class="gls-h4">Left</p>
        </div>
    </div>
</div>

Size modifiers

Add the .gls-arrow-small or .gls-arrow-large class to a button to make it smaller or larger.

<div class="gls-arrow gls-arrow-small"></div>

<div class="gls-arrow gls-arrow-large"></div>

Small

Large

<div class="gls-child-width-1-2@s gls-text-center" gls-grid>
    <div>
        <div class="gls-tile gls-tile-primary gls-arrow gls-arrow-small gls-arrow-rt">
            <p class="gls-h4">Small</p>
        </div>
    </div>
    <div>
        <div class="gls-tile gls-tile-tertiary gls-arrow gls-arrow-large gls-arrow-lb">
            <p class="gls-h4">Large</p>
        </div>
    </div>
</div>