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
{}
{}orientation
"vertical" | "horizontal"
"vertical"color
string
"primary"icon
string
undefinedtitle
string
""description
string
undefinedto
unknown
href
unknown
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
rel
string
activeClass
string
exactActiveClass
string
ariaCurrentValue
string
inactiveClass
string
replace
boolean
external
boolean
custom
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
active
boolean
exact
boolean
exactQuery
boolean
exactMatch
boolean