Hero Layout

Full Page Layout for Homepage, excluding main content

Hero Layout Sample(s):

Security, meet savings

Professional and Small Business Insurance is a cinch with Berxi.

Get a Quote Have a quote already? View your saved quote

Headline

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

The smart, simple choice.Take 2 minutes and see for yourself.

Have a quote already?View your saved quote

<header class="m_site-header">
  <div class="m_site-header-wrap container">
    <div class="m_site-header-flex">
      <div class="m_site-header-menu-toggle">
        <button aria-label="open nav menu" id="menu-open" class="mobile-only">
          <svg class="menu" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-menu"></use>
          </svg>
        </button>
        Menu
      </div>
      <a href="/" class="m_site-header-logo-link" aria-label="Return to home page">
        <svg class="m_site-header-logo">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logos-logo-color"></use>
        </svg>
      </a>
      <div class="m_site-header-actions">
        <nav class="m_site-header-nav">
          <ul>
            <li class="active">
              <a href="#">Insurance</a>
            </li>
            <li>
              <a href="#">FAQ</a>
            </li>
            <li>
              <a href="#">Resources</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
            <li class="sign-in view-logged-out-only">
              <a href="#">Sign In</a>
            </li>
            <li class="sign-out view-logged-in-only">
              <a href="#">Sign Out</a>
            </li>
            <li class="get-a-quote">
              <a href="#">Get A Quote</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>
<div class="main-wrap bg-white">
	<div class="c_hero-main">
  <div class="c_hero-homepage">
    <div class="c_hero-container">
      <div class="c_hero-img">
        <picture>
          
          <source media='(min-width: 1024px)' srcset='https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=70&fl=progressive&w=1230&h=550,
                                https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=40&fl=progressive&w=2460&h=1100 2x'>
          <source media='(min-width: 768px)' srcset='https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=70&fl=progressive&w=984&h=440,
                                https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=40&fl=progressive&w=1968&h=880 2x'>
          <source media='(min-width: 414px)' srcset='https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=70&fl=progressive&w=690&h=406,
                                https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=40&fl=progressive&w=1380&h=812 2x'>
          <source media='(min-width: 320px)' srcset='https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=70&fl=progressive&w=528&h=308,
                                https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=40&fl=progressive&w=1048&h=616 2x'>
          <img src='https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=70&fl=progressive' srcset='//images.ctfassets.net/cpg1cj8zsc60/N0pY6sQdhfyxKZC32gXe0/bc29bf099b44556806cba7655e50a5a6/berxi_homepage_hero.jpg?fm=jpg&q=70&fl=progressive&w=1230&h=550,
                                https://images.ctfassets.net/cpg1cj8zsc60/4uvW3GUzgpST8GsGq3APkz/cf01ae0c1f77c536c0d4f8ed2e6474aa/hero-img-texture-2.png?fm=jpg&q=40&fl=progressive&w=2460&h=1100 2x' alt='Group of users' class=''>
        </picture>
      </div>

      <div class="c_hero-content-right">
        <div class="c_hero-content">
          <p>
            <span>Security, meet savings</span>
          </p>
          <h1>Professional and Small Business Insurance is a cinch with Berxi.</h1>
        </div>
        <a href="#" class="btn btn-primary" data-tracking-location="c_hero-container" data-tracking-event="get-quote" data-url='/quote'>Get a Quote</a>
        <span>Have a quote already?
          <a class="link__quote" href='#' data-tracking-location="c_hero-container" data-tracking-event="find-quote">View your saved quote</a>
        </span>
      </div>
    </div>
  </div>
</div>
	<main class="container mx-auto">
		Main content goes here.
	</main>
</div>
<div class="call-to-action-wide">
  <div class="call-to-action">
    <div class="call-to-action-primary">
      <h2>The smart, simple choice.<span>Take 2 minutes and see for yourself.</span></h2>
      <div class="call-to-action-button">
        <button type="submit" class="btn btn-primary" data-tracking-location="" data-tracking-event="get-quote" data-url="">Get a Quote</button>
      </div>
    </div>

    <div class="call-to-action-secondary">
      <p>Have a quote already?<span><a class="link__quote" href="#" data-tracking-location="#" data-tracking-event="#">View your saved quote</a></span></p>
    </div>
  </div>
</div>
<footer class="c_footer-primary">
  <div class="container c_footer-wrapper">
    <div class="c_footer__row-one">
      <div class="c_footer-nav-wrapper">
        <div class="c_footer-nav-container">
          <nav>
            <ul>
              <li>
                <a href="#">Insurance</a>
              </li>
              <li>
                <a href="#">Customer Support</a>
              </li>
              <li>
                <a href="#">Resources</a>
              </li>
              <li>
                <a href="#">About</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </nav>
        </div>

        <div class="c_footer-nav-cta">
          <p>Need Help?</p>
          <p>
            <a href="tel:8332423794">833-24-BERXI</a>
          </p>
          <p>
            <a href="tel:8332423794">833-242-3794</a>
          </p>
        </div>
      </div>

      <div>
        <svg>
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logos-logo-white"></use>
        </svg>
      </div>
    </div>

    <div class="c_footer__row-two">
      <p>Ⓒ Copyright 2016
        <span id="copyright"></span> Cinch™ is a part of Berkshire Hathaway Specialty Insurance Company</p>
      <nav>
        <ul>
          <li>
            <a href="#">Privacy Policy</a>
          </li>
          <li>
            <a href="#">Terms of Use</a>
          </li>
          <li>
            <a href="#">NY Residents</a>
          </li>
          <li>
            <a href="#">Disclaimer</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

Hero Image Dimensions

Size (px)	Resolution	Compression	Ideal Raw File Size
3000 x 1354	72dpi	50%	< 200KB