Card

This is a Cool Card

March 11th 2024

This is a surprisingly good description.

READ MORE

Overview

The Card Component provides a sleek, responsive preview of articles, blogs, or any content pieces. It is designed to give users a snapshot of the article, including a title, optional image, description, and publication date, enticing them to click through for more information. With distinct layouts for desktop and mobile, it ensures a great user experience across all devices.

Features

• Responsive Design: Offers optimized layouts for both desktop and mobile viewing.
• Customizable Content: Supports dynamic content such as titles, descriptions, images, publication dates, and tags.
• Nuxt Link Integration: Utilizes nuxt-link for seamless navigation within a Nuxt application.
• Optional Fields: Allows for optional inclusion of description, date, image, and tags to suit various content types.

Props

The component accepts the following props for customization:

• title (String, required): The main headline of the article or content piece.
• description (String, optional, default null): A brief summary or introduction to the article.
• date (String, optional, default null): The publication date of the article.
• image (String, optional, default null): URL of an image that represents the article.
• tags (Array of Strings, optional, default null): A list of tags or categories associated with the article.
• link (String, optional, default ''): The URL or path to the article's full content.

Example Usage

<CardComponent
  title="Exploring Vue 3 Composition API"
  description="Dive into the Vue 3 Composition API and discover how it can enhance your Vue applications."
  date="2021-09-01"
  image="https://example.com/image.jpg"
  link="/articles/vue-3-composition-api"
/>

Customization

• Content: Modify the title, description, date, image, and tags props to fit the article you wish to preview.
• Styling: The component uses Tailwind CSS for styling. You can adjust the classes to match your design system.

Usage

To integrate the Card Component into your Nuxt application:

1. Ensure you have Nuxt and Tailwind CSS set up in your project.
2. Copy the component code into a new .vue file within your components directory.
3. Import and use the component in your pages or components where you need to display article previews.

Component Code

<script setup lang="ts">
interface PropsInterface {
  title: string;
  description?: string | null;
  date?: string | null;
  image?: string | null;
  tags?: string[] | null;
  link?: string;
}

withDefaults(defineProps<PropsInterface>(), {
  description: null,
  date: null,
  image: null,
  tags: null,
  link: '',
});
</script>

<template>
  <nuxt-link :to="link">
    <!-- DESKTOP VERSION -->
    <div
      class="sm:bt-10 mx-auto my-12 hidden max-w-72 rounded-lg border-4 border-black p-4 shadow-xl transition ease-in-out hover:scale-110 dark:border-primary lg:block"
    >
      <div
        v-if="image"
        class="flex h-40 justify-center overflow-hidden rounded-lg object-cover"
      >
        <img
          :src="image"
          alt="Post Image"
          class="rounded-lg object-cover"
        />
      </div>
      <div class="flex h-40 flex-col justify-between pt-4 text-center">
        <div>
          <h2 class="text-xl font-bold">
            {{ title }}
          </h2>
          <span
            v-if="date"
            class="text-xs"
          >
            {{ date }}
          </span>
          <p
            v-if="description"
            class="mt-4 text-sm"
          >
            {{ description }}
          </p>
        </div>
        <div>
          <span class="text-sm">READ MORE</span>
          <Icon
            name="carbon:arrow-right"
            class="mb-1"
          />
        </div>
      </div>
    </div>

    <!-- MOBILE VERSION -->
    <div
      class="mx-auto mt-xs flex h-40 overflow-hidden rounded-lg border-2 border-black shadow-lg dark:border-primary lg:hidden"
    >
      <div
        v-if="image"
        class="w-1/3"
      >
        <img
          :src="image"
          :alt="title"
          class="h-full w-full object-cover"
        />
      </div>
      <div class="m-4 flex w-2/3 flex-col justify-between">
        <a
          :href="link"
          class="text-md sm:text-lg sm:font-bold"
        >
          {{ title }}
        </a>
        <div
          v-if="description"
          class="hidden truncate sm:block"
        >
          {{ description }}
        </div>
        <div
          v-if="date"
          class="text-sm"
        >
          {{ date }}
        </div>
      </div>
    </div>
  </nuxt-link>
</template>