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:

Responsive:

Adaptive:

A11y:

Props

Component props
Name
Type
Default
active
?boolean
-

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
({ event: SyntheticMouseEvent<HTMLDivElement> }) => void
-

Optional callback fired when the user hovers over from WashAnimated.

onMouseLeave
({ event: SyntheticMouseEvent<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.