Arrow

This component is used to indicate positive or negative value changes. The default state does not show any changes.

The following code examples shows how to use arrow:

<p> <span class="arrow"></span> No Changes </p>
<p> <span class="arrow arrow--positive"></span> Positive Changes </p>
<p> <span class="arrow arrow--negative"></span> Negative Changes </p>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .arrow - required this is an inline element and represent an “no change” state
• .arrow--positive - the state for positive values changes
• .arrow--negative - the state for negative values changes
• .arrow--triangle - triangle arrow in default state
• .arrow--analysis - indicates a “Hold” recommendation

Basic Example:

Size

The size of the arrow matches to the font size of the parent element. You can change size of the arrow directly with the Font Size modifier.