This project explores how to build a reusable playing-card with Web Components. It’s based on the Standard 52-Card Deck project, and focuses on component structure, styling, and layout techniques that can later be reused in a solitaire game.
- Built wih HTML, CSS & JS
- Uses Web Components (Custom Elements, Shadow DOM)
- Responsive card layout
- Flexbox and CSS Grid for layout
- Positioning and stacking contexts
To use this component, copy the following files into your project:
- fonts and images
playing-card/src/assets/*- component styles that can be changed
playing-card/src/css/PlayingCard.vars.css- component
playing-card/src/components/PlayingCard.js
├── assets/
│ └── (fonts and images)
├── css/
│ └── PlayingCard.vars.css
├── components/
│ └── PlayingCard.js
└── index.js
Then import the component in your JavaScript entry file:
import "./components/PlayingCard.js";Use it like any other HTML element with the tag name playing-card. It accepts two attributes and one optional boolean attribute.
suit: sets the type of card. Valid values arediamond,spade,heart,clubrank: sets the number of the card. Valid values range from1to13flipped: turns the card over. Boolean attribute
<!-- Diamond ace -->
<playing-card suit="diamond" rank="1"></playing-card>
<!-- Flipped card -->
<playing-card suit="club" rank="13" flipped></playing-card>The file PlayingCard.vars.css contains CSS custom properties that control the component’s appearance. You can modify this file directly or override the variables in your own CSS.
playing-card {
--card-width: 200px; /* fixed size */
/* or */
--card-width: 10vw; /* responsive size */
}- Verified on Chromium and Firefox