About this snippet

Display your articles with this clean blog card layout. It features a cover image, category tags, and a smooth hover lift effect, which encourages users to click through and read your content.

Size
1.9 KB
Uses
HTML, CSS
Loads
placehold.co
Views
578
<div class="blog-card">
  <div class="card-image">
    <img src="https://placehold.co/600x400/3b82f6/ffffff?text=Tech" alt="Blog Post">
  </div>
  <div class="card-content">
    <span class="category">Technology</span>
    <h3>The Future of Web Development</h3>
    <p>Discover the latest trends and tools that are shaping the internet in 2026.</p>
    <div class="card-footer">
      <div class="author">
        <img src="https://placehold.co/50x50/1f2937/ffffff?text=AD" alt="Author">
        <span>Alex Dev</span>
      </div>
      <span class="date">Jan 24</span>
    </div>
  </div>
</div>
.blog-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 350px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #f3f4f6;
}
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.card-content {
  padding: 20px;
}
.category {
  font-size: 0.75rem;
  color: #3b82f6;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.blog-card h3 {
  margin: 10px 0;
  color: #1f2937;
  font-size: 1.25rem;
  line-height: 1.4;
}
.blog-card p {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f3f4f6;
  padding-top: 15px;
}
.author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.author span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}
.date {
  font-size: 0.85rem;
  color: #9ca3af;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save