Skip to main content

Card

A card is a box that shows a quick overview and lets users access more detailed information when needed.

Vector icon

Usage​

import { Button, Card, Text } from "@/components";
import React from "react";

const Example = () => {
  return (
    <Card>
      <Card.CardCover />
      <Card.Title title="Super Sale" />
      <Card.Content>
        <Text>
          Get ready for the biggest shopping event of the season with our Super
          Sale!.
        </Text>
      </Card.Content>
      <Card.Actions>
        <Button size="sm">
          <Button.Text title="See More" />
        </Button>
      </Card.Actions>
    </Card>
  );
};

export default Example;

Props​

Extends the SpacingProps<Theme> & LayoutProps<Theme> & BackgroundColorProps<Theme> from theme

variant​

Type: 'contained' | 'outlined' | 'transparent'

borderRadius​

Type: 'none' | 'rounded-xs' | 'rounded-sm' | 'rounded' | 'rounded-md' 'rounded-lg'| 'rounded-xl' | 'rounded-xxl' | 'rounded-hu' | 'rounded-full'

Rounds the corners of the card.

onLayout​

Type: (event: LayoutChangeEvent) => void

Captures the layout of the card(e.g: width,height).

children​

Type : React.ReactNode