MazCard

MazCard is a standalone component to display some texts and images and also add button actions

Basic usage

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.

vue

<template>
  <MazCard class="vp-raw" title="Cute Kitten">
    <p class="maz-text-muted">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an
      unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </MazCard>
</template>

<script lang="ts" setup>
  import MazCard from 'maz-ui/components/MazCard'
</script>

Advanced usage

Cute Kitten

Cat

View code

vue

<template>
  <MazCard
    :gallery="{ images: ['https://placedog.net/520/520'], height: 300, zoom: true }"
  >
    <template #content-title>
      <h3>
        Cute Kitten
      </h3>
    </template>
    <template #subtitle>
      <span>
        Cat
      </span>
    </template>
    <template #content-body>
      <p class="maz-text-muted">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </template>
    <template #actions>
      <MazBtn
        size="md"
        fab
        color="destructive"
        class="maz-me-2"
      >
        <MazIcon name="trash" />
      </MazBtn>
      <MazBtn
        size="md"
        color="contrast"
      >
        <MazIcon name="user-plus" />
      </MazBtn>
    </template>
  </MazCard>
</template>

<script lang="ts" setup>
  import MazCard from 'maz-ui/components/MazCard'
</script>

Orientation

When you display images, you can change the orientation of the card, available options include: column row row-reverse column-reverse

Row

Cute Kitten

View code

html

<MazCard :gallery="{ images: ['https://placedog.net/450/450'] }" orientation="row">
  <template #content-title>
    <h3> Cute Kitten </h3>
  </template>
  <template #content-body>
    <p class="maz-text-muted">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </template>
</MazCard>

Row Reverse

Cute Kitten

View code

html

<MazCard
  :gallery="{ images: ['https://placedog.net/380/380'] }"
  orientation="row-reverse"
>
  <template #content-title>
    <h3> Cute Kitten </h3>
  </template>
  <template #content-body>
    <p class="maz-text-muted">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </template>
</MazCard>

Column Reverse

Cute Kitten

View code

html

<MazCard
  :gallery="{ images: ['https://placedog.net/420/420'], height: 300 }"
  orientation="column-reverse"
>
  <template #content-title>
    <h3> Cute Kitten </h3>
  </template>
  <template #content-body>
    <p class="maz-text-muted">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </template>
</MazCard>

Collapsible

Use props: collapsible & v-model:collapse-open

View code

vue

<template>
  <MazCard collapsible title="Lorem Ipsum is simply" block style="margin-bottom: 1rem;">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </MazCard>

  <MazCard collapsible v-model:collapse-open="cardOpen" title="Lorem Ipsum is simply" block>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </MazCard>
</template>

<script setup>
  import { ref } from 'vue'

  const cardOpen = ref(true)
</script>

Linked card

To access the link, simply click the card.

href is the link or to if you use router-link or nuxt-link
href-target is the behavior of the link on click
You can use :scale="false" to remove the scale animation on hover

Click on the card to follow the href link

View code

html

<MazCard
  :gallery="{ images: ['https://placedog.net/400/400'], height: 300 }"
  href="/components/maz-card#linked-card"
  href-target="_blank"
  block
>
  <span>
    Click on the card to follow the href link
  </span>
</MazCard>

No bordered

View code

html

<MazCard :bordered="false">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</MazCard>

Elevation

View code

html

<MazCard elevation :bordered="false">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</MazCard>

Gallery images

View code

html

<MazCard
  :gallery="{
    images: ['https://placedog.net/640/640', 'https://placedog.net/560/560', 'https://placedog.net/720/720', 'https://placedog.net/360/360'],
    displayedCount: 3,
    remaining: true,
    zoom: true,
  }"
>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</MazCard>

Basic

View code

html

<MazCard>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  <template #footer>
    <MazBtn>
      Button
    </MazBtn>
  </template>
</MazCard>

Use the prop option footer-align="left"

View code

html

<MazCard footer-align="left">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  <template #footer>
    <MazBtn>
      Button
    </MazBtn>
  </template>
</MazCard>

Types

type MazGalleryImage =
  | {
      thumbnail?: string
      src: string
      alt?: string
    }
  | string

Props

Name	Description	Type	Required	Default
orientation	Card variant: Must be `column \| row \| row-reverse \| column-reverse`	`"column" \| "row" \| "row-reverse" \| "column-reverse"`	No	`undefined`
href	Make card a link (footer area excluded)	`string`	No	`undefined`
to	Make card a link with a router-link (footer area excluded)	`Native type`	No	`undefined`
href-target	Target option of link: Muse be one of `_blank \| _self \| _parent \| _top \| framename`	`"_blank" \| "_self" \| "_parent" \| "_top" \| string`	No	`undefined`
footer-align	Footer text alignment: `right \| left`	`"right" \| "left"`	No	`undefined`
gallery	Images gallery props options (see `MazGallery` component)	`MazGalleryProps`	No	{ displayedCount: 3, remaining: false, zoom: !href && !to, width: 200, height: 150 }` If `href` or `to` is set, `zoom` is set to `false
scale	scale animation on hover (only linked cards)	`boolean`	No	`undefined`
elevation	Set elevation to card (box-shadow)	`boolean`	No	`undefined`
radius	Set radius to card	`boolean`	No	`undefined`
bordered	Set border to card (in dark mode, the card is always bordered)	`boolean`	No	`undefined`
wrapper-class	add classes to wrapper	`Native type`	No	`undefined`
padding	Remove padding from content wrapper	`boolean`	No	`undefined`
overflow-hidden	Hide overflow	`boolean`	No	`undefined`
collapsible	Make card collapsible	`boolean`	No	`undefined`
collapse-open	`v-model:collapse-open` Card is open by default if `true`	`boolean`	No	`undefined`
title	Title of the card in header	`string`	No	`undefined`
block	The card will be displayed in full width	`boolean`	No	`undefined`

Events

Event name	Properties	Description
update:collapseOpen		Update the collapseOpen model

Slots

Name	Description	Bindings
title	The title of the card
content-title	The title of the card	collapse-open `mixed` - The collapse open state of the card
content-subtitle	The subtitle of the card
content-body	The body of the card
default	The content of the card	collapse-open `mixed` - The collapse open state of the card
footer	The footer of the card
actions	The actions of the image gallery (only if gallery is displayed)

Icons

MazCard

Basic usage

Advanced usage

Orientation

Row

Cute Kitten

Row Reverse

Cute Kitten

Column Reverse

Cute Kitten

Collapsible

Linked card

No bordered

Elevation

Gallery images

Footer slot

Basic

Footer aligned on left

Types

Props

Events

Slots

MazCard ​

Basic usage ​

Advanced usage ​

Orientation ​

Row ​

Cute Kitten

Row Reverse ​

Cute Kitten

Column Reverse ​

Cute Kitten

Collapsible ​

Linked card ​

No bordered ​

Elevation ​

Gallery images ​

Footer slot ​

Basic ​

Footer aligned on left ​

Types ​

Props ​

Events ​

Slots ​

MazCard

Basic usage

Advanced usage

Orientation

Row

Row Reverse

Column Reverse

Collapsible

Linked card

No bordered

Elevation

Gallery images

Footer slot

Basic

Footer aligned on left

Types

Props

Events

Slots