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](https://private-user-images.githubusercontent.com/48485729/352339258-22ddc04f-0168-4275-9498-263620366af8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxNjM4OTgsIm5iZiI6MTcyNDE2MzU5OCwicGF0aCI6Ii80ODQ4NTcyOS8zNTIzMzkyNTgtMjJkZGMwNGYtMDE2OC00Mjc1LTk0OTgtMjYzNjIwMzY2YWY4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIwVDE0MTk1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTcxOGNmZTRlMGFmMDM0NDVhMzFiMDQyZjAyYzJkOTc2ZTk2YjFmMTVlYWZhZDBkMTA0ZmZkYmMxOWQ5ZWJkNmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Y8CNPXRzv5tkIZhM-H2I0L35vfY01BMxpUe44dcOm-c)
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)
}