Animated Card

Display information on cards with a hover animation

npm run add AnimatedCard

Use the AnimatedCard component to display cards, or links as a card with a background image that is revealed with an animation upon hover:

Preview

Animated Card in Astro With optional subtitle

Unlock code

<AnimatedCard
    title="Animated Card in Astro"
    subTitle="With optional subtitle"
    href="/page"
    background={{
        src: '/img/card-bg.png',
        alt: 'background',
        width: 320,
        height: 200
    }}
/>

To use the component, specify a background prop that describes the background image, and a title. Optionally, you can also provide a subTitle prop to display additional text under the title.

Setting href is not mandatory either. In case of its absence, a div will be rendered. When specifying a link you can also provide a target prop to set the target of the link.

If your cards are situated below the fold, make sure to also set background.lazy to true to lazy load the image.

API

Unlock code

type AnimatedCardProps = {
    background: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    title: string
    subTitle?: string
    href?: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    className?: string
}

Prop	Purpose
`background.src`	Sets the path for the background image.
`background.alt`	Sets an alternate text for the background image.
`background.width`	Sets the width of the background image.
`background.height`	Sets the height of the background image.
`background.lazy`	Set to `true` to enable lazy loading for the background image.
`title`	Sets the title for the card.
`subTitle`	Sets an optional subtitle under the `title` prop.
`href`	Sets a link for the card.
`target`	Sets the target of the link.
`className`	Pass additional CSS classes for the card.