Appearance

On this page

ZvCard ​

ZvCard is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage ​

Title
My content
vue
<template>
  <ZvCard>
    <template #title-text> Title slot </template>

    <span>
      My content
    </span>
  </ZvCard>
</template>

<script lang="ts" setup>
  import ZvCard from '@zadigetvoltaire/ui/components/ZvCard'
</script>

Collapsible ​

Content
html
<ZvCard collapsible title-text="Title props">
  <span>Content</span>
</ZvCard>
Title
Content
vue
<template>
  <ZvCard :cta="{ action: ctaAction, text: 'Click Me' }" title-text="Title">
    <span>Content</span>
  </ZvCard>
</template>

<script lang="ts" setup>
  function ctaAction() {
    console.log('CTA ACTION')
  }
</script>
Title
Content
vue
<template>
  <ZvCard
    bordered-footer
    title-text="Title"
    :ctas="[
      { action: ctaAction, text: 'Click Me' },
      { href: '/', text: `It's a link`, color: 'gray' },
      { to: { path: '/' }, text: `It's a RouterLink`, color: 'white' }
    ]"
  >
    <span>Content</span>
  </ZvCard>
</template>

<script lang="ts" setup>
  function ctaAction() {
    console.log('CTA ACTION')
  }
</script>
Title
Content Text
Footer Text
html
<ZvCard bordered-footer title-text="Title">
  <template>
    Content Text
  </template>
  <template #footer>
    Footer Text
  </template>
</ZvCard>

Types ​

CTA ​

ts
type CtaProperties = {
  action?: () => unknown
  href?: string
  to?: string
  text?: string
  color?: ButtonColor
}

CTA Color ​

ts
export type ButtonColor = 'black' | 'gray' | 'white'

Made by Zadig&Voltaire