MazCard

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

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

Cute Kitten

Cat

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.

View code

vue

<template>
  <MazCard
    :images="['https://loremflickr.com/600/600']"
    :gallery-height="300"
    zoom
  >
    <template #title>
      <h3 style="margin: 0">
        Cute Kitten
      </h3>
    </template>
    <template #subtitle>
      <span>
        Cat
      </span>
    </template>
    <template #content>
      <p class="maz-text-muted" style="margin: 0; margin-top: 20px">
        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="danger"
        class="maz-mr-2"
      >
        <MazIcon name="trash" />
      </MazBtn>
      <MazBtn
        size="md"
        color="white"
      >
        <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 :images="['https://loremflickr.com/600/600']" orientation="row">
  <template #title>
    <h3 style="margin: 0; margin-bottom: 20px">
      Cute Kitten
    </h3>
  </template>
  <template #content>
    <p class="maz-text-muted" style="margin: 0">
      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
  :images="['https://loremflickr.com/600/600']"
  orientation="row-reverse"
>
  <template #title>
    <h3 style="margin: 0; margin-bottom: 20px">
      Cute Kitten
    </h3>
  </template>
  <template #content>
    <p class="maz-text-muted" style="margin: 0">
      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
  :images="['https://loremflickr.com/600/600']"
  orientation="column-reverse"
>
  <template #title>
    <h3 style="margin: 0; margin-bottom: 20px">
      Cute Kitten
    </h3>
  </template>
  <template #content>
    <p class="maz-text-muted" style="margin: 0">
      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 & collapse-open

View code

html

<MazCard collapsible style="width: 100%; margin-bottom: 16px;">
  <template #header>
    <h4 style="margin: 0">
      Lorem Ipsum is simply
    </h4>
  </template>
  <template #content>
    <div style="padding: 16px;">
      <p style="margin: 0">
        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>
    </div>
  </template>
</MazCard>

<MazCard collapsible collapse-open style="width: 100%;">
  <template #header>
    <h4 style="margin: 0">
      Lorem Ipsum is simply
    </h4>
  </template>
  <template #content>
    <div style="padding: 16px;">
      <p style="margin: 0">
        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>
    </div>
  </template>
</MazCard>

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
  :images="['https://loremflickr.com/1000/1000']"
  href="/components/maz-card#linked-card"
  href-target="_blank"
  scale
>
  <span>
    Click on the card to follow the href link
  </span>
</MazCard>

Bordered and has no elevation

Gallery images

View code

html

<MazCard
  :images="['https://loremflickr.com/600/600', 'https://loremflickr.com/700/700', 'https://loremflickr.com/400/400', 'https://loremflickr.com/300/300']"
  :images-show-count="3"
  :no-remaining="false"
  zoom
>
  <span>
    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.
  </span>
</MazCard>

Basic

View code

html

<MazCard>
  <span>
    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.
  </span>
  <template #footer>
    <MazBtn>
      Button
    </MazBtn>
  </template>
</MazCard>

Use the prop option footer-align="left"

View code

html

<MazCard footer-align="left">
  <span>
    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.
  </span>
  <template #footer>
    <MazBtn>
      Button
    </MazBtn>
  </template>
</MazCard>

Types

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

Props & Slots

Props

Prop name	Description	Type	Values	Default
images	Images displayed	Array	-	undefined
orientation	Card variant: Must be `column \| row \| row-reverse \| column-reverse`	union	-	'column'
href	Make card a link (footer area excluded)	string	-	undefined
to	Make card a link with a router-link (footer area excluded)	TSIndexedAccessType	-	undefined
hrefTarget	Target option of link: Muse be one of `_blank \| _self \| _parent \| _top \| framename`	union	-	'_self'
footerAlign	Footer text alignment: `right \| left`	union	-	'right'
galleryWidth	Gallery image width	union	-	200
galleryHeight	Gallery image height	union	-	150
zoom	Enable "zoom" image on click (can't be used when the card has a link)	boolean	-
elevation	Set elevation to card (box-shadow)	boolean	-	true
radius	Set radius to card	boolean	-	true
bordered	Set border to card (in dark mode, the card is always bordered)	boolean	-
imagesShowCount	Number of images shown in the gallery	number	-	3
noRemaining	Remove transparent layer with the remain count (ex: +2)	boolean	-	true
scale	scale animation on hover (only linked cards)	boolean	-	true
wrapperClass	add classes to wrapper	TSIndexedAccessType	-	undefined
noPadding	Remove padding from content wrapper	boolean	-
overflowHidden	Hide overflow	boolean	-
collapsable	`@deprecated` Use `collapsible` instead	boolean	-
collapsible	Card can be open and close	boolean	-
collapseOpen	Card is open by default if `true`	boolean	-
header	Title of the card in header	string	-	undefined
block	The card will be displayed in full width	boolean	-

Slots

Name	Description	Bindings
header
default
title
subtitle
content
footer
actions	action of gallery

MazCard

Basic usage

Cute Kitten

Orientation

Row

Cute Kitten

Row Reverse

Cute Kitten

Column Reverse

Cute Kitten

Collapsible

Lorem Ipsum is simply

Lorem Ipsum is simply

Linked card

Gallery images

Footer slot

Basic

Footer aligned on left

Types

Props & Slots

Props

Slots

MazCard ​

Basic usage ​

Cute Kitten

Orientation ​

Row ​

Cute Kitten

Row Reverse ​

Cute Kitten

Column Reverse ​

Cute Kitten

Collapsible ​

Lorem Ipsum is simply

Lorem Ipsum is simply

Linked card ​

Gallery images ​

Footer slot ​

Basic ​

Footer aligned on left ​

Types ​

Props & Slots ​

Props ​

Slots ​

MazCard

Basic usage

Orientation

Row

Row Reverse

Column Reverse

Collapsible

Linked card

Gallery images

Footer slot

Basic

Footer aligned on left

Types

Props & Slots

Props

Slots