Card

Basic button compoment

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

@import { Card } from '@supabase/ui'

Basic

You can define the type of a button using the type prop. There are primary, default, secondary, outline, dashed, and text,

Title of card
This is the content
1import { Card } from "@supabase/ui";
2
3export default function CardBasic() {
4  return <Card title="Title of card">This is the content</Card>;
5}
6

Cover

You can define the type of a button using the type prop. There are primary, default, secondary, outline, dashed, and text,

Title of card
This is the content
1import { Card } from "@supabase/ui";
2
3export default function CardCover() {
4  return (
5    <Card
6      title="Title of card"
7      cover={[
8        <img
9          style={{ height: "256px", margin: 0 }}
10          src="https://images.unsplash.com/photo-1557149289-0b6e90634e02?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D"
11        />,
12      ]}
13    >
14      This is the content
15    </Card>
16  );
17}
18

Meta

You can define the type of a button using the type prop. There are primary, default, secondary, outline, dashed, and text,

Title of card
Title of meta components
Description
1import { Card } from "@supabase/ui";
2
3export default function CardMeta() {
4  return (
5    <Card
6      title="Title of card"
7      cover={[
8        <img
9          style={{ height: "256px", margin: 0 }}
10          src="https://images.unsplash.com/photo-1557149289-0b6e90634e02?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D"
11        />,
12      ]}
13    >
14      <Card.Meta title="Title of meta components" description="Description" />
15    </Card>
16  );
17}
18

Hoverable

You can define the type of a button using the type prop. There are primary, default, secondary, outline, dashed, and text,

Title of card
Title of meta components
Description
1import { Card } from "@supabase/ui";
2
3export default function CardHoverable() {
4  return (
5    <Card
6      hoverable
7      title="Title of card"
8      cover={[
9        <img
10          style={{ height: "256px", margin: 0 }}
11          src="https://images.unsplash.com/photo-1557149289-0b6e90634e02?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D"
12        />,
13      ]}
14    >
15      <Card.Meta title="Title of meta components" description="Description" />
16    </Card>
17  );
18}
19