Components : Interactive Article Cards

Preview content adapted to proportion

Interactive Article Cards

Article

Suitable for blogs, news feeds, portfolios, or any platform requiring content aggregation in a visually appealing manner.

Displaying a collection of articles with interactive hover and active states, featuring categorization, author information, and content previews.

Users can hover over articles to see a subtle scale-up effect and a change in background color. The active state provides a further scale-down effect, enhancing user feedback. Categories are displayed as colored tags for easy identification.


The layout adjusts based on screen size, with a single column on small screens and a grid layout on medium and larger screens for better content consumption across devices.

Date : June 16, 2025
Views : 17
Copys : 0

fa-tags

News websites Portfolio showcases Content marketing platforms Corporate blogs

Code

<div class="flex flex-col space-y-6 p-6 sm:p-8 md:grid md:grid-cols-2 md:gap-6 md:space-y-0 xl:grid-cols-3 xl:gap-8">
 <article class="group relative transform-gpu transition-all duration-300 hover:scale-105 active:scale-95">
  <div class="rounded-2xl bg-[#F5F5F5] p-6 shadow-md transition-colors duration-300 hover:bg-[#CBD5E0]">
   <div class="absolute right-4 top-4 flex space-x-2">
    <span class="rounded-full bg-[#4ECDC4] px-3 py-1 text-sm font-medium text-white">
     🔖 Tech
    </span>
   </div>
   <div class="mb-4 flex items-center space-x-3">
    <div class="h-10 w-10 rounded-full bg-[#6B7280] p-2 text-white">
     👤
    </div>
    <div>
     <p class="text-sm font-medium text-[#1F2937]">
      Jane Cooper
     </p>
     <time class="text-xs text-[#6B7280]">
      May 20, 2024
     </time>
    </div>
   </div>
   <h2 class="mb-3 text-2xl font-bold leading-relaxed text-[#1F2937]">
    Future of Web Development
   </h2>
   <p class="mb-4 text-lg font-medium leading-relaxed text-[#6B7280]">
    Exploring next-gen interfaces with AI integration and spatial computing.
   </p>
   <div class="prose text-[#6B7280]">
    <p>
     Advanced neural networks are reshaping interaction patterns while quantum computing promises unprecedented processing speeds...
    </p>
   </div>
  </div>
 </article>
 <article class="group relative transform-gpu transition-all duration-300 hover:scale-105 active:scale-95">
  <div class="rounded-2xl bg-[#F5F5F5] p-6 shadow-md transition-colors duration-300 hover:bg-[#CBD5E0]">
   <div class="absolute right-4 top-4 flex space-x-2">
    <span class="rounded-full bg-[#FF6B6B] px-3 py-1 text-sm font-medium text-white">
     🔖 Design
    </span>
   </div>
   <div class="mb-4 flex items-center space-x-3">
    <div class="h-10 w-10 rounded-full bg-[#6B7280] p-2 text-white">
     👤
    </div>
    <div>
     <p class="text-sm font-medium text-[#1F2937]">
      John Doe
     </p>
     <time class="text-xs text-[#6B7280]">
      May 19, 2024
     </time>
    </div>
   </div>
   <h2 class="mb-3 text-2xl font-bold leading-relaxed text-[#1F2937]">
    UI Evolution Trends
   </h2>
   <p class="mb-4 text-lg font-medium leading-relaxed text-[#6B7280]">
    Minimalist interfaces meet retro-futurism in 2024 design landscape.
   </p>
   <div class="prose text-[#6B7280]">
    <p>
     Blending skeuomorphic elements with flat design creates surprising depth while maintaining digital cleanliness...
    </p>
   </div>
  </div>
 </article>
</div>


<template>
 <div class="flex flex-col space-y-6 p-6 sm:p-8 md:grid md:grid-cols-2 md:gap-6 md:space-y-0 xl:grid-cols-3 xl:gap-8">
  <article class="group relative transform-gpu transition-all duration-300 hover:scale-105 active:scale-95">
   <div class="rounded-2xl bg-[#F5F5F5] p-6 shadow-md transition-colors duration-300 hover:bg-[#CBD5E0]">
    <div class="absolute right-4 top-4 flex space-x-2">
     <span class="rounded-full bg-[#4ECDC4] px-3 py-1 text-sm font-medium text-white">
      🔖 Tech
     </span>
    </div>
    <div class="mb-4 flex items-center space-x-3">
     <div class="h-10 w-10 rounded-full bg-[#6B7280] p-2 text-white">
      👤
     </div>
     <div>
      <p class="text-sm font-medium text-[#1F2937]">
       Jane Cooper
      </p>
      <time class="text-xs text-[#6B7280]">
       May 20, 2024
      </time>
     </div>
    </div>
    <h2 class="mb-3 text-2xl font-bold leading-relaxed text-[#1F2937]">
     Future of Web Development
    </h2>
    <p class="mb-4 text-lg font-medium leading-relaxed text-[#6B7280]">
     Exploring next-gen interfaces with AI integration and spatial computing.
    </p>
    <div class="prose text-[#6B7280]">
     <p>
      Advanced neural networks are reshaping interaction patterns while quantum computing promises unprecedented processing speeds...
     </p>
    </div>
   </div>
  </article>
  <article class="group relative transform-gpu transition-all duration-300 hover:scale-105 active:scale-95">
   <div class="rounded-2xl bg-[#F5F5F5] p-6 shadow-md transition-colors duration-300 hover:bg-[#CBD5E0]">
    <div class="absolute right-4 top-4 flex space-x-2">
     <span class="rounded-full bg-[#FF6B6B] px-3 py-1 text-sm font-medium text-white">
      🔖 Design
     </span>
    </div>
    <div class="mb-4 flex items-center space-x-3">
     <div class="h-10 w-10 rounded-full bg-[#6B7280] p-2 text-white">
      👤
     </div>
     <div>
      <p class="text-sm font-medium text-[#1F2937]">
       John Doe
      </p>
      <time class="text-xs text-[#6B7280]">
       May 19, 2024
      </time>
     </div>
    </div>
    <h2 class="mb-3 text-2xl font-bold leading-relaxed text-[#1F2937]">
     UI Evolution Trends
    </h2>
    <p class="mb-4 text-lg font-medium leading-relaxed text-[#6B7280]">
     Minimalist interfaces meet retro-futurism in 2024 design landscape.
    </p>
    <div class="prose text-[#6B7280]">
     <p>
      Blending skeuomorphic elements with flat design creates surprising depth while maintaining digital cleanliness...
     </p>
    </div>
   </div>
  </article>
 </div>
</template>
<script>
 export default {
    name: 'MyArticleComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyArticleComponent = () => {
    return (
<div>
<div class="flex flex-col space-y-6 p-6 sm:p-8 md:grid md:grid-cols-2 md:gap-6 md:space-y-0 xl:grid-cols-3 xl:gap-8">
 <article class="group relative transform-gpu transition-all duration-300 hover:scale-105 active:scale-95">
  <div class="rounded-2xl bg-[#F5F5F5] p-6 shadow-md transition-colors duration-300 hover:bg-[#CBD5E0]">
   <div class="absolute right-4 top-4 flex space-x-2">
    <span class="rounded-full bg-[#4ECDC4] px-3 py-1 text-sm font-medium text-white">
     🔖 Tech
    </span>
   </div>
   <div class="mb-4 flex items-center space-x-3">
    <div class="h-10 w-10 rounded-full bg-[#6B7280] p-2 text-white">
     👤
    </div>
    <div>
     <p class="text-sm font-medium text-[#1F2937]">
      Jane Cooper
     </p>
     <time class="text-xs text-[#6B7280]">
      May 20, 2024
     </time>
    </div>
   </div>
   <h2 class="mb-3 text-2xl font-bold leading-relaxed text-[#1F2937]">
    Future of Web Development
   </h2>
   <p class="mb-4 text-lg font-medium leading-relaxed text-[#6B7280]">
    Exploring next-gen interfaces with AI integration and spatial computing.
   </p>
   <div class="prose text-[#6B7280]">
    <p>
     Advanced neural networks are reshaping interaction patterns while quantum computing promises unprecedented processing speeds...
    </p>
   </div>
  </div>
 </article>
 <article class="group relative transform-gpu transition-all duration-300 hover:scale-105 active:scale-95">
  <div class="rounded-2xl bg-[#F5F5F5] p-6 shadow-md transition-colors duration-300 hover:bg-[#CBD5E0]">
   <div class="absolute right-4 top-4 flex space-x-2">
    <span class="rounded-full bg-[#FF6B6B] px-3 py-1 text-sm font-medium text-white">
     🔖 Design
    </span>
   </div>
   <div class="mb-4 flex items-center space-x-3">
    <div class="h-10 w-10 rounded-full bg-[#6B7280] p-2 text-white">
     👤
    </div>
    <div>
     <p class="text-sm font-medium text-[#1F2937]">
      John Doe
     </p>
     <time class="text-xs text-[#6B7280]">
      May 19, 2024
     </time>
    </div>
   </div>
   <h2 class="mb-3 text-2xl font-bold leading-relaxed text-[#1F2937]">
    UI Evolution Trends
   </h2>
   <p class="mb-4 text-lg font-medium leading-relaxed text-[#6B7280]">
    Minimalist interfaces meet retro-futurism in 2024 design landscape.
   </p>
   <div class="prose text-[#6B7280]">
    <p>
     Blending skeuomorphic elements with flat design creates surprising depth while maintaining digital cleanliness...
    </p>
   </div>
  </div>
 </article>
</div>

</div>
    )
}
export default MyArticleComponent;

Recommended Related Components

More+

Modern Web Design Patterns

The component is designed to demonstrate best practices in web design, serving as a reference for developers and designers looking to implement cutting-edge UI/UX solutions.

42
0

Future of Web Development Trends

The component is designed to highlight a featured article or section on a website, engaging readers with visually appealing elements.

41
0

Responsive Design and Interactive Navigation Component

Ideal for creating modern, clean websites with intuitive navigation and engaging content presentation.

22
0

Interactive Article Cards

Suitable for blogs, news feeds, portfolios, or any platform requiring content aggregation in a visually appealing manner.

17
0