Website Layout

Standard header, main, footer layout for marketing sites and landing pages.

Basic Structure

Use data-layout="website" on the body element:

<body data-layout="website">
  <header>
    <nav>
      <a href="#"><strong>Brand</strong></a>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Welcome</h1>
    <p>Your content goes here.</p>
  </main>

  <footer>
    <p>&copy; 2024 Your Company</p>
  </footer>
</body>

Navigation Pattern

The header nav uses flexbox to space the logo and menu:

<header>
  <nav>
    <a href="#"><strong>My Site</strong></a>
    <ul>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
    </ul>
  </nav>
</header>

Hero Section

Build faster with launch.css

A classless CSS framework that just works.

Learn More

<section>
  <h1>Build faster with launch.css</h1>
  <p>A classless CSS framework that just works.</p>
  <div>
    <button>Get Started</button>
    <a href="#" role="button">Learn More</a>
  </div>
</section>

Footer Pattern

<footer>
  <nav>
    <div>
      <strong>Product</strong>
      <ul>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Changelog</a></li>
      </ul>
    </div>
    <div>
      <strong>Company</strong>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Careers</a></li>
      </ul>
    </div>
    <div>
      <strong>Legal</strong>
      <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
      </ul>
    </div>
  </nav>
  <p><small>&copy; 2024 Company Name. All rights reserved.</small></p>
</footer>