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.
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.
Used for sizing and positing within tables.
Used for the main site navigation.