Work in Progress
This library is still a work in progress and things will likely change.
Call Us
--- import Container from '@components/Container.astro'; import Logo from '@components/Logo.astro'; import Menu from '@components/Menu.astro'; import MobileMenu from '@components/MobileMenu.astro'; --- <Container as="header" class="flex items-center justify-between gap-8 py-6 relative z-50" > <Logo /> <Menu name="demo" /> <MobileMenu name="demo" showPhoneNumber /> </Container> <!-- /* Usage: <Header /> */ -->
--- import site from '@src/site.js'; import Container from '@components/Container.astro'; import Logo from '@components/Logo.astro'; import Menu from '@components/Menu.astro'; import MobileMenu from '@components/MobileMenu.astro'; --- <Container as="header" class="flex items-center justify-between gap-8 py-6 relative z-50" > <div class="flex items-center gap-8"> <Logo /> <Menu name="demo" /> </div> <div class="flex items-center gap-8"> <a class="no-underline text-lg weight-bold" href={`tel:${site.phone}`}> {site.phone} </a> <MobileMenu name="demo" showPhoneNumber /> </div> </Container> <!-- /* Usage: <Header /> */ -->
--- import site from '@src/site.js'; import Container from '@components/Container.astro'; import Logo from '@components/Logo.astro'; import Icon from '@components/Icon.astro'; import Menu from '@components/Menu.astro'; import MobileMenu from '@components/MobileMenu.astro'; --- <Container as="header" class="flex items-center justify-between gap-8 py-6 relative z-50" > <Logo /> <div class="flex flex-col items-end gap-1"> <div class="flex items-center gap-8"> <p class="hidden items-center gap-1.5 sm:flex"> <Icon name="map-marker" class="w-5 h-5" /> <span class="text-gray-700">Bromley, UK</span> </p> <a class="no-underline text-lg weight-bold" href={`tel:${site.phone}`} > {site.phone} </a> <MobileMenu name="demo" showPhoneNumber /> </div> <Menu name="demo" /> </div> </Container> <!-- /* Usage: <Header /> */ -->
Bromley, UK
--- import site from '@src/site.js'; import Container from '@components/Container.astro'; import Logo from '@components/Logo.astro'; import Menu from '@components/Menu.astro'; import MobileMenu from '@components/MobileMenu.astro'; import Icon from '@components/Icon.astro'; --- <Container as="header" class="flex items-center justify-between gap-8 py-6 relative z-50" > <Logo /> <div class="flex items-center gap-8"> <Menu name="demo" /> <a class="flex items-center gap-2 no-underline text-lg weight-bold" href={`tel:${site.phone}`} > <Icon name="phone" class="w-7 h-7" /> {site.phone} </a> <MobileMenu name="demo" showPhoneNumber /> </div> </Container> <!-- /* Usage: <Header /> */ -->
--- import Container from '@components/Container.astro'; import Logo from '@components/Logo.astro'; import Menu from '@components/Menu.astro'; import MobileMenu from '@components/MobileMenu.astro'; --- <Container as="header" class="flex items-center justify-between gap-8 py-6 relative z-50 md:justify-center" > <Logo class="md:hidden" /> <MobileMenu showPhoneNumber /> <div class="hidden items-center justify-center gap-8 md:flex"> <Menu name="demoSplitLeft" /> <Logo /> <Menu name="demoSplitRight" /> </div> </Container> <!-- /* Usage: <Header /> */ -->
We use cookies to provide the best experience.