Arrow Toggle


The arrow toggle can be used to show and hide a content area. It's normally used to hide the tail end of long lists of things so they don't take up too much space on the screen.


Arrow Toggle Medium


Interacting with the Toggle will show or hide content, and change the arrow to the toggled state. The font size is inherited from parent. Text will be bold by default as with most standalone links.

You can use either the HAML template (which also uses JS) or a React component to display this atom.

Some variants exist for text sizing and icon positioning.

See it used on the finance topic page to show more courses.


Table Action

Used for sizing and positing within tables.

Screen Shot 2018 10 12 At 09 49 12

Submenu Item

Used for the main site navigation.

Screen Shot 2018 10 12 At 09 48 51

Added by: