Markdown Cards Part 2: Scribbles & Flips

In Part 1, we introduced basic playing cards. Now, let’s get messy! We’re adding “scribble” styles, advanced flip animations, and the ability to put markdown on both sides of the card.

1. The Scribble Style

Perfect for that “hand-drawn” or “whiteboard” aesthetic. We use irregular border radii to simulate a sketch.

2. Advanced Flips

Why stick to horizontal flips? Let’s mix it up with vertical and diagonal rotations.

3. Flashcards: Markdown on Both Sides

This is where it gets useful. You can put full markdown content on both the front and back. Great for Q&A or “Reveal” cards.

div {
  display: grid;
  place-items: center;
}

4. Image Gallery with Scribbles

Using your uploaded images with the scribble effect.

5. Diagrams with Scribbles

How to Use

Import ScribbleCard and use named slots for front and back.

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

<ScribbleCard flipDirection="vertical" scribbleStyle="rough">
  <div slot="front">
    # Front Content
  </div>
  <div slot="back">
    # Back Content
  </div>
</ScribbleCard>

Enjoy building your hand-drawn decks!