Container

<script setup lang="ts">
import MtContainer from "@shopware-ag/meteor-component-library/MtContainer";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <mt-container>
    <div class="container-example__content">
      <mt-text size="xs">Content is limited to 960px and centered.</mt-text>
    </div>
  </mt-container>
</template>

<style scoped>
.container-example__content {
  padding: var(--scale-size-16);
  background-color: var(--color-elevation-surface-hover);
  border-radius: var(--border-radius-xs);
}
</style>

Usage

Container keeps page content at a readable width: it fills the available width up to its size and centers itself. It has no padding of its own, so the surrounding page stays in charge of spacing.

import { MtContainer } from "@shopware-ag/meteor-component-library";

Examples

Sizes

Three sizes are available: s (680px), m (960px, the default) and l (1280px). On narrower screens every size simply takes the full width.

<script setup lang="ts">
import MtContainer from "@shopware-ag/meteor-component-library/MtContainer";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <div class="container-sizes">
    <mt-container size="s">
      <div class="container-sizes__content">
        <mt-text size="xs">s · 680px</mt-text>
      </div>
    </mt-container>

    <mt-container size="m">
      <div class="container-sizes__content">
        <mt-text size="xs">m · 960px</mt-text>
      </div>
    </mt-container>

    <mt-container size="l">
      <div class="container-sizes__content">
        <mt-text size="xs">l · 1280px</mt-text>
      </div>
    </mt-container>
  </div>
</template>

<style scoped>
.container-sizes {
  display: grid;
  gap: var(--scale-size-16);
  width: 100%;
}

.container-sizes__content {
  padding: var(--scale-size-16);
  background-color: var(--color-elevation-surface-hover);
  border-radius: var(--border-radius-xs);
}
</style>

Inside a page

Put the padding on the page and the container inside it. Use as to render a semantic element instead of a div.

<script setup lang="ts">
import MtCard from "@shopware-ag/meteor-component-library/MtCard";
import MtContainer from "@shopware-ag/meteor-component-library/MtContainer";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</script>

<template>
  <div class="page">
    <mt-container as="section" size="s">
      <mt-card title="Account">
        <mt-text size="xs">Forms read best at the small width.</mt-text>
      </mt-card>
    </mt-container>
  </div>
</template>

<style scoped>
.page {
  width: 100%;
  padding: var(--scale-size-24);
}
</style>

API reference

Props

Prop	Type	Default
`size` The maximum width of the container: `s` (680px), `m` (960px) or `l` (1280px). The values come from the `--container-size-*` custom properties.	`"s" \| "m" \| "l"`	`"m"`
`as` The element or component that renders the container.	`string \| Component`	`"div"`

Slots

Slot	Bindings
`default`	`any`

Best practices

Use s for forms and settings, m for regular pages and l for wide content such as tables or dashboards.
Keep padding and gaps on the page or a wrapper around the container.
Use one container per page and nest the page content inside it.

Don't

Do not add padding or borders to the container itself; wrap the content instead.
Do not nest containers to fine-tune widths.

Behavior

The widths come from three custom properties defined in the library's global stylesheet. Override them on :root to change the sizes for the whole application.

Size	Custom property	Default
`s`	`--container-size-s`	680px
`m`	`--container-size-m`	960px
`l`	`--container-size-l`	1280px

Card: when content inside the container needs a visible surface and a title.
Inset: when content should break out of its container's padding instead.

Edit this pageorReport an issue

Colorpicker

A form field for choosing and editing a color value.

Data Table

A flexible table for displaying large datasets with pagination, sorting, filtering, and row selection.