Card

Features:

• Header
• Action
• Body
• Footer

Usage

<script setup>
import { Card } from 'gurunkit';
</script>

<template>
  <Card> Card Body </Card>
</template>

Card Body

Header

Only rendered when the title prop is set. Contains the card title and the action slot.

<script setup>
import { Card, Button } from 'gurunkit';
</script>

<template>
  <Card title="Card Title"> Card Body </Card>
</template>

Card Title

Card Body

Action Slot

Renders content at the end of the header.

<script setup>
import { Card, Button } from 'gurunkit';
</script>

<template>
  <Card title="Card Title">
    Card Body

    <template #action>
      <Button>Action</Button>
    </template>
  </Card>
</template>

Card Title

Card Body

Body

Always rendered. Renders anything inside the default slot.

Footer

Only rendered when the footer slot is provided. Renders the footer slot.

<script setup>
import { Card, Button } from 'gurunkit';
</script>

<template>
  <Card>
    Card Body
    <template #footer>
      <Button>Footer</Button>
    </template>
  </Card>
</template>

Card Body

API

Props

Name	Type	Required	Default	Description
title	string	❌	-	Card title

Slots

Name	Data	Description
action	-	Render modal header action
default	-	Render modal body
footer	-	Render modal footer