Card Header

<template>  <section class="flex flex-col lg:flex-row w-full justify-between px-4 py-5 lg:px-6 lg:py-5 border-b border-gray-200">    <div class="flex flex-col gap-y-1">      <div class="flex justify-between gap-x-2">        <div class="flex gap-x-2">          <p class="text-lg font-semibold text-gray-900">Team members</p>          <VBadge rounded="full" small class="!bg-primary-50">            <p class="text-xs font-medium text-primary-700">10/20 seats</p>          </VBadge>        </div>        <VDropdown right buttonWrapperClass="ml-1 lg:hidden">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>          <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full bg-white justify-between px-4 py-5 lg:px-6 lg:py-5 border-b border-gray-200">    <div class="flex flex-col gap-y-1">      <div class="flex justify-between gap-x-2">        <p class="text-lg font-semibold text-gray-900">Team members</p>        <VDropdown right buttonWrapperClass="ml-1 lg:hidden">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>          <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full justify-between bg-white px-4 py-5 lg:px-6 lg:py-5 border-b border-gray-200">    <div class="flex gap-x-4">      <div>        <VAvatar src="/avatar-1.png" :size="56" class="!hidden lg:!flex" />        <VAvatar src="/avatar-1.png" :size="48" class="lg:!hidden" />      </div>      <div class="flex flex-col w-full gap-y-1">        <div class="flex justify-between gap-x-2">          <div class="flex gap-x-2">            <p class="text-lg font-semibold text-gray-900">Olivia Rhye</p>            <VBadge rounded="xl" small class="!bg-primary-50">              <p class="text-xs font-medium text-primary-700">New user</p>            </VBadge>          </div>          <VDropdown right buttonWrapperClass="ml-1 lg:hidden">            <template #activator>                <VDropdownButton color="error" outlined>                  <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />                </VDropdownButton>            </template>              <VDropdownItem text="Calendar" icon="mdi:calendar"/>            <VDropdownItem text="Files" icon="mdi:document" />            <VDropdownItem divider/>            <VDropdownItem text="Timer" icon="mdi:clock"/>          </VDropdown>        </div>        <p class="text-sm text-gray-600">          olivia@morphemelabs.com        </p>      </div>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full justify-between bg-white px-4 py-5 lg:px-6 lg:py-5 border-b border-gray-200">    <div class="flex gap-x-4">      <div>        <VAvatar src="/avatar-1.png" :size="56" class="!hidden lg:!flex" />        <VAvatar src="/avatar-1.png" :size="48" class="lg:!hidden" />      </div>      <div class="flex flex-col w-full gap-y-1">        <div class="flex justify-between gap-x-2">          <p class="text-lg font-semibold text-gray-900">Olivia Rhye</p>          <VDropdown right buttonWrapperClass="ml-1 lg:hidden">            <template #activator>                <VDropdownButton color="error" outlined>                  <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />                </VDropdownButton>            </template>              <VDropdownItem text="Calendar" icon="mdi:calendar"/>            <VDropdownItem text="Files" icon="mdi:document" />            <VDropdownItem divider/>            <VDropdownItem text="Timer" icon="mdi:clock"/>          </VDropdown>        </div>        <p class="text-sm text-gray-600">          olivia@morphemelabs.com        </p>      </div>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full justify-between px-4 py-5 lg:px-6 border-b border-t-8 border-b-gray-200 border-t-primary-700">    <div class="flex flex-col gap-y-1">      <div class="flex justify-between gap-x-2">        <div class="flex gap-x-2">          <p class="text-lg font-semibold text-gray-900">Team members</p>          <VBadge rounded="full" small class="!bg-primary-50">            <p class="text-xs font-medium text-primary-700">10/20 seats</p>          </VBadge>        </div>        <VDropdown right buttonWrapperClass="ml-1 lg:hidden">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>          <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full justify-between px-4 py-5 lg:px-6 border-b border-t-8 border-b-gray-200 border-t-primary-700">    <div class="flex flex-col gap-y-1">      <div class="flex justify-between gap-x-2">        <p class="text-lg font-semibold text-gray-900">Team members</p>        <VDropdown right buttonWrapperClass="ml-1 lg:hidden">          <template #activator>              <VDropdownButton color="error" outlined>                <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />              </VDropdownButton>          </template>          <VDropdownItem text="Calendar" icon="mdi:calendar"/>          <VDropdownItem text="Files" icon="mdi:document" />          <VDropdownItem divider/>          <VDropdownItem text="Timer" icon="mdi:clock"/>        </VDropdown>      </div>      <p class="text-sm text-gray-600">        Manage your team members and their account permissions here.      </p>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full justify-between bg-white px-4 py-5 lg:px-6 lg:py-5 border-b border-t-8 border-b-gray-200 border-t-primary-700">    <div class="flex gap-x-4">      <div>        <VAvatar src="/avatar-1.png" :size="56" class="!hidden lg:!flex" />        <VAvatar src="/avatar-1.png" :size="48" class="lg:!hidden" />      </div>      <div class="flex flex-col w-full gap-y-1">        <div class="flex justify-between gap-x-2">          <div class="flex gap-x-2">            <p class="text-lg font-semibold text-gray-900">Olivia Rhye</p>            <VBadge rounded="xl" small class="!bg-primary-50">              <p class="text-xs font-medium text-primary-700">New user</p>            </VBadge>          </div>          <VDropdown right buttonWrapperClass="ml-1 lg:hidden">            <template #activator>                <VDropdownButton color="error" outlined>                  <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />                </VDropdownButton>            </template>              <VDropdownItem text="Calendar" icon="mdi:calendar"/>            <VDropdownItem text="Files" icon="mdi:document" />            <VDropdownItem divider/>            <VDropdownItem text="Timer" icon="mdi:clock"/>          </VDropdown>        </div>        <p class="text-sm text-gray-600">          olivia@morphemelabs.com        </p>      </div>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>

<template>  <section class="flex flex-col lg:flex-row w-full justify-between bg-white px-4 py-5 lg:px-6 lg:py-5 border-b border-t-8 border-b-gray-200 border-t-primary-700">    <div class="flex gap-x-4">      <div>        <VAvatar src="/avatar-1.png" :size="56" class="!hidden lg:!flex" />        <VAvatar src="/avatar-1.png" :size="48" class="lg:!hidden" />      </div>      <div class="flex flex-col w-full gap-y-1">        <div class="flex justify-between gap-x-2">          <p class="text-lg font-semibold text-gray-900">Olivia Rhye</p>          <VDropdown right buttonWrapperClass="ml-1 lg:hidden">            <template #activator>                <VDropdownButton color="error" outlined>                  <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />                </VDropdownButton>            </template>              <VDropdownItem text="Calendar" icon="mdi:calendar"/>            <VDropdownItem text="Files" icon="mdi:document" />            <VDropdownItem divider/>            <VDropdownItem text="Timer" icon="mdi:clock"/>          </VDropdown>        </div>        <p class="text-sm text-gray-600">          olivia@morphemelabs.com        </p>      </div>    </div>    <div class="flex flex-row gap-x-3 mt-4 lg:mt-0">      <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn>      <VBtn color="secondary">Secondary</VBtn>      <VBtn class="!hidden lg:!inline-flex">Default</VBtn>      <VBtn color="primary">Primary</VBtn>      <VDropdown right buttonWrapperClass="ml-1 hidden lg:flex">        <template #activator>            <VDropdownButton color="error" outlined>              <VBtn icon text flush prefixIcon="mdi:dots-vertical" class="!text-gray-400" />            </VDropdownButton>        </template>        <VDropdownItem text="Calendar" icon="mdi:calendar"/>        <VDropdownItem text="Files" icon="mdi:document" />        <VDropdownItem divider/>        <VDropdownItem text="Timer" icon="mdi:clock"/>      </VDropdown>    </div>  </section></template>