Skip to main content
The Card.vue component is a reusable Vue.js container designed for structured content with optional headers, footers, and a main content area. It allows customization through named slots. The CardHuge.vue component extends Card.vue with additional styling or behavior for larger or more prominent use cases.

​
Features

Customizable Headers and Footers

Includes optional headerLeft, headerRight, and footer slots for structured content.

Dynamic Content

Allows flexible content placement in the main body and slots.

Reusable Design

Use Card.vue for standard containers and CardHuge.vue for larger displays.

​
Usage

import { Card } from '@robojuice/velure-ui';

<template>
  <Card>
    <template #headerLeft>
      <span>Dialog</span><IconAlert />
    </template>

    <template #headerRight>
      <IconAlert />
    </template>

    <InputTextarea label="Description"></InputTextarea>

    <template #footer>
      <button @click="boxes.close('dialog')" class="button-button button-solid">
        Done
      </button>
    </template>
  </Card>
</template>

​
Large Card Example

import { CardHuge } from '@robojuice/velure-ui';

<template>
  <CardHuge>
    <template #headerLeft>
      <span>Dialog</span><IconAlert />
    </template>

    <template #headerRight>
      <IconAlert />
    </template>

    <InputTextarea label="Description"></InputTextarea>

    <template #footer>
      <button @click="boxes.close('dialog')" class="button-button button-solid">
        Done
      </button>
    </template>
  </CardHuge>
</template>

​
Props

This component does not accept any props. Customization is achieved using named slots.

​
Slots

​
headerLeft
slot
Defines content for the left side of the header. <template #headerLeft></template>
​
headerRight
slot
Defines content for the right side of the header. <template #headerRight></template>
​
default
slot
Defines the main content of the container.
​
footer
slot
Defines content for the footer area (optional). <template #footer></template>

​
Example Use Cases

​
Content Container with Headers and Footer

Use the Card component to structure a content box with a header, main body, and footer: 
<template>
  <Card>
    <template #headerLeft>
      <span>Filters</span>
    </template>

    <template #headerRight>
      <button>Reset</button>
    </template>

    <div>
      <p>Select filters for your data:</p>
      <InputTextarea label="Filter Description" />
    </div>

    <template #footer>
      <button>Apply</button>
      <button>Cancel</button>
    </template>
  </Card>
</template>

​
Large Content Container

Use CardHuge for larger or more prominent content: 
<CardHuge>
  <template #headerLeft>
    <span>Important Settings</span>
  </template>

  <p>This container displays important settings for the application.</p>

  <template #footer>
    <button>Save</button>
    <button>Cancel</button>
  </template>
</CardHuge>

​
Notes

  • Slot Customization: The Card and CardHuge components rely entirely on named slots for customization, making them highly flexible for different use cases.
  • Reusability: Use Card.vue for standard containers and CardHuge.vue for larger layouts.
  • Styling: The appearance of these components is controlled by CSS classes applied in the template.
For further customization, refer to the component’s source code.