Header | Document | UNITS - Simple and beautiful CSS component set.

1. Basic

Create a basic header.

Lorem ipsum dolor sit amet.

<header class="uc-header">
  <h1 class="uc-header-logo">UNITS</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</header>

2. Color variations

Two kinds of color variations are available.

Lorem ipsum dolor sit amet.

<!-- Black -->
<header class="uc-header _black">
  <h1 class="uc-header-logo">UNITS</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</header>

<!-- Dark -->
<header class="uc-header _dark">
  <h1 class="uc-header-logo">UNITS</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</header>

3. Ghost header

Combined with uc-hero, you can create a transparent header.

Lorem ipsum dolor sit amet.

Hero components

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<header class="uc-header _ghost">
  <h1 class="uc-header-logo">UNITS</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</header>

<div class="uc-hero">
  <div class="uc-hero-bg" style="background-image:url(https://source.unsplash.com/random)"></div>
  <div class="uc-hero-title">Hero components</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

4. Fixed header

Fix the header at the top of the page.

Lorem ipsum dolor sit amet.

<header class="uc-header _fixed">
  <h1 class="uc-header-logo">UNITS</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</header>

5. Header menu (text)

You can add a header menu.

<header class="uc-header">
  <h1 class="uc-header-logo">UNITS</h1>
  <div class="uc-header-menu">
    <a href="#">Menu1</a>
    <a href="#">Menu2</a>
    <a href="#">Menu3</a>
  </div>
</header>

6. Header menu (button)

You can add a header menu button.
It must be combined with uc-menu._slide.

<header class="uc-header">
  <h1 class="uc-header-logo">UNITS</h1>
  <div class="uc-menu-btn _text" data-open-target="#menu">
    <button><i class="uc-menu-btn-icon"></i></button>
  </div>
</header>

<nav class="uc-menu _slide" id="menu">
  <div class="uc-menu-wrap">
    <div class="uc-menu-list">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
    </div>
  </div>
</nav>