VxCard

<vx-card class="mb-8">
  <vs-table stripe pagination :max-items="10" search :data="tableData">
    <!-- ... -->
  </vs-table>
</vx-card>

<vx-card title="Revenue">
  <template slot="actions">
    <feather-icon icon="SettingsIcon" svgClasses="w-6 h-6 text-grey" />
  </template>
  <div slot="no-body" class="p-6 pb-0">
    <!-- conteúdo sem padding -->
  </div>
</vx-card>

<!-- Exemplo sintético — prop subtitle sem uso real encontrado no admin -->
<vx-card
  title="Configurações de Notificações"
  subtitle="Gerencie como e quando você recebe alertas"
>
  <!-- conteúdo -->
</vx-card>

<vx-card class="overflow-hidden">
  <div slot="no-body">
    <div class="p-6 pb-0 flex items-center">
      <feather-icon
        :icon="icon"
        class="p-3 inline-flex rounded-full"
        :class="[`text-${color}`]"
      />
      <div class="truncate">
        <h2 class="mb-1 font-bold">{{ statistic }}</h2>
        <span>{{ statisticTitle }}</span>
      </div>
    </div>
    <div class="line-area-chart">
      <vue-apex-charts type="area" height="100" :options="chartOptions" :series="chartData" />
    </div>
  </div>
</vx-card>

<vx-card no-shadow>
  <div class="flex flex-wrap justify-between items-center mb-8">
    <!-- conteúdo -->
  </div>
</vx-card>

<vx-card class="plan-usage-widget" card-border>
  <div class="plan-usage-header">
    <feather-icon icon="ZapIcon" class="plan-usage-icon" :class="progressTextClass" />
    <div>
      <p class="plan-usage-title">Consumo do Plano</p>
      <p class="plan-usage-subtitle">Monitore o uso da sua conta.</p>
    </div>
  </div>
  <!-- ... -->
</vx-card>

<vx-card title="Configurações Avançadas" collapse-action>
  <p>Conteúdo colapsável do card.</p>
</vx-card>

<vx-card title="Pedidos Recentes" action-buttons @refresh="reloadOrders">
  <!-- conteúdo que será recarregado -->
</vx-card>

<!-- No methods: -->
<!-- reloadOrders(card) { -->
<!--   fetchOrders().then(() => card.removeRefreshAnimation()) -->
<!-- } -->

<!-- Exemplo sintético — slot footer do vx-card sem uso real encontrado no admin -->
<vx-card title="Editar Contato">
  <vs-input label="Nome" v-model="contact.name" class="w-full" />

  <div slot="footer" class="flex flex-wrap items-center p-6">
    <vs-button class="mr-6" @click="save">Salvar</vs-button>
    <vs-button type="border" color="danger" @click="cancel">Cancelar</vs-button>
  </div>
</vx-card>

<!-- Exemplo sintético — no-radius sem uso real encontrado no admin -->
<vx-card title="Relatório Completo" no-radius no-shadow>
  <!-- conteúdo full-width -->
</vx-card>

<!-- Exemplo sintético — card-background sem uso real encontrado no admin -->
<vx-card card-background="primary" no-shadow>
  <p class="text-white">Conteúdo com fundo na cor primária do sistema.</p>
</vx-card>