Components : Article List Component

Preview content adapted to proportion

Article List Component

Blog

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

Displays a list of articles with their titles, authors, read times, and comment counts.

Users can hover over articles to see a subtle scale and shadow effect. Each article provides a clear title, author, and read time, with a comment count visible for engagement.


The layout adjusts based on screen size, with one column on smaller screens and up to three columns on larger screens. Articles maintain their structure and readability across all devices.

Date : June 05, 2025
Views : 42
Copys : 0

fa-tags

Websites, blogs, news platforms, content hubs Social media platforms Online magazines

Code

<div class="container mx-auto px-4 py-12">
 <div class="columns-1 gap-6 space-y-6 md:columns-2 lg:columns-3 xl:gap-8 xl:space-y-8">
  <article class="break-inside-avoid bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 group">
   <div class="flex items-center mb-4">
    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
     <span class="text-2xl">
      🦄
     </span>
    </div>
    <div>
     <h3 class="font-bold text-blue-600 text-lg">
      Modern Web Development
     </h3>
     <p class="text-sm text-gray-500">
      Published 2 days ago
     </p>
    </div>
   </div>
   <h3 class="text-xl font-semibold text-gray-800 mb-3">
    Building Scalable Applications
   </h3>
   <p class="text-gray-600 leading-relaxed mb-4">
    Explore cutting-edge techniques for creating robust web applications with modern frameworks...
   </p>
   <div class="flex items-center justify-between text-sm">
    <div class="flex items-center">
     <span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
      👤
     </span>
     <span class="text-orange-500 font-medium">
      Sarah Wilson
     </span>
    </div>
    <span class="text-gray-500">
     8 min read
    </span>
   </div>
   <div class="mt-6 flex gap-2">
    <div class="flex items-center">
     <span class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
      💬
     </span>
     <span class="ml-2 text-gray-600">
      24 comments
     </span>
    </div>
   </div>
  </article>
  <article class="break-inside-avoid bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 group">
   <div class="flex items-center mb-4">
    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
     <span class="text-2xl">
      🚀
     </span>
    </div>
    <div>
     <h3 class="font-bold text-blue-600 text-lg">
      UI Design Patterns
     </h3>
     <p class="text-sm text-gray-500">
      Published 1 week ago
     </p>
    </div>
   </div>
   <h3 class="text-xl font-semibold text-gray-800 mb-3">
    Responsive Layout Systems
   </h3>
   <p class="text-gray-600 leading-relaxed mb-4">
    Master the art of creating flexible layouts that adapt seamlessly across different devices...
   </p>
   <div class="flex items-center justify-between text-sm">
    <div class="flex items-center">
     <span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
      👤
     </span>
     <span class="text-orange-500 font-medium">
      Michael Chen
     </span>
    </div>
    <span class="text-gray-500">
     12 min read
    </span>
   </div>
   <div class="mt-6 flex gap-2">
    <div class="flex items-center">
     <span class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
      💬
     </span>
     <span class="ml-2 text-gray-600">
      18 comments
     </span>
    </div>
   </div>
  </article>
 </div>
</div>


<template>
 <div class="container mx-auto px-4 py-12">
  <div class="columns-1 gap-6 space-y-6 md:columns-2 lg:columns-3 xl:gap-8 xl:space-y-8">
   <article class="break-inside-avoid bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 group">
    <div class="flex items-center mb-4">
     <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
      <span class="text-2xl">
       🦄
      </span>
     </div>
     <div>
      <h3 class="font-bold text-blue-600 text-lg">
       Modern Web Development
      </h3>
      <p class="text-sm text-gray-500">
       Published 2 days ago
      </p>
     </div>
    </div>
    <h3 class="text-xl font-semibold text-gray-800 mb-3">
     Building Scalable Applications
    </h3>
    <p class="text-gray-600 leading-relaxed mb-4">
     Explore cutting-edge techniques for creating robust web applications with modern frameworks...
    </p>
    <div class="flex items-center justify-between text-sm">
     <div class="flex items-center">
      <span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
       👤
      </span>
      <span class="text-orange-500 font-medium">
       Sarah Wilson
      </span>
     </div>
     <span class="text-gray-500">
      8 min read
     </span>
    </div>
    <div class="mt-6 flex gap-2">
     <div class="flex items-center">
      <span class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
       💬
      </span>
      <span class="ml-2 text-gray-600">
       24 comments
      </span>
     </div>
    </div>
   </article>
   <article class="break-inside-avoid bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 group">
    <div class="flex items-center mb-4">
     <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
      <span class="text-2xl">
       🚀
      </span>
     </div>
     <div>
      <h3 class="font-bold text-blue-600 text-lg">
       UI Design Patterns
      </h3>
      <p class="text-sm text-gray-500">
       Published 1 week ago
      </p>
     </div>
    </div>
    <h3 class="text-xl font-semibold text-gray-800 mb-3">
     Responsive Layout Systems
    </h3>
    <p class="text-gray-600 leading-relaxed mb-4">
     Master the art of creating flexible layouts that adapt seamlessly across different devices...
    </p>
    <div class="flex items-center justify-between text-sm">
     <div class="flex items-center">
      <span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
       👤
      </span>
      <span class="text-orange-500 font-medium">
       Michael Chen
      </span>
     </div>
     <span class="text-gray-500">
      12 min read
     </span>
    </div>
    <div class="mt-6 flex gap-2">
     <div class="flex items-center">
      <span class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
       💬
      </span>
      <span class="ml-2 text-gray-600">
       18 comments
      </span>
     </div>
    </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="container mx-auto px-4 py-12">
 <div class="columns-1 gap-6 space-y-6 md:columns-2 lg:columns-3 xl:gap-8 xl:space-y-8">
  <article class="break-inside-avoid bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 group">
   <div class="flex items-center mb-4">
    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
     <span class="text-2xl">
      🦄
     </span>
    </div>
    <div>
     <h3 class="font-bold text-blue-600 text-lg">
      Modern Web Development
     </h3>
     <p class="text-sm text-gray-500">
      Published 2 days ago
     </p>
    </div>
   </div>
   <h3 class="text-xl font-semibold text-gray-800 mb-3">
    Building Scalable Applications
   </h3>
   <p class="text-gray-600 leading-relaxed mb-4">
    Explore cutting-edge techniques for creating robust web applications with modern frameworks...
   </p>
   <div class="flex items-center justify-between text-sm">
    <div class="flex items-center">
     <span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
      👤
     </span>
     <span class="text-orange-500 font-medium">
      Sarah Wilson
     </span>
    </div>
    <span class="text-gray-500">
     8 min read
    </span>
   </div>
   <div class="mt-6 flex gap-2">
    <div class="flex items-center">
     <span class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
      💬
     </span>
     <span class="ml-2 text-gray-600">
      24 comments
     </span>
    </div>
   </div>
  </article>
  <article class="break-inside-avoid bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 group">
   <div class="flex items-center mb-4">
    <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
     <span class="text-2xl">
      🚀
     </span>
    </div>
    <div>
     <h3 class="font-bold text-blue-600 text-lg">
      UI Design Patterns
     </h3>
     <p class="text-sm text-gray-500">
      Published 1 week ago
     </p>
    </div>
   </div>
   <h3 class="text-xl font-semibold text-gray-800 mb-3">
    Responsive Layout Systems
   </h3>
   <p class="text-gray-600 leading-relaxed mb-4">
    Master the art of creating flexible layouts that adapt seamlessly across different devices...
   </p>
   <div class="flex items-center justify-between text-sm">
    <div class="flex items-center">
     <span class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
      👤
     </span>
     <span class="text-orange-500 font-medium">
      Michael Chen
     </span>
    </div>
    <span class="text-gray-500">
     12 min read
    </span>
   </div>
   <div class="mt-6 flex gap-2">
    <div class="flex items-center">
     <span class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
      💬
     </span>
     <span class="ml-2 text-gray-600">
      18 comments
     </span>
    </div>
   </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.

63
0

Article List Component

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

42
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.

27
0