MazCardSpotlight

MazCardSpotlight is a standalone component

INFO

Before you have to import the global css files 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

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

<script lang="ts" setup>
  import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'
  import { useThemeHandler } from 'maz-ui'

  const {
    setDarkTheme,
    setLightTheme,
  } = useThemeHandler()
</script>

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

Props

Prop name	Description	Type	Values	Default
color	The color of the component. @default primary	Color	-	'primary'
noElevation	Remove the elevation of the component @default false	boolean	-	false
padding	Add padding to the content @default true	boolean	-	true
contentClass	The classes to apply to the content div	TSIndexedAccessType	-	undefined
contentStyle	Style apply to the content div	StyleValue	-	undefined
innerOpacity	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 @default 0.95	number	-	0.95

Slots

Name	Description	Bindings
default