MazCardSpotlight

MazCardSpotlight is a card with a glowing spotlight that follows the mouse cursor on its border and background, to highlight features, pricing plans or call to actions

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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

<script lang="ts" setup>
import { useTheme } from '@maz-ui/themes/composables/useTheme'
import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'

const { setColorMode } = useTheme()
</script>

<template>
  <MazCardSpotlight style="width: 500px; max-width: 100%;">
    <h3 style="margin-top: 0; Fmargin-bottom: 30px;">
      Hover this component <br>
      To see the magic appear
    </h3>
    <MazBtn color="contrast" @click="setColorMode('light')">
      Switch to light theme
    </MazBtn>
  </MazCardSpotlight>
</template>

Effect with multiple cards and with secondary color

Ligue 1France

Premier LeagueEngland

BundesligaGermany

EredivisieNetherlands

Serie AItaly

Primera DivisionSpain

Primeira LigaPortugal

UEFA Champions LeagueEurope

<div class="grid gap-4 grid-cols-1 mob-l:grid-cols-2 tab-l:grid-cols-3">
  <MazCardSpotlight v-for="competition of competitions" :key="competition.label" color="secondary">
    <div class="flex p-4">
      <MazAvatar
        v-if="competition.areaEnsignUrl"
        :src="competition.areaEnsignUrl"
        style="margin-right: 16px"
        size="0.8rem"
      />
      <div class="truncate flex column">
        <span class="truncate"> {{ competition.label }} </span>
        <span class="truncate"> {{ competition.area }} </span>
      </div>
    </div>
  </MazCardSpotlight>
</div>

Props

Name	Description	Type	Required	Default	Possible values
color	The color of the component.	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
elevation	Add elevation to the component	boolean	No	false	-
padding	Add padding to the content	boolean	No	true	-
content-class	The classes to apply to the content div	ClassValue	No	-	-
content-style	Style apply to the content div	StyleValue	No	-	-
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		-