How to make a whole card or image as a link?

[Haibo-Zhou]

I dig around ignite yesterday, and decide to replace my personal website with it. How to make a whole card or an image as a link? Below is my current achieved, I want to make a HStack to represent my apps in AppStore, and hit each of app image, it goes to relatived app intro page.

    Section {
            Card {
                Image(decorative: "/images/products/movie-fans/movie-fans-logo.png")
                    .resizable()
                    .cornerRadius(24)
                Spacer()
                Link("Movie Fans", target: "/products/ohmusic/oh-music-privacy-policy")
                    .linkStyle(.button)
                    .role(.primary)
            }
            .frame(maxWidth: 200)
            .role(.light)
            .cardStyle(.solid)
            .horizontalAlignment(.center)
            
            Card {
                Image(decorative: "/images/products/movie-fans/movie-fans-logo.png")
                    .resizable()
                    .cornerRadius(24)
                Spacer()
                Link("Movie Fans", target: "/products/ohmusic/oh-music-privacy-policy")
                    .linkStyle(.button)
                    .role(.primary)
            }
            .frame(maxWidth: 200)
            .role(.light)
            .cardStyle(.solid)
            .horizontalAlignment(.center)
            
            
            Card {
                Image(decorative: "/images/products/oh-music/oh-music-logo.png")
                    .resizable()
                    .cornerRadius(24)
                Spacer()
                Link("Oh Music", target: "/products/ohmusic/oh-music-privacy-policy")
                    .linkStyle(.button)
                    .role(.dark)
            }
            .frame(maxWidth: 200)
            .role(.light)
            .cardStyle(.solid)
            .horizontalAlignment(.center)
            
            Spacer(size: .extraLarge)
            Spacer(size: .extraLarge)
            Spacer(size: .extraLarge)
        }

[markstamer]

Hi @Haibo-Zhou, I see you struggle here. Link only supports InlineElement not PageElement. For now you could try to use the onClick modifier in combination with a CustomAction. Also to achieve a pointer when hovering over the card try if you can use the style cursor: pointer;. In summary, see if something like this works:

Card {
    ...
} 
.style("cursor: pointer")
.onClick(CustomAction(""window.location.href='https://www.example.com';")

[vdhamer]

Hi @Haibo-Zhou, I see you struggle here. Link only supports InlineElement not PageElement. For now you could try to use the onClick modifier in combination with a CustomAction. Also to achieve a pointer when hovering over the card try if you can use the style cursor: pointer;. In summary, see if something like this works:

Card {
    ...
} 
.style("cursor: pointer")
.onClick(CustomAction(""window.location.href='https://www.example.com';")

This works (at least I tried it on an Image):

.style("cursor: pointer")
.onClick { CustomAction("window.location.href=\"https://www.example.com\";") }