• Marketing

Components

Contents


Use your best judgement when choosing a navigation style for a marketing page. The logo and links should clearly contrast against the background. Ensure you remain within the color scheme when deciding upon link colors.

Dark Navigation

Navigation

White Navigation

Navigation

Sections

The marketing site reuses several components throughout. Stylistically these components can serve as a guideline for creating new, varied components all under the established theme.

Bullet Lists

Bullet lists
<div class="o-container tx-left">
  <div class="u-margin-top-lg u-margin-bottom-md">
    <div class="o-row">
      <div class="o-col-10 o-col-offset-1">
        <h3 class="u-margin-bottom-sm tx-center@md">Section Header Here</h3>
      </div>
    </div>
    <div class="o-row">
      <div class="o-col-10 o-col-offset-1 o-col-12@md o-col-offset-0@md">
        <div class="o-row-flex content-list">
          <div class="o-col-6@md">
            <div class="content-list-item">
              <h4>Title</h4>
              <p>...</p>
            </div>
          </div>
          <div class="o-col-6@md">
            <div class="content-list-item">
              <h4>Title</h4>
              <p>...</p>
            </div>
          </div>
          <div class="o-col-6@md">
            <div class="content-list-item">
              <h4>Title</h4>
              <p>...</p>
            </div>
          </div>
          <div class="o-col-6@md">
            <div class="content-list-item">
              <h4>Title</h4>
              <p>...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Browser - Large

Browser Window
<div class="o-row">
  <div class="o-col-12">
    <div class="browser-bar screen-shadow u-mrg-v-0 u-mrg-h-auto u-pos-relative">
      <img src="/path/to/image.png" alt="">
    </div>
  </div>
</div>

Browser - Small

Adding class screen-fade-out in a container div is handy when you only need to focus on a small portion of an image.

Browser Window
<div class="o-col-12 o-col-6@md">
  <div class="screen-fade-out">
    <div class="browser-bar screen-shadow">
      <img src="/path/to/image.png" alt="">
    </div>
  </div>
</div>

Browser - Dual

Dual Browsers
<div class="o-container">
  <div class="o-row tx-left">
    <div class="o-col-10 o-col-offset-1 o-col-12@md o-col-offset-0@md">
      <div class="o-row">
        <div class="o-col-6@md o-col-5@lg">
          <h3>Title</h3>
          <p>...</p>
        </div>
      </div>
    </div>
  </div>
  <div class="image-side right">
    <div class="browser-bar screen-shadow report hidden-xs">
      <img src="/path/to/image.png" alt="">
    </div>
    <div class="browser-bar screen-shadow">
      <img src="/path/to/image.png" alt="">
    </div>
  </div>
</div>

Browser & iPhone

Browser & iPhone
<div class="o-row">
  <div class="image-side right">
    <div class="browser-bar screen-shadow">
      <img src="/path/to/image.png" alt="">
    </div>
  </div>
  <div class="iphone-container iphone-with-browser screen-shadow screen-fade-out">
    <div class="iphone-camera"></div>
    <div class="iphone-screen">
      <img src="/path/to/image.png" alt="">
    </div>
    <div class="iphone-homebtn"></div>
  </div>
</div>

Highlighter

Highlighter
<div class="o-row">
  <div class="o-col-10 o-col-offset-1 o-col-12@md o-col-offset-0@md o-col-5@lg o-col-push-7@lg collab-item-group">
    <div class="o-row">
      <div class="o-col-6@md o-col-12@lg">
        <div class="collab-item js-collab-item is-active" data-mode="detail-one">
          <h4>Title</h4>
          <p>...</p>
        </div><!-- /collab-item -->
      </div>
      <div class="o-col-6@md o-col-12@lg">
        <div class="collab-item js-collab-item" data-mode="detail-two">
          <h4>Title</h4>
          <p>...</p>
        </div><!-- /collab-item -->
      </div>
      <div class="o-col-6@md o-col-12@lg">
        <div class="collab-item js-collab-item" data-mode="detail-three">
          <h4>Title</h4>
          <p>...</p>
        </div><!-- /collab-item -->
      </div>
      <div class="o-col-6@md o-col-12@lg">
        <div class="collab-item js-collab-item" data-mode="detail-four">
          <h4>Title</h4>
          <p>...</p>
        </div><!-- /collab-item -->
      </div>
    </div>
  </div>
  <div class="o-col-12@md o-col-7@lg o-col-pull-5@lg">
    <div class="o-row">
      <div class="o-col-8@md o-col-offset-2@md o-col-12@lg o-col-offset-0@lg">
        <div class="tx-center">
          <img src="/path/to/image.png" alt="">
        </div>
        <div class="u-d-none u-d-block@md">
          <div id="highlight-images" class="detail-one">
            <div class="reply-detail-one">
              <img src="/path/to/image.png" alt="">
            </div>
            <div class="reply-detail-two">
              <img src="/path/to/image.png" alt="">
            </div>
            <div class="reply-detail-three">
              <img src="/path/to/image.png" alt="">
            </div>
            <div class="reply-detail-four">
              <img src="/path/to/image.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

iPhone

iPhone
<div class="c-iphone screen-shadow">
  <div class="c-iphone__camera"></div>
  <div class="c-iphone__screen">
    <img src="/path/to/image.png" alt="">
  </div>
  <div class="c-iphone__home"></div>
</div>

iPhone - Dual

iPhone
<div id="iphone" class="o-container tx-left tx-center@md tx-left@lg t-bdr-bottom">
  <div class="o-row">
    <div class="o-col-10 o-col-offset-1 o-col-4@lg o-col-offset-2@lg tx-center">
      <div class="iphone-container screen-shadow has-hover-up">
        <div class="iphone-camera"></div>
        <div class="iphone-screen">
          <a href="#">
            <img src="/path/to/image.png" alt="">
          </a>
        </div>
        <div class="iphone-homebtn"></div>
      </div>
      <div class="iphone-container iphone-in-background screen-shadow u-d-none u-d-inline-block@md">
        <div class="iphone-camera"></div>
        <div class="iphone-screen">
          <img src="/path/to/image.png" alt="">
        </div>
        <div class="iphone-homebtn"></div>
      </div>
    </div>
    <div class="o-col-10 o-col-offset-1 o-col-8@md o-col-offset-2@md o-col-5@lg o-col-offset-0@lg content">
      <h3>Title</h3>
      <p>...</p>
      <a class="btn btn-light-border btn-w-icon" href="#"><i class="apple-icon apple-icon-blue"></i>Download the App</a>
    </div>
  </div>
</div>