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

<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
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