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
Ligue 1France
Premier LeagueEngland
BundesligaGermany
EredivisieNetherlands
Serie AItaly
Primera DivisionSpain
Primeira LigaPortugal
UEFA Champions LeagueEurope
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
color | The color of the component. | MazColor | No | primary |
elevation | Add elevation to the component | boolean | No | true |
padding | Add padding to the content | boolean | No | true |
content-class | The classes to apply to the content div | Native type | No | undefined |
content-style | Style apply to the content div | StyleValue | No | undefined |
inner-opacity | The 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 borders | number | No | 0.95 |
Slots
Name | Description | Bindings |
---|---|---|
default |