Card

A Card component is a versatile UI element used to display content in a structured and visually appealing way. It typically contains related information, such as text, images, buttons, and other elements, within a bordered or shadowed container. Cards are often used for presenting individual items, like products, articles, or profiles, making the content easy to scan and interact with.

Demo

This is sample card.

Usage

import { NCard } from '@nayan-ui/react';
const Card = () => {
return <NCard className="p-3">This is sample card.</NCard>
};
export default Card;

Attributes

NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
childrenReact.ReactNodeRequiredYou can pass card content as children.
onClick(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => voidOptionalYou can get callback when card is clicked.