MazContainer

MazContainer is a lightweight component to wrap content with optional header, border, elevation, and rounded corners - a simpler alternative to MazCard

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

TIP

MazContainer is designed to be a lighter alternative to MazCard. Use it when you need a simple container with basic styling options without the extra features like galleries, collapsible content, or 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.

<template>
  <MazContainer>
    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.
  </MazContainer>
</template>

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

With title

Add a header with a title using the title prop or the title slot.

Section Title

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.

<template>
  <MazContainer title="Section Title">
    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.
  </MazContainer>
</template>

With icons

Add icons to the header using start-icon and end-icon props.

Settings

Configure your application settings here.

User Profile

View and edit your profile information.

<template>
  <MazContainer title="Settings" start-icon="/cog-6-tooth.svg">
    Configure your application settings here.
  </MazContainer>

  <MazContainer title="User Profile" start-icon="/user.svg" end-icon="/pencil.svg">
    View and edit your profile information.
  </MazContainer>
</template>

startIcon and endIcon also accept a full MazIconProps object — pass the same shape <MazIcon> accepts to override the icon size, add a <title> for screen readers, etc.

<MazContainer
  title="Settings"
  :start-icon="{
    icon: MazCog6Tooth,
    size: 'lg',
    title: 'Open settings',
  }"
>
  Configure your application settings here.
</MazContainer>

Styling options

Elevation

Add shadow to make the container stand out.

Container with elevation effect and no border.

<template>
  <MazContainer elevation :bordered="false">
    Container with elevation effect and no border.
  </MazContainer>
</template>

Bordered

By default, the container has a border. You can disable it.

With border (default)

This container has a border.

Without border

This container has no border.

<template>
  <MazContainer title="With border (default)">
    This container has a border.
  </MazContainer>

  <MazContainer title="Without border" :bordered="false">
    This container has no border.
  </MazContainer>
</template>

Transparent

Remove the background color with the transparent prop.

Transparent container

This container has a transparent background.

<template>
  <MazContainer title="Transparent container" transparent>
    This container has a transparent background.
  </MazContainer>
</template>

Rounded sizes

Customize the border radius with the rounded-size prop.

none

sm

md

lg

xl

full

<template>
  <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
    {{ size }}
  </MazContainer>
</template>

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

  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full']
</script>

No padding

Remove internal padding with :padding="false".

No padding

Content without container padding - useful for custom layouts.

<template>
  <MazContainer title="No padding" :padding="false">
    Content without container padding - useful for custom layouts.
  </MazContainer>
</template>

Full width

Use the block prop to make the container take full width.

Full width container

This container spans the full width of its parent.

<template>
  <MazContainer title="Full width container" block>
    This container spans the full width of its parent.
  </MazContainer>
</template>

Custom header

Use the header slot to fully customize the header, or use title, icon-start, and icon-end slots for more granular control.

Custom Header New

Content with a fully customized header.

<template>
  <MazContainer>
    <template #header>
      <div class="flex items-center justify-between w-full px-4 py-3 bg-primary text-primary-foreground">
        <span class="font-semibold">Custom Header</span>
        <MazBadge size="sm" color="white" class="text-primary">
          New
        </MazBadge>
      </div>
    </template>
    Content with a fully customized header.
  </MazContainer>
</template>

Combining options

Dashboard Overview

Users

1,234

Revenue

$12.5k

Orders

567

<template>
  <MazContainer
    title="Dashboard Overview"
    start-icon="/chart-bar.svg"
    elevation
    :bordered="false"
    rounded-size="xl"
    block
  >
    <div class="flex gap-4 flex-wrap">
      <MazContainer class="flex-1 min-w-[150px]">
        <p class="text-muted text-sm">Users</p>
        <p class="text-2xl font-bold">1,234</p>
      </MazContainer>
      <MazContainer class="flex-1 min-w-[150px]">
        <p class="text-muted text-sm">Revenue</p>
        <p class="text-2xl font-bold">$12.5k</p>
      </MazContainer>
      <MazContainer class="flex-1 min-w-[150px]">
        <p class="text-muted text-sm">Orders</p>
        <p class="text-2xl font-bold">567</p>
      </MazContainer>
    </div>
  </MazContainer>
</template>

Props

Name	Description	Type	Required	Default	Possible values
title	Title of the card in header	string	No	-	-
elevation	Add elevation to the component	boolean	No	false	-
padding	Add padding to the content	boolean	No	true	-
bordered	Add border to the component	boolean	No	true	-
rounded-size	Size of the rounded	MazRoundedSize	No	'md'	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
transparent	Remove background color	boolean	No	false	-
overflow-hidden	Hide overflow	boolean	No	true	-
start-icon	Icon displayed on the inline-start edge of the header (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or data: URI) or a full MazIconProps object.	MazIconLike	No	-	-
end-icon	Icon displayed on the inline-end edge of the header (right in LTR, left in RTL). Accepts a bare value or a full MazIconProps object.	MazIconLike	No	-	-
icon-size	Size of the icon	MazIconSize	No	"md"	-
block	Display the container in full width	boolean	No	false	-
content-class	Additional class to add to the content wrapper	string	No	-	-

Slots

Name	Description	Bindings
header	Replace the header	-
icon-start	inline-start edge of the header (left in LTR, right in RTL)	-
title	title	-
icon-end	inline-end edge of the header (right in LTR, left in RTL)	-
default	content of the container	-