Blog Page

The blog page type features category pill filters, a card grid with thumbnails, and author bio sections. Cards show title, excerpt, date, read time, and category tags.

Category Filters + Card Grid

Thumbnail

DBT8 min read

Understanding DBT: A Complete Guide

Mar 15, 2026

Thumbnail

Hypnotherapy6 min read

The Science Behind Clinical Hypnotherapy

Mar 10, 2026

Thumbnail

Trauma10 min read

Trauma-Informed Care in Modern Practice

Mar 5, 2026

Thumbnail

Mindfulness5 min read

Mindfulness Techniques for Daily Life

Feb 28, 2026

Thumbnail

Research7 min read

New Research on EMDR Efficacy

Feb 20, 2026

Thumbnail

DBT9 min read

Building Distress Tolerance Skills

Feb 15, 2026

Author Bio

Edward Flynn, LPC

Licensed Professional Counselor

Edward writes about evidence-based therapeutic approaches, clinical research, and practical mental health strategies for practitioners and individuals.

CSS

css

/* Blog Page Layout */
.blog-page {
  /* 1. Page Hero */
  /* 2. Category Filters */
  /* 3. Blog Card Grid */
  /* 4. Author Bio (post detail) */
}

/* Category Filters */
.category-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.category-filter {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.category-filter.active {
  background: rgba(191,90,242,0.1);
  border-color: rgba(191,90,242,0.3);
  color: #1db954;
}

/* Blog Card */
.blog-card {
  background: #111113;
  border: 1px solid #27272a;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.blog-card:hover {
  border-color: rgba(76,175,80,0.4);
}
.blog-card .thumbnail {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #18181b;
}
.blog-card .content {
  padding: 20px;
}

/* Author Bio */
.author-bio {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #111113;
  border: 1px solid #27272a;
  border-radius: 16px;
}
.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #18181b;
}