→ Jorrit
→ Elegant Dark Mode Blog Card Component

Elegant Dark Mode Blog Card Component

This Example is contributed by Jorrit, on 04-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards,Article Card, Blog page card, Article card

Card Blog Card Dark Mode

Author Jorrit

Fork Fullscreen

<div class="blog-card">
  <div class="blog-card-image">
    <img src="https://images.unsplash.com/photo-1505238680356-667803448bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Blog Post Image">
    <div class="category">Technology</div>
  </div>
  <div class="blog-card-content">
    <h2 class="blog-card-title">The Future of Web Development in 2023</h2>
    <p class="blog-card-excerpt">Explore emerging trends and technologies shaping the landscape of modern web development and how they might impact your projects...</p>
    <div class="blog-card-meta">
      <div class="author">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Elena Rodriguez">
        <span>Elena Rodriguez</span>
      </div>
      <div class="details">
        <span class="date">May 15, 2023</span>
        <span class="read-time">5 min read</span>
      </div>
    </div>
  </div>
  <div class="theme-toggle">
    <input type="checkbox" id="theme-switch" class="theme-switch">
    <label for="theme-switch" class="switch-label">
      <span class="toggle-icon"></span>
    </label>
  </div>
</div>

Related Examples

Article Card

Author:
Anonymous

2 months ago
Responsive Post Card Grid Layout

Author:
Anonymous

2 months ago
Featured Content Section with Cards
A responsive content section featuring cards with images, headings, and descriptions, perfect for showcasing articles, products, or features on your website.

Author:
Morgan Reynolds

2 months ago
Social Sharing Component with Blog Post Details

Author:
Anonymous

2 months ago
Simple Author Card

Author:
Prajwal Hallale

4 months ago
CTA Card
Stunning gradient service cards with smooth hover animations and interactive elements, perfect for showcasing features or services.

Author:
Prajwal Hallale

4 months ago
Product Card with Hover Effects
Premium product display component with elegant typography, animated details, and seamless add-to-cart functionality.

Author:
Prajwal Hallale

4 months ago
Profile Card
A beautifully designed profile card featuring smooth gradient animations and social media integration for modern web applications

Author:
Emma Thompson

4 months ago
Floating Social Media Profile Card
A beautifully designed profile card featuring smooth gradient backgrounds, hover animations, and social media integration

Author:
Emma Thompson

4 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

4 months ago
Profile Card with Social Media Links

Author:
Anonymous

3 months ago

Didn't find component you were looking for?

Search from 500+ components