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 left-icon and right-icon props.

Settings

Configure your application settings here.

User Profile

View and edit your profile information.

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

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

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-left, and icon-right slots for more granular control.

Custom Header New

Content with a fully customized header.

<template>
  <MazContainer>
    <template #header>
      <div class="maz-flex maz-items-center maz-justify-between maz-w-full maz-px-4 maz-py-3 maz-bg-primary maz-text-primary-foreground">
        <span class="maz-font-semibold">Custom Header</span>
        <MazBadge size="0.8rem" color="white" class="maz-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"
    left-icon="chart-bar"
    elevation
    :bordered="false"
    rounded-size="xl"
    block
  >
    <div class="maz-flex maz-gap-4 maz-flex-wrap">
      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
        <p class="maz-text-muted maz-text-sm">Users</p>
        <p class="maz-text-2xl maz-font-bold">1,234</p>
      </MazContainer>
      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
        <p class="maz-text-muted maz-text-sm">Revenue</p>
        <p class="maz-text-2xl maz-font-bold">$12.5k</p>
      </MazContainer>
      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
        <p class="maz-text-muted maz-text-sm">Orders</p>
        <p class="maz-text-2xl maz-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	undefined	-
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	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	No	undefined	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
transparent	Remove background color	boolean	No	false	-
overflow-hidden	Hide overflow	boolean	No	true	-
left-icon	Add icon to the header on the left	IconComponent | string	No	undefined	-
right-icon	Add icon to the header on the right	IconComponent | string	No	undefined	-
icon-size	Size of the icon	MazIconProps['size']	No	md	-
block	Display the container in full width	boolean	No	false	-

Slots

Name	Description	Bindings
header	Replace the header
icon-left	icon left
title	title
icon-right	icon right
default	content of the container