Adding hover and selected style to the card component

1 Answer 92 Views
Card
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
Martin Herløv asked on 03 Dec 2021, 09:05 AM

I want to ask if there are classes for adding hover and selected styles for the Card?

Would also like the card to act as one big button.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 07 Dec 2021, 05:16 PM

Hi Martin,

It is possible to add a hover style to the Card like this:

<TelerikCard Width="300px" Class="hoverable-card">
    <CardHeader>
        <CardTitle>Tourism</CardTitle>
    </CardHeader>
    <CardImage Src="https://docs.telerik.com/blazor-ui/components/card/images/rome.jpg"></CardImage>
    <CardBody>
        <CardTitle>Rome</CardTitle>
        <CardSeparator></CardSeparator>
        <CardSubTitle>Capital of Italy</CardSubTitle>
    </CardBody>
    <CardFooter>
        Car Footer
    </CardFooter>
</TelerikCard>

<style>
    .hoverable-card:hover {
        background: #fcc;
    }
</style>

 

However, I can't think of a way to achieve the other two requirements - a selected style and click behavior.

The Card is designed to be presentation component, not an interaction component in its core essence. Surely, the Card content can hold interaction components inside it - for example, like in the Actions and Data Cards demos.

If you want to highlight a Card action or state, I can suggest you to use custom CSS classes that change, depending on user behavior. It is also possible for the custom CSS class of a Card to affect child content inside it.

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Tags
Card
Asked by
Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Dimo
Telerik team
Share this question
or