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>