twostraws / Ignite

A static site generator for Swift developers.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Haibo-Zhou opened this issue · comments

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.

Screenshot 2024-07-26 at 09 49 53
    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)
        }