Flip Card
A flip card web component. The card starts facing down and can be flipped by applying the revealed attribute.
The component is not clickable. Any click behaviour must be implemented by the application.
Usage
<flip-card>Content</flip-card>
<flip-card revealed>Content</flip-card>import '@leofavre/flip-card-component';Attributes / Properties
revealed (Boolean)
Controls whether the content is shown. The default is to show the back of the card.
CSS custom properties
--flip-card-proportion
- Default: 1/1
A fraction of the width of the card divided by its height.
--flip-card-perspective
- Default: 1200px
Controls the CSS property with the same name.
--flip-card-background
- Default: grey
Set the background of the back of the card.
--flip-card-border-radius
- Default: 0px
Controls the CSS property with the same name.
--flip-card-border
- Default: none
Controls the CSS property with the same name.
--flip-card-speed
- Default: 0.32s
Controls the animation speed.