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.

<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"
/>

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.

<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>

Slots

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

Props

ui
{}
{}
color
string
"primary"
icon
string
undefined
orientation
"horizontal" | "vertical"
"vertical"
description
string
undefined
title
string
""
to
unknown
href
unknown
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
rel
string
activeClass
string
exactActiveClass
string
ariaCurrentValue
string
inactiveClass
string
exact
boolean
replace
boolean
active
boolean
external
boolean
custom
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
exactQuery
boolean
exactMatch
boolean