🃏 Card Components Design Guide

Cards є versatile UI containers що group related information into cohesive, clickable blocks. Popularized by Material Design, cards organize content (articles, species profiles, cultivation guides) into scannable, actionable units. Well-designed cards balance information density з visual hierarchy через thoughtful use of images, typography, whitespace, та hover effects. Для mushroom education site, cards showcase: featured cultivation guides, species profiles з thumbnails, research summaries, user trip reports. Effective card design drives engagement through clear hierarchy (title prominent), visual appeal (quality imagery), та affordance (hover states signal interactivity). Цей guide охоплює multiple card types, CSS implementations, responsive grid layouts, та accessibility patterns.

🎨 Card Styles Showcase

Article/Post Cards

🍄
Cultivation
Complete PF Tek Growing Guide для Beginners
Step-by-step instructions для growing Psilocybe cubensis using the PF Tek method. Includes sterilization, inoculation, та fruiting...
12.3K views 15 min read
🔬
Research
Psilocybin Clinical Trials: 2025 Update
Latest findings від Johns Hopkins, Imperial College, та MAPS research studies on psilocybin-assisted therapy...
8.7K views 10 min read
🛡️
Safety
Set та Setting: Complete Harm Reduction Guide
Essential safety protocols, dosage guidelines, та harm reduction strategies для responsible psychedelic use...
6.5K views 8 min read

Category Cards

🍄
Species Library
48 Guides
🌱
Growing Guides
32 Articles
🔬
Research
28 Studies
📝
Trip Reports
67 Experiences

Content Cards з Border Accent

⚠️ Safety Warning

Psilocybin mushrooms are illegal в багатьох countries. Ensure you understand local laws before cultivation або consumption. This site provides educational information only.

✓ Pro Tip

Maintain sterile technique throughout inoculation. Even minor contamination can ruin entire batches. Use laminar flow hood або still air box для best results.

💻 CSS Implementation

Article/Post Card:

/* HTML Structure */
<div class="card-article">
  <img src="image.jpg" class="card-image" alt="Guide cover">
  <div class="card-content">
    <span class="card-category">Cultivation</span>
    <h3 class="card-title">Complete PF Tek Guide</h3>
    <p class="card-description">Step-by-step instructions...</p>
    <div class="card-footer">
      <span>12.3K views</span>
      <span>15 min read</span>
    </div>
  </div>
</div>

/* CSS */
.card-article {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.card-article:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(250, 112, 154, 0.3);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 25px;
}

.card-category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(250, 112, 154, 0.1);
  color: #fa709a;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 12px;
  margin-bottom: 12px;
}

.card-title {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 12px;
  color: #2c3e50;
  line-height: 1.3;
  
  /* Truncate після 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-description {
  color: #6c757d;
  font-size: 0.95em;
  line-height: 1.6;
  margin-bottom: 15px;
  
  /* Truncate після 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
  font-size: 0.875em;
  color: #6c757d;
}

Category Card:

.card-category-box {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card-category-box:hover {
  border-color: #fa709a;
  background: linear-gradient(135deg, #fff9fb 0%, #fffef7 100%);
  transform: scale(1.05);
}

.category-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.category-name {
  font-size: 1.2em;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
}

.category-count {
  color: #fa709a;
  font-weight: 600;
}

Responsive Grid Layout:

/* Grid container */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr; /* Stack на mobile */
    gap: 20px;
  }
  
  .card-content {
    padding: 20px; /* Smaller padding */
  }
}

/* Alternative: Flexbox layout */
.cards-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.cards-flex .card {
  flex: 1 1 300px; /* Grow, shrink, base 300px */
  max-width: 400px; /* Prevent από getting too wide */
}

Card Shadows та Borders:

/* Subtle shadow (default) */
.card-subtle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Medium shadow */
.card-medium {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Strong shadow */
.card-strong {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Border instead of shadow */
.card-bordered {
  border: 2px solid #e9ecef;
  box-shadow: none;
}

/* Accent border-left */
.card-accent {
  border-left: 4px solid #fa709a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

♿ Accessibility

Semantic HTML:

<!-- Use article або section tags -->
<article class="card-article">
  <img src="image.jpg" alt="PF Tek cultivation setup">
  <div class="card-content">
    <span class="card-category">Cultivation</span>
    <h3 class="card-title">
      <a href="/guides/pf-tek">Complete PF Tek Guide</a>
    </h3>
    <p class="card-description">Step-by-step instructions...</p>
  </div>
</article>

<!-- Clickable card wrapper -->
<a href="/guides/pf-tek" class="card-link">
  <article class="card-article">
    <!-- Card content -->
  </article>
</a>

Keyboard Navigation:

/* Make entire card clickable */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-link:focus {
  outline: 3px solid rgba(250, 112, 154, 0.5);
  outline-offset: 2px;
  border-radius: 12px;
}

✅ Card Design Checklist

Implementation Checklist:

  • ☐ Card containers have clear borders або shadows
  • ☐ Hover effects visible (lift, shadow, або border change)
  • ☐ Images aspect ratio consistent (16:9 або 4:3)
  • ☐ Titles truncate properly (line-clamp)
  • ☐ Category tags visually distinct
  • ☐ Footer metadata clearly separated
  • ☐ Grid responsive (stack на mobile)
  • ☐ Focus states visible (keyboard navigation)
  • ☐ Image alt text descriptive
  • ☐ Card links accessible
  • ☐ Transitions smooth (0.3s)
  • ☐ Color contrast meets WCAG AA