Prosecard

GitHub también
Cree bloques de contenido resaltados con enlaces y navegación opcionales.

xph0000xUso

Utilice la reducción de valor en la ranura predeterminada del componente card para resaltar su contenido.

También puede pasar cualquier propiedad del componente <NuxtLink> o <RouterLink>.

Startup

Es ideal para equipos pequeños, startups y agencias con hasta 5 desarrolladores.
::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 (Edición española)

Accesorios

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 (Edición española)

Slot Type
default
{}
title
{}

Temas

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 (Edición española)

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.