This package contains styling and positioning classes for .c-arrow
.
Installation
npm install @zendeskgarden/css-arrows
Usage
Once installed, arrow CSS can be accessed via postcss-import
.
@import '@zendeskgarden/css-arrows';
Arrow CSS classes are used on a parent element (typically menus or
tooltips) by applying the base .c-arrow
class in addition to a
positioning class.
Here's an example of arrows used in conjunction with the .c-menu
component that would place an arrow centered at the top of the parent
element using the .c-arrow--t
positioning class.
<ul class="c-menu c-arrow c-arrow--t" role="menu" aria-hidden="true">
<li class="c-menu__item" role="menuitem" tabindex="0">Menu Item</li>
</ul>
See http://zendeskgarden.github.io/css-components/arrows/ for a comprehensive demo of the arrow component classes.