Cards

A flexible card component for displaying content such as titles, descriptions, tags, authors, and more.

The Cards component provides an adaptable layout with various configurations, including optional icons, authors, tags, and alignment.

Installation

npx pixelblock-cli add Cards

This will copy the Cards.tsx file from the PixelBlock templates to your project's components/PixelBlock directory.

your-project/
├── components/
│   └── PixelBlock/
│       └── Cards.tsx
└── ...

---

Usage

After installing the Cards component, you can use it in your Next.js or React application.

Example: Simple Card

import React from "react";
import Cards from "./components/PixelBlock/Cards";

const App = () => (
  <div>
    <Cards
      blok={{
        date: "22 June 2020",
        title: "Sed ut perspiciatis unde omnis at vero blanditils",
        description:
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.",
        tags: ["Proxy", "VPN"],
        readMoreLink: "/blog/sed-ut-perspiciatis-unde-omnis", // Added Read More link
      }}
    />
  </div>
);

export default App;

---

Props

Cards Props

Prop	Type	Default	Description
blok	BlokProps	{}	Object containing the card's content and data.
variant	"center", "left", "right"	"left"	Text alignment and layout direction.
shadow	"sm", "md", "lg"	"md"	Shadow intensity for the card.
radius	"sm", "md", "lg"	"md"	Border radius for the card.
children	ReactNode	undefined	Custom content to be rendered inside the card.

BlokProps

Prop	Type	Default	Description
icon	ReactNode	undefined	An optional icon to display on the card.
title	string	undefined	The title of the card.
description	string	undefined	The main description text for the card.
date	string	undefined	A date string to display on the card.
image	string	undefined	URL for an image to display on the card.
readMoreLink	string	undefined	A link for additional content or details.
tags	string[]	undefined	Array of tags to display as labels.
author	{ name: string, role: string }	undefined	An object containing author name and role.

---

Examples

Card with Static Data

---

Card with Author and Title (Testimonial/Quote)

---

Card with Tags

---

Multiple Cards Example