Why scroll through walls of text when you can flip through a deck of cards? In this post, we’ll transform standard markdown elements into interactive playing cards.

The Deck

Here is a collection of “cards” representing different types of content. Hover over (or tap) the cards to see the flip effect!

const jack = {
  role: 'Dev',
  level: 11
};

Advanced Cards

We can even put complex content like diagrams and equations inside these cards.

How to Use

Simply import the PlayingCard component and wrap your markdown content.

import PlayingCard from '../components/PlayingCard.astro';

<PlayingCard rank="A" suit="spades" flip={true}>
  # Your Content Here
</PlayingCard>

Props

Design Philosophy

This design mimics the classic poker card aesthetic:

1. Rounded Corners: border-radius: 1rem gives that smooth feel.
2. Aspect Ratio: 2.5/3.5 maintains the traditional shape.
3. Corner Indices: Absolute positioning places the rank and suit in the corners.
4. Flip Animation: CSS 3D transforms (rotateY) create the realistic flip effect.

Go ahead, build your own deck of knowledge!