Appearance

Card ​

Cards are used to represent units of information for a given topic. They can be composed with card subcomponents such as CardContent, CardHeader, CardFooter and CardMedia.

Basic Usage ​

paused

High Profile

Address

PC-0038320

Lorem ipsum dolor sit amet, consectetur adipiscing elit

template
<Card>
  <template #top-left>
    <Chip color="orange" shade="main">paused</Chip>
  </template>

  <template #top-right>
    <Icon name="trashcan" />
  </template>

  <CardHeader title="High Profile" subtitle="Address" text="PC-0038320" />

  <CardContent>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </CardContent>

  <CardFooter>
    <Button inline>Remove</Button>
  </CardFooter>
</Card>

Card Content ​

The CardContent component is used to wrap the main content of the card.

template
<Card>
  <CardContent>
    <Illustration name="warehouse" :size="100"  />
    <Button>Add Warehouse</Button>
  </CardContent>
</Card>

Detaching actions ​

By default, the top slots follow the usual elements flow. However, you can make them absolute positioned by setting the detach-actions prop to true.

sponsored
Brand NameLorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
$3,888.00$3,600.00/case (36 units)
$10.00/unit
template
<Card detach-actions>
  <template #top-left>
    <Chip>sponsored</Chip>
  </template>

  <template #top-right>
    <Icon name="heart-outline" class="tw-text-red-500" size="large" />
  </template>

  <CardMedia src="https://picsum.photos/600.webp?random=1" />

  <CardContent>
    <span>Brand Name</span>
    <span>Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit</span>
    <div>
      <Icon name="tag" size="small"  />
      <span>$3,888.00</span>
      <span>$3,600.00/case (36 units)</span>
    </div>
    <span>$10.00/unit</span>
  </CardContent>
</Card>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.