Flippable Card

An ISLE component that allows two render two-sides.

Example:

<FlippableCard
    button="Click me!"
    perspective={1400}
    cardStyles={{
        container: {
            width: "70%",
            height: 500,
            marginBottom: 50
        },
        front: {
            textAlign: 'center',
            fontSize: '30px',
            color: 'orange',
            textDecoration: 'overline',
        },
        back: {}
    }}
    flipSpeedBackToFront={1.2}
    flipSpeedFrontToBack={0.9}      
>
    <div>
        <img src="https://www.catster.com/wp-content/uploads/2018/07/Savannah-cat-long-body-shot.jpg" />
        <br/>
    </div>
    <div>
        <FreeTextQuestion
            question="Backside"
            solution="Enter solution"
        />
    </div>
</FlippableCard>

Open interactive preview

Options:

  • button | string: button label. Default: none.
  • cardStyles | {container,front,back}: allows to override the given styles. Default: { 'container': {}, 'front': {}, 'back': {} }.
  • flipSpeedBackToFront | number: the speed by which the card turns from background to foreground, in seconds. Default: 1.
  • flipSpeedFrontToBack | number: {number} the speed by which the card turns from foreground to background, in seconds. Default: 1.
  • isFlipped | boolean: initial flip state of the card. Default: false.
  • onChange | function: callback invoked once the card is flipped; receives the current flipped status as its sole argument. Default: onChange() {}.
  • oneTime | boolean: indicates whether the flip process may be executed just once. Default: false.
  • perspective | number: CSS property value to give 3d-positioned element a perspective. Default: 1000.
  • value | boolean: undefined. Default: none.
  • defaultValue | boolean: undefined. Default: false.

results matching ""

    No results matching ""