You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

53 lines
1.0 KiB

<style>
card {
width: 400px;
}
</style>
<script>
import IconImage from "$/client/components/IconImage.svelte";
let flipped = false;
</script>
<flipper class:flipped={ flipped }>
<inner>
<card class="front">
<top>
<IconImage name="arrow-left" />
</top>
<middle>
<h4>
Front Card
</h4>
<p>This is the front facing card. Click the button to flip it.</p>
</middle>
<bottom>
<button-group>
<button on:click={ () => flipped = !flipped }>Flip It!</button>
</button-group>
</bottom>
</card>
<card class="back">
<top>
<IconImage name="arrow-right" />
</top>
<middle>
<h4>
Back Card
</h4>
<p>This is the back facing card. Click the button to flip it back.</p>
</middle>
<bottom>
<button-group>
<button on:click={ () => flipped = !flipped }>Flip it Back!</button>
</button-group>
</bottom>
</card>
</inner>
</flipper>