Page Header
Page headers provide content and actions related to the current screen.
Simple
Team members
Manage your team members and their account permissions here.
Code
<template> <section class="bg-white m-4 pb-5 border-b border-gray-200"> <VBreadcrumbs :items="[{ title: 'Home', }, { title: 'Settings', }, { title: 'Team', }]" class="!hidden lg:!flex !mb-5" > <template #divider> <VIcon name="ic:baseline-chevron-right" class="h-4 w-4 text-gray-400" /> </template> </VBreadcrumbs> <VBtn prefixIcon="ri:arrow-left-line" text flush class="mb-5 lg:!hidden" > Back </VBtn> <div class="flex flex-col lg:flex-row xl:grid xl:grid-cols-5 gap-x-4"> <div class="col-span-2 mb-4 lg:mb-0"> <p class="text-display-sm font-semibold text-gray-900">Team members</p> <p class="text-gray-600 mt-1">Manage your team members and their account permissions here.</p> </div> <div class="flex flex-col lg:flex-row col-span-3 gap-x-4"> <div class="flex flex-row mb-4 lg:mb-0 gap-x-3"> <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> </div> <VInput placeholder="Search" prependIcon="ri:search-line" wrapperClass="w-full" /> </div> </div> </section></template>Avatar
Olivia Rhye
olivia@morphemelabs.com
Code
<template> <section class="bg-white m-4 pb-5 border-b border-gray-200"> <VBreadcrumbs :items="[{ title: 'Home', }, { title: 'Settings', }, { title: 'Team', }]" class="!hidden lg:!flex !mb-5" > <template #divider> <VIcon name="ic:baseline-chevron-right" class="h-4 w-4 text-gray-400" /> </template> </VBreadcrumbs> <VBtn prefixIcon="ri:arrow-left-line" text flush class="mb-5 lg:!hidden" > Back </VBtn> <div class="flex flex-col lg:flex-row lg:justify-between gap-x-4"> <div class="flex items-center mb-4 lg:mb-0"> <img src="~/assets/images/avatar-1.png" alt="Avatar" class="w-16 h-16 mr-5"> <div class=""> <p class="text-display-sm font-semibold text-gray-900">Olivia Rhye</p> <p class="text-gray-600">olivia@morphemelabs.com</p> </div> </div> <div class="flex flex-col lg:flex-row gap-x-4"> <div class="flex flex-row mb-4 lg:mb-0 gap-x-3"> <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> </div> <VInput placeholder="Search" prependIcon="ri:search-line" wrapperClass="w-full" /> </div> </div> </section></template>Banner Simple
Team members
Manage your team members and their account permissions here.
Code
<template> <section class="bg-white"> <img src="~/assets/images/banner-1.jpg" alt="Banner" class="w-full h-auto hidden lg:block"> <img src="~/assets/images/banner-1-mobile.jpg" alt="Banner" class="w-full h-auto lg:hidden"> <section class="px-4 lg:px-10 xl:px-20"> <div class="pt-5 pb-4 lg:pt-6 lg:mx-5 xl:mx-8 lg:py-6 border-b border-gray-200"> <VBreadcrumbs :items="[{ title: 'Home', }, { title: 'Settings', }, { title: 'Team', }]" class="!hidden lg:!flex !mb-5" > <template #divider> <VIcon name="ic:baseline-chevron-right" class="h-4 w-4 text-gray-400" /> </template> </VBreadcrumbs> <VBtn prefixIcon="ri:arrow-left-line" text flush class="mb-5 lg:!hidden" > Back </VBtn> <div class="flex flex-col lg:justify-between lg:flex-row gap-x-4"> <div class="mb-4 lg:mb-0"> <p class="text-display-sm font-semibold text-gray-900">Team members</p> <p class="text-gray-600 mt-1">Manage your team members and their account permissions here.</p> </div> <div class="flex flex-col lg:flex-row gap-x-4"> <div class="flex flex-row mb-4 lg:mb-0 gap-x-3"> <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> </div> <VInput placeholder="Search" prependIcon="ri:search-line" wrapperClass="w-full" /> </div> </div> </div> </section> </section></template>Banner Avatar
Olivia Rhye
olivia@morphemelabs.com
Code
<template> <section class="bg-white"> <img src="~/assets/images/banner-1.jpg" alt="Banner" class="w-full h-auto hidden lg:block"> <img src="~/assets/images/banner-1-mobile.jpg" alt="Banner" class="w-full h-auto lg:hidden"> <section class="px-4 lg:px-10 xl:px-20"> <div class="flex flex-col lg:flex-row -mt-12 lg:-mt-10 lg:mx-5 xl:mx-8 border-b border-gray-200"> <div class="relative w-24 h-24 lg:w-40 lg:h-40"> <VAvatar src="/avatar-1.png" name="Avatar" size="160" class="!hidden lg:!block !border-4 !border-solid !border-white shadow-lg" /> <VIcon name="ic:round-verified" :size="32" class="absolute !hidden lg:!inline-block bottom-2 right-2 text-primary-600" /> <VAvatar src="/avatar-1.png" name="Avatar" size="96" class="w-24 h-24 lg:!hidden !border-4 !border-solid !border-white shadow-lg" /> <VIcon name="ic:round-verified" :size="24" class="absolute lg:!hidden bottom-1 right-1 text-primary-600" /> </div> <div class="flex flex-col w-full pt-0 -mt-6 lg:mt-0 pb-4 lg:pt-16 lg:pl-6"> <VBreadcrumbs :items="[{ title: 'Home', }, { title: 'Settings', }, { title: 'Team', }]" class="!hidden lg:!flex !mb-5" > <template #divider> <VIcon name="ic:baseline-chevron-right" class="h-4 w-4 text-gray-400" /> </template> </VBreadcrumbs> <VBtn prefixIcon="ri:arrow-left-line" text flush class="mb-4 lg:!hidden self-end" > Back </VBtn> <div class="flex flex-col lg:justify-between lg:flex-row gap-x-4"> <div class="mb-4 lg:mb-0"> <p class="text-display-xs lg:text-display-sm font-semibold text-gray-900">Olivia Rhye</p> <p class="text-gray-600 mt-1">olivia@morphemelabs.com</p> </div> <div class="flex flex-col lg:flex-row lg:flex-wrap-reverse lg:justify-end gap-4"> <div class="flex flex-row gap-x-3"> <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> </div> <VInput placeholder="Search" prependIcon="ri:search-line" wrapperClass="" /> </div> </div> </div> </div> </section> </section></template>Banner Simple Centered
Olivia Rhye
olivia@morphemelabs.com
Code
<template> <section class="bg-white"> <img src="~/assets/images/banner-1.jpg" alt="Banner" class="w-full h-auto hidden lg:block"> <img src="~/assets/images/banner-1-mobile.jpg" alt="Banner" class="w-full h-auto lg:hidden"> <section class="px-4 lg:px-10 xl:px-20"> <div class="flex flex-col items-center pt-5 pb-4 lg:pt-8 lg:mx-5 xl:mx-8 lg:py-6 border-b border-gray-200"> <VBreadcrumbs :items="[{ title: 'Home', }, { title: 'Settings', }, { title: 'Team', }]" class="!hidden lg:!flex !mb-5" > <template #divider> <VIcon name="ic:baseline-chevron-right" class="h-4 w-4 text-gray-400" /> </template> </VBreadcrumbs> <VBtn prefixIcon="ri:arrow-left-line" text flush class="mb-5 lg:!hidden self-start" > Back </VBtn> <div class="flex flex-col w-full lg:w-fit items-center lg:justify-between gap-4"> <div class=""> <p class="text-display-sm font-semibold text-gray-900 text-center">Olivia Rhye</p> <p class="text-gray-600 mt-1 text-center">olivia@morphemelabs.com</p> </div> <div class="flex flex-col w-full gap-4"> <div class="flex flex-row gap-x-3"> <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn> <VBtn color="secondary" class="!hidden lg:!flex">Secondary</VBtn> <VBtn color="secondary" block class="lg:!hidden">Secondary</VBtn> <VBtn class="!hidden lg:!inline-flex">Default</VBtn> <VBtn color="primary" class="!hidden lg:!flex">Primary</VBtn> <VBtn color="primary" block class="lg:!hidden">Primary</VBtn> </div> <VInput placeholder="Search" prependIcon="ri:search-line" wrapperClass="" /> </div> </div> </div> </section> </section></template>Banner Avatar Centered
Olivia Rhye
olivia@morphemelabs.com
Code
<template> <section class="bg-white"> <img src="~/assets/images/banner-1.jpg" alt="Banner" class="w-full h-auto hidden lg:block"> <img src="~/assets/images/banner-1-mobile.jpg" alt="Banner" class="w-full h-auto lg:hidden"> <section class="px-4 lg:px-10 xl:px-20"> <div class="relative flex flex-col items-center pt-5 pb-4 lg:pt-6 lg:mx-5 xl:mx-8 lg:py-6 border-b border-gray-200"> <VBreadcrumbs :items="[{ title: 'Home', }, { title: 'Settings', }, { title: 'Team', }]" class="!hidden lg:!flex !mb-5 absolute left-0" > <template #divider> <VIcon name="ic:baseline-chevron-right" class="h-4 w-4 text-gray-400" /> </template> </VBreadcrumbs> <VBtn prefixIcon="ri:arrow-left-line" text flush class="absolute left-0 top-5 lg:!hidden z-[1]" > Back </VBtn> <div class="flex flex-col w-full lg:w-fit -mt-16 lg:-mt-20 items-center lg:justify-between gap-4"> <div class="relative w-24 h-24 lg:w-40 lg:h-40"> <VAvatar src="/avatar-1.png" name="Avatar" size="160" class="!hidden lg:!block !border-4 !border-solid !border-white shadow-lg" /> <VIcon name="ic:round-verified" :size="32" class="absolute !hidden lg:!inline-block bottom-2 right-2 text-primary-600" /> <VAvatar src="/avatar-1.png" name="Avatar" size="96" class="w-24 h-24 lg:!hidden !border-4 !border-solid !border-white shadow-lg" /> <VIcon name="ic:round-verified" :size="24" class="absolute lg:!hidden bottom-1 right-1 text-primary-600" /> </div> <div> <p class="text-display-xs lg:text-display-sm font-semibold text-gray-900 text-center">Olivia Rhye</p> <p class="text-gray-600 mt-1 text-center">olivia@morphemelabs.com</p> </div> <div class="flex flex-col w-full gap-4"> <div class="flex flex-row gap-x-3"> <VBtn text class="!hidden lg:!inline-flex">Tertiary</VBtn> <VBtn color="secondary" class="!hidden lg:!flex">Secondary</VBtn> <VBtn color="secondary" block class="lg:!hidden">Secondary</VBtn> <VBtn class="!hidden lg:!inline-flex">Default</VBtn> <VBtn color="primary" class="!hidden lg:!flex">Primary</VBtn> <VBtn color="primary" block class="lg:!hidden">Primary</VBtn> </div> <VInput placeholder="Search" prependIcon="ri:search-line" wrapperClass="" /> </div> </div> </div> </section> </section></template>