---
title: "MazCard"
description: "MazCard is a standalone component to display some texts and images and also add button actions"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-card"
---

# MazCard

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

- Package: `maz-ui`
- Import: `import MazCard from 'maz-ui/components/MazCard'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-card

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<template>
  <MazCard class="vp-raw" title="Cute Kitten">
    <p class="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

**Details: 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="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="me-2"
      >
        <MazIcon icon="/trash.svg" />
      </MazBtn>
      <MazBtn
        size="md"
        color="contrast"
      >
        <MazIcon icon="/user-plus.svg" />
      </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

**Details: 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="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

**Details: 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="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

**Details: 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="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`

**Details: 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

- [MazCard](./maz-card.md#linked-card)

**Details: 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

**Details: 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

**Details: 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

**Details: 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>
```

## Footer slot

### Basic

**Details: 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>
```

### Footer aligned on left

Use the prop option `footer-align="start"`

**Details: View code**

```html
<MazCard footer-align="start">
  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

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

## MazCard API

`import MazCard from 'maz-ui/components/MazCard'`

### Props

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

### Events

- `@update:collapseOpen` (payload: `unknown[`): Update the collapseOpen model

### Slots

- `#title`: The title of the card
- `#content-title`: The title of the card Bindings: `collapseOpen: boolean` (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 Bindings: `collapseOpen: boolean` (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)