Nova

Appearance

Card ​

A Card is a container designed to hold text, photos, and actions related to a single subject. It provides a cohesive space for presenting information and interactive elements together.

Import ​

ts
import {NCard} from '@nova-org/components'

Usage ​

Outline
Modern and responsive.
Code
vue
<template>
  <n-card>
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Outline'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Variant ​

Outline
Modern and responsive.
Flat
Modern and responsive.
Shadow 1
Modern and responsive.
Shadow 2
Modern and responsive.
Code
vue
<template>
  <n-card variant="outline">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Outline'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card variant="flat">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Flat'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card variant="shadow-1">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Shadow 1'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card variant="shadow-2">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Shadow 2'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Hoverable ​

Outline
Modern and responsive.
Flat
Modern and responsive.
Shadow 1
Modern and responsive.
Shadow 2
Modern and responsive.
Code
vue
<template>
  <n-card variant="outline" hoverable>
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Outline'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card variant="flat" hoverable>
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Flat'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card variant="shadow-1" hoverable>
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Shadow 1'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card variant="shadow-2" hoverable>
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Shadow 2'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Radius ​

Full
Modern and responsive.
Large
Modern and responsive.
Medium
Modern and responsive.
Small
Modern and responsive.
None
Modern and responsive.
Code
vue
<template>
  <n-card radius="full">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Full'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card radius="lg">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Large'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card radius="md">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Medium'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card radius="sm">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Small'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card radius="none">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'None'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Colors ​

Default
Modern and responsive.
Primary
Modern and responsive.
Secondary
Modern and responsive.
Success
Modern and responsive.
Warning
Modern and responsive.
Danger
Modern and responsive.
Code
vue
<template>
  <n-card class="n-text-black n-bg-default">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Default'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card class="n-text-white n-bg-primary" >
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Primary'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card class="n-text-white n-bg-secondary" >
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Secondary'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card class="n-text-white n-bg-success" >
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Success'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card class="n-text-white n-bg-warning" >
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Warning'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card class="n-text-white n-bg-danger" >
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Danger'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Sizes ​

Small
Modern and responsive.
Medium
Modern and responsive.
Large
Modern and responsive.
Code
vue
<template>
  <n-card size="sm">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Small'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card size="md">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Medium'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>

  <n-card size="lg">
    <n-text weight="medium" font-size="paragraph" html-tag="div" :text="'Large'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Slots ​

Header slot
Beautiful, fast and modern Vue 3 UI library.
Default slot.
Code
vue
<template>
  <n-card size="lg">
    <template #header>
      <n-text weight="medium" font-size="h5" html-tag="div" :text="'Header slot'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Beautiful, fast and modern Vue 3 UI library.'"/>
    </template>

    <template #default>
      Default slot.
    </template>

    <template #footer>
      <n-button size="sm" label="Footer slot"/>
    </template>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard, NButton} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 400px;
}
</style>

Divider ​

Header separator
Modern and responsive.
Default slot.
Footer separator
Modern and responsive.
Default slot.
Both separator
Modern and responsive.
Default slot.
Code
vue
<template>
  <n-card size="lg" divider="header">
    <template #header>
      <n-text weight="medium" font-size="h5" html-tag="div" :text="'Header separator'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
    </template>

    <template #default>
      Default slot.
    </template>

    <template #footer>
      <n-button size="sm" label="Footer slot"/>
    </template>
  </n-card>

  <n-card size="lg" divider="footer">
    <template #header>
      <n-text weight="medium" font-size="h5" html-tag="div" :text="'Footer separator'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
    </template>

    <template #default>
      Default slot.
    </template>

    <template #footer>
      <n-button size="sm" label="Footer slot"/>
    </template>
  </n-card>

  <n-card size="lg" divider="both">
    <template #header>
      <n-text weight="medium" font-size="h5" html-tag="div" :text="'Both separator'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Modern and responsive.'"/>
    </template>

    <template #default>
      Default slot.
    </template>

    <template #footer>
      <n-button size="sm" label="Footer slot"/>
    </template>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard, NButton} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 200px;
}
</style>

Composition ​

You can use other Nova components inside the card to compose a more complex card.

🚀 Nova UI
Beautiful, fast and modern Vue 3 UI library.
Oriented towards simplicity and ultimate User experience.
Code
vue
<template>
  <n-card divider="header" hoverable variant="shadow-1" size="lg">
    <template #header>
      <n-text weight="medium" font-size="h5" html-tag="div" :text="'🚀 Nova UI'"/>
      <n-text weight="light" font-size="small" html-tag="div" :text="'Beautiful, fast and modern Vue 3 UI library.'"/>
    </template>
    Oriented towards simplicity and ultimate User experience.
    <template #footer>
      <n-button size="sm" label="Primary Action"/>
    </template>
  </n-card>
</template>
vue
<script setup lang="ts">
import {NText, NCard, NButton} from '@nova-org/components'
</script>
vue
<style scoped lang="scss">
.n-card {
  width: 400px;
}
</style>

API ​

Props ​

PropertyTypeDefault valueDescription

Slots ​

SlotDescription