[ CARD_COMPONENTS ]

> 6 variations of the brutalist card component

01. Basic Card (No Image)

basic_card.md

[ Basic Card ]

Simple card with title, description, and link. No image or ASCII art.

<Card
  title="Basic Card"
  description="Simple card with title, description, and link. No image or ASCII art."
  href="#"
  filename="basic_card.md"
/>

02. Card with Image

featured_post.md

[ Card with Image ]

Full-featured card with image, title, description, and call to action.

> READ_MORE

<Card
  title="Card with Image"
  description="Full-featured card with image, title, description, and call to action."
  href="#"
  imgSrc="/static/images/time-machine.jpg"
  filename="featured_post.md"
/>

03. Card with ASCII Art

terminal.sh

[//]

[ Terminal Interface ]

Card showcasing ASCII art in the header alongside filename.

> READ_MORE

<Card
  title="Terminal Interface"
  description="Card showcasing ASCII art in the header alongside filename."
  href="#"
  asciiArt="[//]"
  filename="terminal.sh"
/>

04. Card with Image + ASCII

full_stack.tsx

</>

[ Full Stack Build ]

Complete card with image, ASCII art header, and content.

> READ_MORE

<Card
  title="Full Stack Build"
  description="Complete card with image, ASCII art header, and content."
  href="#"
  imgSrc="/static/images/canada/mountains.jpg"
  asciiArt="</>"
  filename="full_stack.tsx"
/>

05. No Link Card

placeholder.md

[ Static Content ]

Card without a link - useful for displaying non-interactive content or coming soon items.

<Card
  title="Static Content"
  description="Card without a link - useful for displaying non-interactive content or coming soon items."
  filename="placeholder.md"
/>

06. Long Content

react_advanced.mdx

[!]

[ Deep Dive: Advanced React Patterns ]

A comprehensive exploration of advanced React patterns including compound components, render props, controlled components, custom hooks, and state management strategies for complex applications.

> READ_MORE

<Card
  title="Deep Dive: Advanced React Patterns"
  description="A comprehensive exploration of advanced React patterns including compound components, render props, controlled components, custom hooks, and state management strategies for complex applications."
  href="#"
  asciiArt="[!]"
  filename="react_advanced.mdx"
/>

[ USAGE_NOTES ]

>filename: Displays in header bar (defaults to title-based slug)
>asciiArt: Small ASCII icon in header (e.g., "[//]", "</>", "[!]")
>imgSrc: Featured image (auto-cropped to 16:9)
>href: Makes card clickable, adds "READ_MORE" link
*Hover state: Border changes from white to cyan with cyan shadow
*Used in project listings, blog homepage, and tag pages