Card

Generic container for grouping related components together.

#
Documentation

#
Usage

brown glass bottle beside white book on blue and white textile

The majestic world of turtles

Unveiling the secrets.


import beach from "@/demos/beach.jpg";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  EllipsisMenuButton,
  Flex,
} from "@optiaxiom/react";
import {
  Card,
  CardActions,
  CardContent,
  CardDescription,
  CardImage,
  CardLink,
  CardOverflow,
  CardTitle,
} from "@optiaxiom/react/unstable";
import { IconLogout, IconPencil } from "@tabler/icons-react";
import Image from "next/image";
 
export function App() {
  return (
    <Card maxW="xs">
      <CardOverflow>
        <CardImage asChild>
          <Image
            alt="brown glass bottle beside white book on blue and white textile"
            priority
            src={beach}
          />
        </CardImage>
      </CardOverflow>
      <CardContent>
        <Flex flexDirection="row" justifyContent="space-between">
          <CardTitle>
            <CardLink href="#usage">The majestic world of turtles</CardLink>
          </CardTitle>
          <CardActions>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <EllipsisMenuButton
                  appearance="subtle"
                  aria-label="actions"
                  size="sm"
                />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem icon={<IconPencil />}>Edit</DropdownMenuItem>
                <DropdownMenuItem icon={<IconLogout />} intent="danger">
                  Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </CardActions>
        </Flex>
        <CardDescription>Unveiling the secrets.</CardDescription>
      </CardContent>
    </Card>
  );
}

#
Anatomy


import {
  Card,
  CardActions,
  CardCheckbox,
  CardContent,
  CardDescription,
  CardImage,
  CardLink,
  CardOverflow,
  CardTitle,
} from "@optiaxiom/react/unstable";
 
export default () => (
  <Card>
    <CardOverflow>
      <CardActions>
        <CardCheckbox />
      </CardActions>
 
      <CardImage />
    </CardOverflow>
 
    <CardImage />
 
    <CardContent>
      <CardTitle>
        <CardLink />
      </CardTitle>
 
      <CardDescription />
    </CardContent>
  </Card>
);

#
Props

#
Card

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`orientation` The orientation/layout of the elements inside the card. `"horizontal" \| "vertical"` Default: `vertical`

#
CardContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
CardTitle

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`level` Switch between the different h1-h6 levels. `"1" \| "2" \| "3" \| "4"`
`lineClamp` Truncate the text at specific number of lines. `"1" \| "2" \| "3" \| "4"`
`truncate` Whether to truncate the text and add an ellipsis at the end. `false \| true`

#
CardDescription

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`lineClamp` Truncate the text at specific number of lines. `"1" \| "2" \| "3" \| "4"`
`truncate` Whether to truncate the text and add an ellipsis at the end. `false \| true`

#
CardImage

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
CardOverflow

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
CardCheckbox

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`indeterminate` Display a partially checked icon instead of the regular checkmark. `false \| true`
`onCheckedChange` `(checked: boolean) => void`

#
Changelog

#
0.12.1

Added component