Card

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

<template>
  <mt-card title="Title" subtitle="Subtitle">
    <p>
      Group related content, metadata, and local actions inside a bordered
      surface so the section reads as one connected area.
    </p>
  </mt-card>
</template>

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

<template>
  <mt-card title="Customer details">
    <template #avatar>
      <mt-avatar first-name="Max" last-name="Mustermann" variant="square" />
    </template>

    <template #headerRight>
      <mt-button variant="secondary">Edit</mt-button>
    </template>

    <p>Use header content to add context and a related secondary action.</p>
  </mt-card>
</template>

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

const tabItems = [
  { label: "Overview", name: "overview" },
  { label: "History", name: "history" },
];
</script>

<template>
  <mt-card title="Customer details" subtitle="Account overview">
    <template #tabs>
      <mt-tabs default-item="overview" :items="tabItems" />
    </template>

    <p>Use tabs to switch between closely related views that still belong to the same section.</p>
  </mt-card>
</template>

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

<template>
  <mt-card title="Analytics" subtitle="Latest report" is-loading>
    <p>Loading overlays the content area while the card keeps its layout.</p>
  </mt-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MtCard from "@shopware-ag/meteor-component-library/MtCard";

const inheritance = ref(true);
</script>

<template>
  <mt-card
    title="Product settings"
    subtitle="Inherited from parent configuration"
    :inheritance="inheritance"
    @update:inheritance="inheritance = $event"
  >
    <p>
      Use the inheritance toggle when a card represents values that can be linked
      or overridden.
    </p>
  </mt-card>
</template>

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

<template>
  <mt-card title="Customer details">
    <mt-inset>
      <mt-text as="h3" size="m" weight="bold">Headline</mt-text>

      <mt-text>
        Use inset content when the inner block should visually extend to the
        card edges while still respecting the card's own spacing tokens.
      </mt-text>
    </mt-inset>
  </mt-card>
</template>

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

<template>
  <mt-card title="Customer details">
    <p>Use inset footer content when the footer should stretch edge to edge.</p>

    <template #footer>
      <mt-inset
        style="
          background: var(--color-elevation-surface-sunken);
          padding: var(--mt-card-footer-padding);
        "
      >
        <mt-text as="h3" size="m" weight="bold">Footer content</mt-text>

        <mt-text>
          The inset keeps the footer aligned with the card's own spacing while
          allowing a full-width surface treatment inside the footer area.
        </mt-text>
      </mt-inset>
    </template>
  </mt-card>
</template>