Card

Card displays different types of cards.

API Reference

Props

Card

Name	Type	Default	Description
type*	CardType		The type of the card.
title*	string		The title of the card.
subtitle	string		The subtitle of the card.
icon	IconEnum		The icon of the card.
image	string		The image of the card.
actions	ActionsProps		The actions for the card.

Examples

Basic

import { Section, Header, Cards, Card } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <Card 
        title="Title"
        subtitle="Subtitle"
        icon="ArchiveBoxXMarkIcon"
        type="vertical"
      />
    </Block>
  );
}

With image

import { Section, Header, Cards, Card } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <Card 
        title="Title"
        subtitle="Subtitle"
        image="https://source.unsplash.com/1000x500/?gradient&backgrounds"
        icon="ArchiveBoxXMarkIcon"
        type="vertical"
      />
    </Block>
  );
}

With actions

import { Section, Header, Cards, Card, Actions, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <Card 
        title="Title"
        subtitle="Subtitle"
        icon="ArchiveBoxXMarkIcon"
        type="vertical"
        actions={{ button: { text: "Show more", url: "https://getstage.app" }}}
      />
    </Block>
  );
}

Types

CardType

type CardType = "vertical" | "horizontal" | "small" | "big";

Supported card types for the Card component.