WashAnimated

View source on GitHub
See recent changes on GitHub

WashAnimated is used to highlight content in grids. It visually shows that children elements belong together and can highlight the items on hover.

also known as Card, Panel, Tile

Figma:
N/A
Responsive:
Ready
Adaptive:
N/A

Props

Component props
Name
Type
Default
active
boolean | null | undefined
-

Used to force the "active" hover state visually.

children
React.Node
-
image
React.Node
-

An optional Image to be displayed at the top of the layout.

onMouseEnter
(arg1: { event: React.MouseEvent<HTMLDivElement> }) => void
-

Optional callback fired when the user hovers over from WashAnimated.

onMouseLeave
(arg1: { event: React.MouseEvent<HTMLDivElement> }) => void
-

Optional callback fired when the user hovers off WashAnimated.

Usage guidelines

When to use
  • Highlighting content in a grid format.
  • Displaying related content in a way that is easy to scan, read, and act upon.
When not to use
  • Displaying an unrelated group of information.

Accessibility

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Ready
Component responds to changing viewport sizes in web and mobile web.
Edit page on GitHub