Arrow icons are used on buttons and accordions to aid in the action a user should take to achieve their goal.

Arrow size classes:

• arrow--smallest
• arrow--smaller
• arrow--small
• arrow--medium
• arrow--large
• arrow--larger
• arrow--largest

Arrow positioning classes:

• arrow--position--left
• arrow--position--right

Arrow direction classes:

• arrow--up
• arrow--right
• arrow--down
• arrow--left

Note: If you omitt a direction, the default direction is down.

Arrow colors:

• arrow--white

Note: If you omitt colors, the default color is black.

Putting it all together:

• arrow arrow--position--left arrow--left arrow--smallest

Using With Accodions, Tabs, and Dropdowns:

You should omitt direction classes when using arrows with Accordions, Tabs, and Dropdowns. Styling is in place to automatically rotate the icon when each of these components are opened/shown.

To utilize, Insert an arrows-specific atom partial called "ArrowAtom" via an Html Helper Extension method.

@Html.ArrowAtom(ArrowTypeEnum.Base, "testArrow")

Arrow Atom requires you specify a type via a "ArrowTypeEnum" specification like "ArrowTypeEnum.Left". You will also need to provide an Id, however, all other parameters are optional. Provide optional parameters by entering the parameter name followed by ':' and the value.

@Html.ArrowAtom(ArrowTypeEnum.Left, "LeftArrow", customClass: "testArrow", title: "This is a test arrow")