Headers - All Examples

Discover 46 Headers examples available in Loopple

Header Profile

Component from Argon Dashboard Builder
<div class="header d-flex align-items-center rounded-lg removable draggable" style="min-height: 500px; background-image: url(https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
    <!-- Mask -->
    <span class="mask bg-gradient-default rounded-lg opacity-8"></span>
    <!-- Header container -->
    <div class="container-fluid d-flex align-items-center">
        <div class="row">
            <div class="col-lg-7 col-md-10">
            <h1 class="display-2 text-white">Hello Jesse</h1>
            <p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you have made with your work and manage your projects or assigned tasks</p>
            <a href="#!" class="btn btn-neutral">Edit profile</a>
            </div>
        </div>
    </div>
</div>

Header With Navbar And Image

Component from Motion Landing Library Builder
<div class="container flex flex-col mx-auto draggable">
    <div class="relative flex flex-wrap items-center justify-between w-full bg-white group py-7 shrink-0">
      <div>
        <img class="h-8" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"></img>
      </div>
      <div class="items-center justify-between hidden gap-12 text-black md:flex">
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Product</a>
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
      </div>
      <div class="items-center hidden gap-8 md:flex">
        <button class="flex items-center text-sm font-normal text-gray-800 hover:text-gray-900 transition duration-300">Log In</button>
        <button class="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
          Sign Up
        </button>
      </div>
      <button onclick="(() => { this.closest('.group').classList.toggle('open')})()" class="flex md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" fill="black"/>
        </svg>
      </button>
      <div class="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Product</a>
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
        <a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
        <button class="flex items-center text-sm font-normal text-black">Log In</button>
        <button class="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">Sign Up</button>
      </div>
    </div>
    <div class="grid w-full grid-cols-1 my-auto mt-12 mb-8 md:grid-cols-2 xl:gap-14 md:gap-5">
      <div class="flex flex-col justify-center col-span-1 text-center lg:text-start">
        <div class="flex items-center justify-center mb-4 lg:justify-normal">
          <img class="h-5" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-1.png" alt="logo">
          <h4 class="ml-2 text-sm font-bold tracking-widest text-primary uppercase">Explore the Latest Tailwind Template</h4>
        </div>
        <h1 class="mb-8 text-4xl font-extrabold leading-tight lg:text-6xl text-dark-grey-900 font-display">Elevate your website with Motion</h1>
        <p class="mb-6 text-base font-normal leading-7 lg:w-3/4 text-grey-900">
          Say goodbye to endless hours spent on building templates from scratch. Experience the quickest, most responsive, and trendiest dashboard solution available. Seriously.
        </p>
        <div class="flex flex-col items-center gap-4 lg:flex-row">
          <button class="flex items-center py-4 text-sm font-bold text-white px-7 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300 rounded-xl">Get started now</button>
          <button class="flex items-center py-4 text-sm font-medium px-7 text-dark-grey-700 hover:text-dark-grey-900 transition duration-300 rounded-2xl">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-2">
              <path fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" clip-rule="evenodd" />
            </svg>
            Book a free call
          </button>
        </div>
      </div>
      <div class="items-center justify-end hidden col-span-1 md:flex">
        <img class="w-4/5 rounded-md" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/header-1.png" alt="header image">
      </div>
    </div>
  </div>

Header 2

Component from Soft UI Design System Builder
<header class="draggable mt-4">
  <div class="page-header min-vh-75">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 my-auto">
          <h1 class="text-gradient text-warning mb-0">Your Desired</h1>
          <h1 class="mb-4">Experiences</h1>
          <p class="lead">The time is now for it to be okay to be great. For being a bright color. For standing out.</p>
          <div class="buttons">
            <button type="button" class="btn bg-gradient-warning mt-4">Discover</button>
            <button type="button" class="btn text-warning shadow-none mt-4">Read more</button>
          </div>
        </div>
        <div class="col-lg-8 ps-5 pe-0">
          <div class="row">
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow mt-0 mt-lg-7" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desire.jpg" alt="">
            </div>
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/chair.jpg" alt="">
              <img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/facade.jpg" alt="">
            </div>
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow mt-0 mt-lg-5" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/architecture.jpg" alt="">
              <img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/baloon.jpg" alt="">
            </div>
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow mt-3" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/seaside.jpg" alt="">
              <img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/medusa.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Header With Navbar And Image

Component from Motion Landing Library React Builder
<div data-type='div' className="container flex flex-col mx-auto draggable">
 <div data-type='div' className="relative flex flex-wrap items-center justify-between w-full bg-white group py-7 shrink-0">
   <div data-type='div'>
     <img data-type='img'
        className="h-8"
        src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"
      />
    </div>
   <div data-type='div' className="items-center justify-between hidden gap-12 text-black md:flex">
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Product
      </a>
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Features
      </a>
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Pricing
      </a>
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Company
      </a>
    </div>
   <div data-type='div' className="items-center hidden gap-8 md:flex">
     <button data-type='button' className="flex items-center text-sm font-normal text-gray-800 hover:text-gray-900 transition duration-300">
        Log In
      </button>
     <button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
        Sign Up
      </button>
    </div>
   <button data-type='button'
      className="flex md:hidden"
    >
     <svg data-type='svg'
        xmlns="http://www.w3.org/2000/svg"
        width={24}
        height={24}
        viewBox="0 0 24 24"
        fill="none"
      >
       <path data-type='path'
          d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z"
          fill="black"
        />
      </svg>
    </button>
   <div data-type='div' className="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Product
      </a>
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Features
      </a>
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Pricing
      </a>
      <a data-type='a'
        className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
        href="javascript:void(0)"
      >
        Company
      </a>
     <button data-type='button' className="flex items-center text-sm font-normal text-black">
        Log In
      </button>
     <button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
        Sign Up
      </button>
    </div>
  </div>
 <div data-type='div' className="grid w-full grid-cols-1 my-auto mt-12 mb-8 md:grid-cols-2 xl:gap-14 md:gap-5">
   <div data-type='div' className="flex flex-col justify-center col-span-1 text-center lg:text-start">
     <div data-type='div' className="flex items-center justify-center mb-4 lg:justify-normal">
       <img data-type='img'
          className="h-5"
          src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-1.png"
          alt="logo"
        />
       <h4 data-type='h4' className="ml-2 text-sm font-bold tracking-widest text-primary uppercase">
          Explore the Latest Tailwind Template
        </h4>
      </div>
     <h1 data-type='h1' className="mb-8 text-4xl font-extrabold leading-tight lg:text-6xl text-dark-grey-900">
        Elevate your website with Motion
      </h1>
      <p data-type='p' className="mb-6 text-base font-normal leading-7 lg:w-3/4 text-grey-900">
        Say goodbye to endless hours spent on building templates from scratch.
        Experience the quickest, most responsive, and trendiest dashboard
        solution available. Seriously.
      </p>
     <div data-type='div' className="flex flex-col items-center gap-4 lg:flex-row">
       <button data-type='button' className="flex items-center py-4 text-sm font-bold text-white px-7 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300 rounded-xl">
          Get started now
        </button>
       <button data-type='button' className="flex items-center py-4 text-sm font-medium px-7 text-dark-grey-700 hover:text-dark-grey-900 transition duration-300 rounded-2xl">
         <svg data-type='svg'
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            className="w-5 h-5 mr-2"
          >
           <path data-type='path'
              fillRule="evenodd"
              d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
              clipRule="evenodd"
            />
          </svg>
          Book a free call
        </button>
      </div>
    </div>
   <div data-type='div' className="items-center justify-end hidden col-span-1 md:flex">
     <img data-type='img'
        className="w-4/5 rounded-md"
        src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/header-1.png"
        alt="header image"
      />
    </div>
  </div>
</div>

Header 1

Component from Soft UI Design System Builder
<header class="draggable">
  <div class="page-header min-vh-75">
    <div class="oblique position-absolute top-0 h-100 d-md-block d-none">
      <div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n8" style="background-image:url(https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved11.jpg)"></div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
          <h1 class="text-gradient text-primary">Your Work With</h1>
          <h1 class="mb-4">Soft Design System</h1>
          <p class="lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
          <div class="buttons">
            <button type="button" class="btn bg-gradient-primary mt-4">Get Started</button>
            <button type="button" class="btn text-primary shadow-none mt-4">Read more</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Header 13

Header With Forms

Header With Presentation Image

Header With Navbar And Image In The Left

Header With Image And Free Trial Input