WashAnimated

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 Tile, Panel

Figma:

N/A

Web:

iOS:

Android:

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

Ready

Variants

Example

Using WashAnimated is as easy as it can be: simply wrap your component(s) with it. Ideally all of the children should be clickable and cover 100% of the area

import { Avatar, Box, Button, Flex, Link, Text, WashAnimated } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Box maxWidth={236} padding={8} column={12}>
        <WashAnimated
          image={
            <Avatar
              name="James Jones"
              src="https://i.ibb.co/2Fc00R3/james.jpg"
            />
          }
        >
          <Flex direction="column" justifyContent="center">
            <Text align="center" weight="bold">
              <Link href="#">
                <Box paddingX={3} paddingY={2}>
                  James Jones
                </Box>
              </Link>
            </Text>
            <Button
              accessibilityLabel="Follow James Jones"
              color="red"
              text="Follow"
            />
          </Flex>
        </WashAnimated>
      </Box>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab