FlipFx – Once UI

FlipFx simulates a flipping card on click.

FlipFx

<FlipFx
  minHeight={24}
  aspectRatio={3 / 4}
  front={
    <Media
      fill
      sizes="640px"
      src="/images/docs/once-ui/proxima-b.jpg"
      radius="l"
      border="brand-alpha-weak"
    />
  }
  back={
    <Flex fill background="surface" center
      radius="l"
      border="brand-alpha-weak">
      <Text
        align="center"
        variant="display-default-xs"
      >
        Proxima B
      </Text>
    </Flex>
  }
/>

Direction

Use the flipDirection prop to control the flip direction.

Direction

<FlipFx
  minHeight={24}
  aspectRatio={3 / 4}
  flipDirection="vertical"
  front={
    <Media
      fill
      sizes="640px"
      src="/images/docs/once-ui/proxima-b.jpg"
      radius="l"
      border="brand-alpha-weak"
    />
  }
  back={
    <Flex fill background="surface" center
      radius="l"
      border="brand-alpha-weak">
      <Text
        align="center"
        variant="display-default-xs"
      >
        Proxima B
      </Text>
    </Flex>
  }
/>

API reference

	Type	Default
flipDirection Axis the card turns on.	horizontalvertical	horizontal
timing Duration of the flip, in milliseconds.	number	2000
flipped Controlled face. Omit it to let the component manage its own state.	boolean	—
onFlip Called whenever the face changes.	(flipped: boolean) => void	—
disableClickFlip Stop clicks from flipping the card.	boolean	false
autoFlipInterval Flip on a timer, in milliseconds. Omit for manual flipping only.	number	—
frontrequired	React.ReactNode	—
backrequired	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—