flip-card-wc
Version:
Flip Card Web Component
55 lines (54 loc) • 1.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flip Card Web Component</title>
<link rel="stylesheet" href="demo.css" />
<script src="flip-card-wc.min.js"></script>
</head>
<body>
<div class="container">
<h1>Flip Card - On Hover</h1>
<flip-card variant="hover" class="trivia-card">
<div
slot="front"
class="trivia-card__details trivia-card__details--front"
>
<p>What is the capital city of Australia?</p>
</div>
<div
slot="back"
class="trivia-card__details trivia-card__details--back"
>
<p>Canberra</p>
</div>
</flip-card>
<h1>Flip Card - On Click</h1>
<flip-card variant="click" class="movie-card">
<div
slot="front"
class="movie-card__details movie-card__details--front"
>
<div class="movie-card__image">
<img
src="https://upload.wikimedia.org/wikipedia/en/d/d8/The_Wolf_of_Wall_Street_%282013%29.png"
alt="The Wolf Of Wall Street"
/>
</div>
</div>
<div slot="back" class="movie-card__detail movie-card__details--back">
<h2>Actors</h2>
<ul>
<li>Leonardo DiCaprio</li>
<li>Jonah Hill</li>
<li>Margot Robbie</li>
<li>Matthew McConaughey</li>
<li>Kyle Chandler</li>
</ul>
</div>
</flip-card>
</div>
</body>
</html>