Default Card
Card title
White background, subtle shadow. This is the baseline—no :has() rules match here.
Go somewhere
.card:has(.btn-fancy)
Card title
Mint gradient background + green border. The card reacts to its button's class.
Fancy Button
.card:has(h3.secondary)
Card title
Coral gradient + uppercase title. A heading class changes the entire card.
Go somewhere
.card:has(.alternate)
Card title
Dark teal theme with inverted text. One paragraph class flips the whole palette.
Go somewhere
.card:has(.btn-special)
Card title
Yellow gradient + amber border. The pill-shaped button triggers a warm theme.
Special Button
.card:has(img.small)
Card title
Lavender gradient + purple border. Image size affects the card's entire appearance.
Go somewhere
Default Card
Card title
Back to baseline for comparison. Same markup structure, just no special classes.
Go somewhere