wiremd

Appearance

Card Layouts ​

Use Case: Showcase of card components and grid layouts for content organization.

Key Features: Basic cards, feature cards, pricing cards, profile cards, product cards, card grids

Card Component Showcase ​

Comprehensive examples of card layouts and patterns.

1. Basic Card ​

Simple Card ​

markdown
::: card
### Card Title
This is a basic card with title and content.

[Learn More]
:::

Rendered:

Card with Image ​

markdown
::: card
![Feature Image](https://via.placeholder.com/400x200)

### Image Card
Cards can include images, text, and buttons for rich content presentation.

[View Details →]
:::

Rendered:

2. Feature Cards ​

Three Column Feature Grid ​

markdown
::: grid-3 card

### :rocket: Fast Performance
Lightning-quick loading times and optimized rendering for the best user experience.

[Learn More →]

### :shield: Secure by Default
Enterprise-grade security with encryption, backups, and compliance certifications.

[Learn More →]

### :gear: Highly Customizable
Flexible configuration options and extensive API for complete control.

[Learn More →]

:::

Rendered:

3. Pricing Cards ​

Pricing Tiers ​

markdown
::: grid-3 card

### Starter
**$9** /month

Perfect for individuals

- 5 Projects
- 10 GB Storage
- Basic Support
- Email Reports

[Start Free Trial]*

### Professional
**$29** /month

*Most Popular*

For growing teams

- Unlimited Projects
- 100 GB Storage
- Priority Support
- Advanced Analytics
- API Access

[Start Free Trial]*

### Enterprise
**Custom**

For large organizations

- Everything in Pro
- Unlimited Storage
- Dedicated Support
- Custom Integration
- SLA Guarantee

[Contact Sales]*

:::

Rendered:

4. Product Cards ​

Product Grid ​

markdown
::: grid-4 card

### Wireless Headphones
![Product](https://via.placeholder.com/250x250)

~~$129.99~~ **$89.99**

:star::star::star::star::star: (127 reviews)

[Add to Cart]*

### Smart Watch
![Product](https://via.placeholder.com/250x250)

**$299.99**

:star::star::star::star: (89 reviews)

[Add to Cart]*

### Bluetooth Speaker
![Product](https://via.placeholder.com/250x250)

~~$79.99~~ **$49.99**

:star::star::star::star::star: (203 reviews)

[Add to Cart]*

### Fitness Tracker
![Product](https://via.placeholder.com/250x250)

**$149.99**

:star::star::star::star: (156 reviews)

[Add to Cart]*

:::

Rendered:

5. Profile/Team Cards ​

Team Member Grid ​

markdown
::: grid-4 card

### Sarah Johnson
![Profile](https://via.placeholder.com/200x200)

**CEO & Founder**

"Passionate about building great products"

[LinkedIn] [Twitter] [[email protected]]

### Michael Chen
![Profile](https://via.placeholder.com/200x200)

**CTO**

"Technology enthusiast and problem solver"

[LinkedIn] [GitHub] [[email protected]]

### Emma Rodriguez
![Profile](https://via.placeholder.com/200x200)

**Head of Design**

"Creating beautiful user experiences"

[LinkedIn] [Dribbble] [[email protected]]

### David Kim
![Profile](https://via.placeholder.com/200x200)

**Lead Developer**

"Building scalable solutions"

[LinkedIn] [GitHub] [[email protected]]

:::

Rendered:

6. Blog/Article Cards ​

Blog Post Grid ​

markdown
::: grid-3 card

### Getting Started with Wireframing
![Blog Post](https://via.placeholder.com/350x200)

Learn the fundamentals of wireframing and how to create effective designs quickly.

**Design** • 5 min read • Mar 15, 2025

[Read More →]

### 10 UI Design Principles
![Blog Post](https://via.placeholder.com/350x200)

Essential principles every designer should know for creating intuitive interfaces.

**UI/UX** • 8 min read • Mar 12, 2025

[Read More →]

### Accessibility Best Practices
![Blog Post](https://via.placeholder.com/350x200)

Make your designs inclusive and accessible to all users with these proven techniques.

**Accessibility** • 6 min read • Mar 10, 2025

[Read More →]

:::

Rendered:

7. Testimonial Cards ​

Customer Testimonials ​

markdown
::: grid-3 card

### :star::star::star::star::star:
*"This product completely transformed how we work. Best decision we made this year!"*

**Sarah Johnson**
CEO, TechStart Inc.

### :star::star::star::star::star:
*"Outstanding support and incredible features. Highly recommended for any team."*

**Michael Chen**
CTO, DataCorp

### :star::star::star::star::star:
*"Easy to use, powerful features, and great value. We couldn't be happier."*

**Emily Rodriguez**
Operations Director

:::

Rendered:

8. Stats/Metrics Cards ​

Key Metrics Dashboard ​

markdown
::: grid-4 card

### Total Users
**124,567**
:chart: +12.5% this month

### Revenue
**$458,234**
:chart: +18.3% this month

### Conversion Rate
**3.2%**
:chart: +0.8% this month

### Customer Satisfaction
**4.8** / 5.0
:star::star::star::star::star:

:::

Rendered:

9. Interactive Cards with States ​

Card States ​

markdown
::: grid-2 card

### Normal Card
::: card
Regular card in default state

[Action Button]
:::

### Highlighted Card
::: card {.highlight}
**Featured!**

This card has special emphasis

[Primary Action]*
:::

:::

Rendered:

10. Complex Content Cards ​

Rich Content Cards ​

markdown
::: card
### Project Dashboard Card

**Project:** Mobile App Redesign
**Status:** In Progress
**Due Date:** Mar 25, 2025

---

#### Team Members
- :user: Sarah (Lead Designer)
- :user: Mike (Developer)
- :user: Emma (QA)

#### Progress
[###############___] 75% Complete

---

**Recent Activity:**
- Design mockups approved (2h ago)
- API integration started (5h ago)
- Sprint planning completed (1d ago)

---

[View Project →] [Edit] [Share]
:::

Rendered:

11. Horizontal Cards ​

List-Style Cards ​

markdown
::: card
**Order #12345** | Status: Shipped | Total: $129.99

![Product Thumbnail](https://via.placeholder.com/80x80)

- Wireless Headphones (Qty: 1)
- USB-C Cable (Qty: 2)

Expected Delivery: Mar 20, 2025

[Track Order →] [View Invoice]
:::

Rendered:

12. Grid Layout vs Card Grid ​

Pure Layout Grid (no card chrome) ​

Use ::: grid-N alone when items are form fields, text columns, or anything that shouldn't have card borders/backgrounds.

markdown
::: grid-2

### Your Details
Name
[_____________________________]{required}

Email
[_____________________________]{type:email required}

### Message
Subject
[_____________________________]{required}

[Send Message]*

:::

Rendered:

Card Grid (with card chrome) ​

Add card to apply card borders and backgrounds to each item.

markdown
::: grid-3 card

### :rocket: Fast
Renders in milliseconds.

### :shield: Secure
Enterprise-grade by default.

### :gear: Flexible
Works with any stack.

:::

Rendered:

Column Spanning ​

Add {.col-span-N} to a child heading to span multiple columns.

markdown
::: grid-3 card

### Starter
$9/month — up to 3 projects.

### Pro {.col-span-2}
$29/month — unlimited projects, priority support, spans two columns.

:::

Rendered:

Best Practices ​

Style Variations:

  • sketch - Hand-drawn card wireframes
  • clean - Modern minimal cards
  • wireframe - Structure-focused cards
  • tailwind - Contemporary card design
  • material - Elevated Google-style cards
  • brutal - Bold card layouts
  • none - Semantic HTML for custom styling

Generate this example:

bash
wiremd card-layouts.md --style sketch
wiremd card-layouts.md --style clean -o cards-clean.html
wiremd card-layouts.md --style material -o cards-material.html