Card

Import

import { Card } from "react-sheikah-ui";

Usage

The Card component is used as a container. Components such as text and images can be placed on them in a way that clearly indicates hierarchy.

import { Card } from "react-sheikah-ui";

<Card style={{ padding: "2rem" }}>
  <Text>This is the content inside the card</Text>
</Card>

<Card withBorder style={{ padding: "1.25rem", maxWidth: 300 }}>
  <Text variant='title-2' withDivider>Arrow x5</Text>
  <Text variant='small'>The shafts of these arrows were carved from the wood of a sturdy tree.</Text>
</Card>

Available Props

edges

Optional Defines the edges of the card. Available to fill with hard or soft, defaults to hard.

import { Card } from "react-sheikah-ui";

// hard
<Card edges='hard' style={{ padding: "2rem", width: "80%" }}>
  <Text>Card with hard edges</Text>
</Card>

// soft
<Card edges='soft' style={{ padding: "2rem", width: "80%" }}>
  <Text>Card with soft edges</Text>
</Card>

withBorder

Optional Defines the whether to display inside border or not. Defaults to false.

import { Card } from "react-sheikah-ui";

// without border
<Card>
  <Text variant='title-3' withDivider>Salt-Grilled Fish</Text>
  <Text>A simple dish made by rolling a whole fish in natural rock salt before grilling it.</Text>
</Card>

// with border
<Card withBorder>
  <Text variant='title-3' withDivider>Salt-Grilled Fish</Text>
  <Text>A simple dish made by rolling a whole fish in natural rock salt before grilling it.</Text>
</Card>

className

Optional Used to give the component a class.

style

Optional Used to give additional standard style object to the component.