Card

Displays a card with header, content, and footer.

Create project

Deploy your new project in one-click.

Usage

It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  cardClassname,
  cardFooterClassname,
} = VM.require("uiisnear.near/widget/card");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Card Content</p>
    </CardContent>
    <CardFooter>
      <p>Card Footer</p>
    </CardFooter>
  </Card>
</Tailwind>

API Reference

Classnames

Classnames available to customize the component.

Function	Classname
Card	cardClassname
CardHeader	cardHeaderClassname
CardTitle	cardTitleClassname
CardDescription	cardDescriptionClassname
CardContent	cardContentClassname
CardFooter	cardFooterClassname

Examples

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

Button Checkbox