Styleguide

Hover Animation

Hover animations are a great interactive element that is visually appealing and also increases the interactivity of an element. Not only it seamlessly indicates that the element is clickable, but it also can be used to contextually reveal additional information.

Image Control Reveal

Reveal animations show or hide more information related to the image in a visually appealing way.

Hovering on images reveals the ability to edit, multi-select and remove that image.

Thumbnail Images on Media Card

Thumbnail Images in Asset Library

Buttons

A button can have two different animations: the hover and the click.

Flat buttons fill on hover and fill again with a darker shade on click

Add media buttons on Media Card

Save button on Photo Edit Overlay

Wire buttons highlight on hover and fill on click

Table List Filter buttons

Page Exit Confirmation

Dashboard favorite buttons gain shadow on hover and a deeper shadow on click

Series General Info Card

Tool Tips

Tooltips are labels that appear on hover and focus, tool tips contain textual identification for the element in question. They may also contain brief helper text regarding the function of the element.

Tool Tips are revealed when the user hovers over an element with the cursor, focuses on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI.