Components : Article Card Component

Preview content adapted to proportion

Article Card Component

Blog

The component is designed for use in blog posts, news articles, or any platform where articles need to be presented in an organized and engaging manner.

This component displays detailed information about articles, including titles, publication dates, read times, brief descriptions, tags, and a comments button. It also reveals additional content on interaction.

Users can hover over the article cards to see a shadow effect change. The 'View Comments' button transitions to a darker shade on hover. Additional content is revealed when the user interacts with the card, triggered by the group-target class.


The layout adjusts responsively, stacking into a single column on smaller screens (md:grid-cols-1) and expanding into a grid of six columns on larger screens (md:grid-cols-6). The article cards also adjust to a column layout on mobile devices (max-md:flex-col).

Date : May 30, 2025
Views : 65
Copys : 0

fa-tags

Blog posts News articles Content marketing Online magazines Technical articles

Code

<div class="p-8 bg-[#f5f5f5]">
 <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-6 gap-6">
  <article class="md:col-span-2 bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow duration-300 group">
   <div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-2xl">
     👤
    </div>
    <div>
     <h2 class="text-xl font-semibold text-[#4d4d4d]">
      Modern Web Development
     </h2>
     <div class="flex gap-2 text-sm">
      <time class="text-[#868e96]" datetime="2024-03-15">
       Mar 15, 2024
      </time>
      <span class="text-[#6c757d]">
       •
      </span>
      <span class="text-[#2563eb]">
       8 min read
      </span>
     </div>
    </div>
   </div>
   <p class="text-[#6c757d] mb-4 line-clamp-3">
    Exploring cutting-edge techniques in modern web development with focus on performance optimization and user experience enhancements.
   </p>
   <div class="max-md:flex-col flex gap-2 mb-4">
    <ul class="flex flex-wrap gap-2">
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      Frontend
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      Tailwind
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      React
     </li>
    </ul>
   </div>
   <button class="w-full py-2 px-4 bg-[#2563eb] text-white rounded-lg hover:bg-blue-700 transition-colors">
    View Comments (12)
   </button>
   <div class="mt-4 pt-4 border-t border-[#f5f5f5] hidden group-target:block">
    <p class="text-sm text-[#868e96]">
     Additional content revealed on interaction
    </p>
   </div>
  </article>
  <article class="md:col-span-2 bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow duration-300 group">
   <div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-2xl">
     👩💻
    </div>
    <div>
     <h2 class="text-xl font-semibold text-[#4d4d4d]">
      CSS Architecture
     </h2>
     <div class="flex gap-2 text-sm">
      <time class="text-[#868e96]" datetime="2024-03-14">
       Mar 14, 2024
      </time>
      <span class="text-[#6c757d]">
       •
      </span>
      <span class="text-[#2563eb]">
       6 min read
      </span>
     </div>
    </div>
   </div>
   <p class="text-[#6c757d] mb-4 line-clamp-3">
    Deep dive into scalable CSS architecture patterns and maintenance strategies for large-scale web applications.
   </p>
   <div class="max-md:flex-col flex gap-2 mb-4">
    <ul class="flex flex-wrap gap-2">
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      CSS
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      BEM
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      Architecture
     </li>
    </ul>
   </div>
   <button class="w-full py-2 px-4 bg-[#2563eb] text-white rounded-lg hover:bg-blue-700 transition-colors">
    View Comments (8)
   </button>
   <div class="mt-4 pt-4 border-t border-[#f5f5f5] hidden group-target:block">
    <p class="text-sm text-[#868e96]">
     Additional content revealed on interaction
    </p>
   </div>
  </article>
 </div>
</div>


<template>
 <div class="p-8 bg-[#f5f5f5]">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-6 gap-6">
   <article class="md:col-span-2 bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow duration-300 group">
    <div class="flex items-center gap-4 mb-4">
     <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-2xl">
      👤
     </div>
     <div>
      <h2 class="text-xl font-semibold text-[#4d4d4d]">
       Modern Web Development
      </h2>
      <div class="flex gap-2 text-sm">
       <time class="text-[#868e96]" datetime="2024-03-15">
        Mar 15, 2024
       </time>
       <span class="text-[#6c757d]">
        •
       </span>
       <span class="text-[#2563eb]">
        8 min read
       </span>
      </div>
     </div>
    </div>
    <p class="text-[#6c757d] mb-4 line-clamp-3">
     Exploring cutting-edge techniques in modern web development with focus on performance optimization and user experience enhancements.
    </p>
    <div class="max-md:flex-col flex gap-2 mb-4">
     <ul class="flex flex-wrap gap-2">
      <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
       Frontend
      </li>
      <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
       Tailwind
      </li>
      <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
       React
      </li>
     </ul>
    </div>
    <button class="w-full py-2 px-4 bg-[#2563eb] text-white rounded-lg hover:bg-blue-700 transition-colors">
     View Comments (12)
    </button>
    <div class="mt-4 pt-4 border-t border-[#f5f5f5] hidden group-target:block">
     <p class="text-sm text-[#868e96]">
      Additional content revealed on interaction
     </p>
    </div>
   </article>
   <article class="md:col-span-2 bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow duration-300 group">
    <div class="flex items-center gap-4 mb-4">
     <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-2xl">
      👩💻
     </div>
     <div>
      <h2 class="text-xl font-semibold text-[#4d4d4d]">
       CSS Architecture
      </h2>
      <div class="flex gap-2 text-sm">
       <time class="text-[#868e96]" datetime="2024-03-14">
        Mar 14, 2024
       </time>
       <span class="text-[#6c757d]">
        •
       </span>
       <span class="text-[#2563eb]">
        6 min read
       </span>
      </div>
     </div>
    </div>
    <p class="text-[#6c757d] mb-4 line-clamp-3">
     Deep dive into scalable CSS architecture patterns and maintenance strategies for large-scale web applications.
    </p>
    <div class="max-md:flex-col flex gap-2 mb-4">
     <ul class="flex flex-wrap gap-2">
      <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
       CSS
      </li>
      <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
       BEM
      </li>
      <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
       Architecture
      </li>
     </ul>
    </div>
    <button class="w-full py-2 px-4 bg-[#2563eb] text-white rounded-lg hover:bg-blue-700 transition-colors">
     View Comments (8)
    </button>
    <div class="mt-4 pt-4 border-t border-[#f5f5f5] hidden group-target:block">
     <p class="text-sm text-[#868e96]">
      Additional content revealed on interaction
     </p>
    </div>
   </article>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyBlogComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyBlogComponent = () => {
    return (
<div>
<div class="p-8 bg-[#f5f5f5]">
 <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-6 gap-6">
  <article class="md:col-span-2 bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow duration-300 group">
   <div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-2xl">
     👤
    </div>
    <div>
     <h2 class="text-xl font-semibold text-[#4d4d4d]">
      Modern Web Development
     </h2>
     <div class="flex gap-2 text-sm">
      <time class="text-[#868e96]" datetime="2024-03-15">
       Mar 15, 2024
      </time>
      <span class="text-[#6c757d]">
       •
      </span>
      <span class="text-[#2563eb]">
       8 min read
      </span>
     </div>
    </div>
   </div>
   <p class="text-[#6c757d] mb-4 line-clamp-3">
    Exploring cutting-edge techniques in modern web development with focus on performance optimization and user experience enhancements.
   </p>
   <div class="max-md:flex-col flex gap-2 mb-4">
    <ul class="flex flex-wrap gap-2">
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      Frontend
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      Tailwind
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      React
     </li>
    </ul>
   </div>
   <button class="w-full py-2 px-4 bg-[#2563eb] text-white rounded-lg hover:bg-blue-700 transition-colors">
    View Comments (12)
   </button>
   <div class="mt-4 pt-4 border-t border-[#f5f5f5] hidden group-target:block">
    <p class="text-sm text-[#868e96]">
     Additional content revealed on interaction
    </p>
   </div>
  </article>
  <article class="md:col-span-2 bg-white rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow duration-300 group">
   <div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-2xl">
     👩💻
    </div>
    <div>
     <h2 class="text-xl font-semibold text-[#4d4d4d]">
      CSS Architecture
     </h2>
     <div class="flex gap-2 text-sm">
      <time class="text-[#868e96]" datetime="2024-03-14">
       Mar 14, 2024
      </time>
      <span class="text-[#6c757d]">
       •
      </span>
      <span class="text-[#2563eb]">
       6 min read
      </span>
     </div>
    </div>
   </div>
   <p class="text-[#6c757d] mb-4 line-clamp-3">
    Deep dive into scalable CSS architecture patterns and maintenance strategies for large-scale web applications.
   </p>
   <div class="max-md:flex-col flex gap-2 mb-4">
    <ul class="flex flex-wrap gap-2">
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      CSS
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      BEM
     </li>
     <li class="px-3 py-1 bg-[#f5f5f5] rounded-full text-sm text-[#868e96]">
      Architecture
     </li>
    </ul>
   </div>
   <button class="w-full py-2 px-4 bg-[#2563eb] text-white rounded-lg hover:bg-blue-700 transition-colors">
    View Comments (8)
   </button>
   <div class="mt-4 pt-4 border-t border-[#f5f5f5] hidden group-target:block">
    <p class="text-sm text-[#868e96]">
     Additional content revealed on interaction
    </p>
   </div>
  </article>
 </div>
</div>

</div>
    )
}
export default MyBlogComponent;

Recommended Related Components

More+

Article Card Component

The component is designed for use in blog posts, news articles, or any platform where articles need to be presented in an organized and engaging manner.

65
0

Article List Component

Suitable for blog posts, news feeds, or any content aggregation where articles need to be presented in a structured manner.

43
0

Responsive Article Layout with Sidebar and Comments

This layout is ideal for content-heavy websites, blogs, or news platforms where organizing articles and user interactions is essential.

28
0