Proséquence

GitHub à
Créez des blocs de contenu surlignés avec des liens et une navigation optionnels.

Utilisation

Utilisez le markdown dans l'emplacement par défaut du composant card pour mettre en évidence votre contenu.

Vous pouvez également passer n'importe quelle propriété du composant <NuxtLink> ou <RouterLink>.

Startup

Idéal pour les petites équipes, les startups et les agences comptant jusqu'à 5 développeurs.
::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 | it | et
target
null | "_blank" | "_parent" | "_self" | "_top" | string
icon
any
title
string
description
string
color
'primary'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
ui
{ base?: SlotClass; icon?: SlotClass; title?: SlotClass; description?: SlotClass; externalIcon?: SlotClass; }

Slots

Slot Type
default
{}
title
{}

Thème

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 end-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 outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
              externalIcon: 'group-hover:text-primary'
            }
          },
          {
            color: 'neutral',
            to: true,
            class: {
              base: 'hover:bg-elevated/50 hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]: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 end-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 outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
                  externalIcon: 'group-hover:text-primary'
                }
              },
              {
                color: 'neutral',
                to: true,
                class: {
                  base: 'hover:bg-elevated/50 hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]: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

Highlight important information with eye-catching colored boxes and icons.

CardGroup

Organize multiple cards in responsive grid layouts for better content presentation.