Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 7 hours.

LandingCard

A pre-built Card with slot support and hover effect.

Usage

Built on top of the Card component, the LandingCard can be used in a LandingGrid or a PageGrid.

Use the title, description, icon and color props to customize the card.

You can also pass any property from the NuxtLink component such as to, target, exact, etc.

Color Palette

Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.

<template>
  <ULandingCard
    title="Color Palette"
    description="Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly."
    icon="i-heroicons-swatch"
    color="primary"
  />
</template>

You can add anything you want in the default slot, an image for example.

You can change the orientation prop from vertical to horizontal to position the slot on the right side of the content.

Portfolio

Veniam minim ipsum anim. Irure voluptate magna dolore id dolore ex quis sint sint et duis dolor enim fugiat.

<template>
  <ULandingCard
    title="Portfolio"
    description="Veniam minim ipsum anim. Irure voluptate magna dolore id dolore ex quis sint sint et duis dolor enim fugiat."
    icon="i-heroicons-photo"
    color="primary"
    orientation="horizontal"
  >
    <img
      src="https://picsum.photos/640/360?grayscale"
      class="w-full rounded-md"
    />
  </ULandingCard>
</template>

Slots

icon
{}
title
{}
description
{}
default
{}
container
{}

Props

target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
to
any
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
rel
(string & {}) | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc"
"noopener""noreferrer""nofollow""sponsored""ugc"
prefetchedClass
string
title
string
undefined
description
string
undefined
icon
string
undefined
color
string
"primary"
orientation
"vertical" | "horizontal"
"vertical"
ui
{}
{}
href
any
replace
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
external
boolean

Config

{
  wrapper: 'relative group isolate rounded-xl background-gradient ring-1 ring-gray-200 dark:ring-gray-800 before:hidden before:lg:block before:absolute before:-inset-[2px] before:h-[calc(100%+4px)] before:w-[calc(100%+4px)] before:z-[-1] before:rounded-[13px] flex-1 flex flex-col shadow',
  to: 'hover:ring-primary-500 dark:hover:ring-primary-400 transition-shadow duration-200',
  base: 'flex-1 flex flex-col overflow-hidden',
  container: '',
  body: {
    base: 'gap-x-8 gap-y-4 rounded-xl flex-1 flex flex-col'
  },
  background: 'bg-white dark:bg-gray-900 hover:bg-opacity-90 dark:hover:bg-opacity-90 transition-[background-opacity]',
  ring: '',
  rounded: 'rounded-xl',
  shadow: '',
  icon: {
    wrapper: 'mb-2 pointer-events-none',
    base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
  },
  title: 'text-gray-900 dark:text-white text-base font-bold truncate',
  description: 'text-[15px] text-gray-500 dark:text-gray-400 mt-1'
}