Card

Learn how to use the ProseCard component in your Nuxt app.

Use markdown in the default slot of the card component to highlight your content.

Use the title, icon and color props to customize it. You can also pass any property from the <NuxtLink> component.

Startup

Best suited for small teams, startups and agencies with up to 5 developers.
::card{title="Startup" icon="i-lucide-users" color="primary" to="https://nuxt.lemonsqueezy.com" target="_blank"}
Best suited for small teams, startups and agencies with up to 5 developers.
::

API

Props

Prop Default Type
to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

icon

string

title

string

description

string

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

ui

{ base?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; externalIcon?: ClassNameValue; }

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      card: {
        slots: {
          base: [
            'group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default',
            'transition-colors'
          ],
          icon: 'size-6 mb-2 block',
          title: 'text-highlighted font-semibold',
          description: 'text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1',
          externalIcon: [
            'size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none',
            'transition-colors'
          ]
        },
        variants: {
          color: {
            primary: {
              icon: 'text-primary'
            },
            secondary: {
              icon: 'text-secondary'
            },
            success: {
              icon: 'text-success'
            },
            info: {
              icon: 'text-info'
            },
            warning: {
              icon: 'text-warning'
            },
            error: {
              icon: 'text-error'
            },
            neutral: {
              icon: 'text-highlighted'
            }
          },
          to: {
            true: ''
          },
          title: {
            true: {
              description: 'mt-1'
            }
          }
        },
        compoundVariants: [
          {
            color: 'primary',
            to: true,
            class: {
              base: 'hover:bg-primary/10 hover:border-primary',
              externalIcon: 'group-hover:text-primary'
            }
          },
          {
            color: 'neutral',
            to: true,
            class: {
              base: 'hover:bg-elevated/50 hover:border-inverted',
              externalIcon: 'group-hover:text-highlighted'
            }
          }
        ],
        defaultVariants: {
          color: 'primary'
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          card: {
            slots: {
              base: [
                'group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default',
                'transition-colors'
              ],
              icon: 'size-6 mb-2 block',
              title: 'text-highlighted font-semibold',
              description: 'text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1',
              externalIcon: [
                'size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none',
                'transition-colors'
              ]
            },
            variants: {
              color: {
                primary: {
                  icon: 'text-primary'
                },
                secondary: {
                  icon: 'text-secondary'
                },
                success: {
                  icon: 'text-success'
                },
                info: {
                  icon: 'text-info'
                },
                warning: {
                  icon: 'text-warning'
                },
                error: {
                  icon: 'text-error'
                },
                neutral: {
                  icon: 'text-highlighted'
                }
              },
              to: {
                true: ''
              },
              title: {
                true: {
                  description: 'mt-1'
                }
              }
            },
            compoundVariants: [
              {
                color: 'primary',
                to: true,
                class: {
                  base: 'hover:bg-primary/10 hover:border-primary',
                  externalIcon: 'group-hover:text-primary'
                }
              },
              {
                color: 'neutral',
                to: true,
                class: {
                  base: 'hover:bg-elevated/50 hover:border-inverted',
                  externalIcon: 'group-hover:text-highlighted'
                }
              }
            ],
            defaultVariants: {
              color: 'primary'
            }
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

Callout

Learn how to use the ProseCallout component in your Nuxt app.

CardGroup

Learn how to use the ProseCardGroup component in your Nuxt app.