Skip to content

MazCardSpotlight

MazCardSpotlight is a standalone component

This component is better in dark mode

TIP

If you want to increase the border width, you must just add padding @default: var(--maz-border-width) (1px)

Basic usage

Hover this component
To see the magic appear

Effect with multiple cards and with secondary color

avatar image
Ligue 1France
avatar image
Premier LeagueEngland
avatar image
BundesligaGermany
avatar image
EredivisieNetherlands
avatar image
Serie AItaly
avatar image
Primera DivisionSpain
avatar image
Primeira LigaPortugal
avatar image
UEFA Champions LeagueEurope

Props

NameDescriptionTypeRequiredDefault
colorThe color of the component.MazColorNoprimary
elevationAdd elevation to the componentbooleanNotrue
paddingAdd padding to the contentbooleanNotrue
content-classThe classes to apply to the content divNative typeNoundefined
content-styleStyle apply to the content divStyleValueNoundefined
inner-opacityThe opacity of the inner div - should be between 0 and 1 When 0 the spotlight is completely visible When 1 the spotlight is only visible on bordersnumberNo0.95

Slots

NameDescriptionBindings
default