Navigation

Avatar

A CSS component for creating user avatars.

...
...
...
...
...
...
<div class="avatar avatar-lg">
  <img src="assets/img/17.jpg" alt="..." class="img-cover">
</div>
<div class="avatar avatar-lg">
  <img src="assets/img/17.jpg" alt="..." class="img-cover rounded-circle">
</div>

<div class="avatar">
  <img src="assets/img/17.jpg" alt="..." class="img-cover">
</div>
<div class="avatar">
  <img src="assets/img/17.jpg" alt="..." class="img-cover rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="assets/img/17.jpg" alt="..." class="img-cover">
</div>
<div class="avatar avatar-sm">
  <img src="assets/img/17.jpg" alt="..." class="img-cover rounded-circle">
</div>

Animation

A CSS component for creating animated elements. Animations can be disabled by setting the $enabled-animation variable value to false in scss/helpers/_variables.scss.

  • data-toggle="animation" - enables animations.
  • data-animation - animation name. Accepts the following values:
    • fadeUp
    • fadeDown
    • fadeIn
    This list will be extended in the future releases.
  • data-animation-order - animation order. Anything between 0 and 10. Affects the delay amination is fired with.
  • data-animation-trigger - what triggers the animation. Accepts the following values:
    • load - triggers the animation when the page is loaded.
    • enter - triggers the animation when the element enters the viewport.
    • entered - triggers the animation when the element has entered the viewport entirely.
    • fpAfterLoad - triggers the animation when the section is loaded after scrolling has ended.
<div data-toggle="animation" data-animation="fadeUp" data-animation-order="0" data-animation-trigger="load">...</div>

Brand

A CSS component for creating styled links containing brand images or icons.

<a href="#" class="brand-item mb-4">
  <i class="fab fa-angrycreative"></i>
</a>

Fullpage scrolling

A JS component for creating fullpage scrolling sections. Powered by the Fullpage.js plugin.

<main class="fp-wrapper">
  <section class="fp-section">
    <div class="section section-top">
      ...
    </div>
  </section>
  <section class="fp-section">
    <div class="section section-top">
      ...
    </div>
  </section>
</main>

Icons

Incline comes with the latest release of the Font Awesome icons. Additionally, more than two dozens of line icons designed exclusively for the theme are also included into the package.


.icon-person

.icon-businessman

.icon-envelope

.icon-lock

.icon-diamond

.icon-layers

.icon-edit

.icon-comment

.icon-at

.icon-support

.icon-truck

.icon-case

.icon-clock

.icon-cart

.icon-marker

.icon-tick

.icon-building

.icon-camera

.icon-code

.icon-extend

.icon-puzzle

.icon-pool

.icon-bed

.icon-drawing

.icon-home

.icon-devices

.icon-shield

.icon-arrow-left

.icon-arrow-right

.icon-quote
<span class="icon icon-businessman"></span>
  • icon-2x - make the icons 2 times the original size.
<span class="icon icon-businessman icon-2x"></span>

Images

You can style your images with one of the four predefined ways to make them stand out.

...
<div class="img-effect img-effect-dotted">
  <img src="assets/img/25.jpg" class="img-fluid" alt="...">
</div>
Delivering parcels and documents since 2010
...
<div class="img-effect img-effect-info">

  <!-- Info -->
  <div class="img-effect-info-popup">

    <!-- Icon -->
    <div class="img-effect-info-popup-icon">
      <i class="fas fa-building"></i>
    </div>

    <!-- Content -->
    <div class="img-effect-info-popup-content">
      Delivering parcels and documents since 2010
    </div>

  </div>

  <!-- Image -->
  <img src="assets/img/24.jpg" class="img-fluid" alt="...">

</div>
...
<div class="img-effect img-effect-solid">
  <img src="assets/img/2.jpg" class="img-fluid" alt="...">
</div>
...
<div class="img-effect img-effect-border">
  <img src="assets/img/3.jpg" class="img-fluid" alt="...">
</div>

Mailchimp

A JS component to enable Mailchimp newsletter signups via AJAX. In order to make the form work, you need to find, modify and fill in the action URL of your Mailchimp newsletter campaign.

  1. Please follow the instructions here to find the action URL of your newsletter campaign. It should look something like http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx.
  2. Replace post?u= with post-json?u=.
  3. Add &c=? at the end. Your string should now look something like http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?.
  4. Replace the value of the action attribute in the form code below with the results.
<form class="form-mailchimp validate" action="//simpleqode.us15.list-manage.com/subscribe/post-json?u=507744bbfd1cc2879036c7780&id=4523d25e1b&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate="">
  <div id="mc_embed_signup_scroll" class="form-row">
    <div class="input-group col-md-4 mb-2 mb-md-0">
      <input type="email" value="" name="EMAIL" class="required email form-control order-1" id="mce-EMAIL" placeholder="Email address">
      <div class="input-group-append order-0">
        <div class="input-group-text">
          <svg class="icon icon-envelope input-group-icon icon-offset" viewBox="0 0 106 106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path transform="translate(3 3)" d="
              M0 30 V 10 H 100 V 90 H 0 V 30 L 50 60 L 100 30">
            </path>
          </svg>
        </div>
      </div>
      <div id="mce-responses" class="clear">
        <div class="response"></div>
        <div class="response" id="mce-success-response"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div aria-hidden="true" id="mce-hidden-input">
        <input type="text" name="b_507744bbfd1cc2879036c7780_4523d25e1b" tabindex="-1" value="">
      </div>
    </div>
    <div class="clear col-md-auto">
      <button type="submit" class="btn btn-outline-primary" id="mc-embedded-subscribe">
        Sign up
      </button>
    </div>
  </div>
</form>

Mailchimp signup forms have a unique ID, so it's not possible to have more than one signup form on a single page. Instead, use an example below to create a clone:

<form class="form-mailchimp form-mailchimp-clone">
  <div class="form-row">
    <div class="input-group col-md-4 mb-2 mb-md-0">
      <input type="email" class="form-control order-1" placeholder="Email address">
      <div class="input-group-append order-0">
        <div class="input-group-text">
          <svg class="icon icon-envelope input-group-icon icon-offset" viewBox="0 0 106 106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path transform="translate(3 3)" d="M0 30 V 10 H 100 V 90 H 0 V 30 L 50 60 L 100 30"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="clear col-md-auto">
      <button type="submit" class="btn btn-outline-primary">
        Sign up
      </button>
    </div>
  </div>
</form>

This form cannot be used alone and needs an original signup form on the same page to submit new signups.

Map

A JS/CSS component for including a Google map iframe into your page. Please make sure to obtain your own Google Maps API key to use Google maps on your website. The component accepts the following options:

  • data-markers - an array of lat/lng pairs for each location.
  • data-zoom - initial map zooming level. Ignore if you want to allow the map scale automatically to show all markers specified in the data-marker attribute.
<div class="map">
  <div class="map-container" data-markers="[[40.7127753,-74.0059728], [53.5,-86.1]]"></div>
</div>
<div class="map">
  <div class="map-container" data-markers="[[40.7127753,-74.0059728]]" data-zoom="14" ></div>
</div>

Parallax

A JS component for adding a parallax effect. Powered by the Parallax plugin.

  • data-scroll="parallax" - to add a parallax behind an element.
  • data-image-src="assets/img/50.jpg" - to specify an image.
<section class="section" data-parallax="scroll" data-image-src="assets/img/50.jpg"> ... </section>

Quote

A CSS component for creating a quote block. The component accepts the following options:

  • .quote-sm - reduces the font size of the quote content and footer.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores!

Simpleqode team
<div class="quote quote-sm">
  <blockquote class="quote-blockquote">
    <p class="quote-blockquote-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores!
    </p>
    <footer class="quote-blockquote-footer">
      <span class="text-zigzag">
        Simpleqode team
      </span>
    </footer>
  </blockquote>
</div> <!-- / .quote -->

Section

A CSS component for creating sections to visually separate your website content. The component accepts the following options:

  • .section-top - adds an additonal padding to the top of the section for proper content alignment in combination with the fixed navbar. Use this class for the first section on a page only if you don't have the breadcrumb included.
  • .section-full - makes the section height equal to that of the viewport (fullscreen).
<section class="section section-top section-full"> ... </section>

Slider

A CSS/JS component for creating draggable sliders. Works equally good with image and text content. Easily adapt slider item width with the default Bootstrap .col classes. The following options are available:

  • .slider-no-controls - removes slider controls.
  • .slider-no-draggable - disables dragging.
  • .slider-highlight - highlights a currently active slide.
  • .slider-fade - replaces the default sliding effect with fading. Works only with full-width sliders.
  • data-slider-binded=".slider-selector" - binds multiple sliders together to rotate them simultaneously when one of them is rotated.
...
...
...
...
...
...
...
...
<div class="slider slider-hightlight slider-no-controls" data-slider-binded=".slider">
  <div class="slider-item col-6 col-md-3">
    <img src="assets/img/36.png" class="img-fluid" alt="...">
  </div>
</div>

Stats

A CSS component for creating stat items.

12,056

Parsels delivered

21,458

Miles gone

1,569

Satisfied clients

<div class="stats-item text-center">
  
  <!-- Value -->
  <div class="stats-item-value">
    12,056
  </div>

  <!-- Title -->
  <p class="stats-item-title text-muted">
    Parsels delivered
  </p>

</div>

Testimonial

A CSS/JS component for creating testimonial sliders. Works in combination with the quote component.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores! Itaque nihil quae, omnis, minus nisi iste iure.

...
John Doe, Chicago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores! Itaque nihil quae, omnis, minus nisi iste iure.

...
Anna Doe, San Francisco

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores! Itaque nihil quae, omnis, minus nisi iste iure.

...
Jane Roe, Los Angeles
<div class="testimonial-slider">

  <!-- Item -->
  <div class="testimonial-slider-item">
    <div class="testimonial-slider-item-inner">
    
      <!-- Quote -->
      <div class="quote quote-sm">
        <blockquote class="quote-blockquote">
          <p class="quote-blockquote-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores! Itaque nihil quae, omnis, minus nisi iste iure.
          </p>
          <footer class="quote-blockquote-footer">
            <div class="avatar avatar-lg mr-3">
              <img src="assets/img/16.jpg" alt="..." class="img-cover rounded-circle">
            </div>
            <span>
              John Doe, <span class="text-zigzag">Chicago</span>
            </span>
          </footer>
        </blockquote>
      </div>

    </div>
  </div>

  <!-- Item -->
  <div class="testimonial-slider-item">
    <div class="testimonial-slider-item-inner">
    
      <!-- Quote -->
      <div class="quote quote-sm">
        <blockquote class="quote-blockquote">
          <p class="quote-blockquote-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores! Itaque nihil quae, omnis, minus nisi iste iure.
          </p>
          <footer class="quote-blockquote-footer">
            <div class="avatar avatar-lg mr-3">
              <img src="assets/img/18.jpg" alt="..." class="img-cover rounded-circle">
            </div>
            <span>
              Anna Doe, <span class="text-zigzag">San Francisco</span>
            </span>
          </footer>
        </blockquote>
      </div>

    </div>
  </div>

  <!-- Item -->
  <div class="testimonial-slider-item">
    <div class="testimonial-slider-item-inner">
    
      <!-- Quote -->
      <div class="quote quote-sm">
        <blockquote class="quote-blockquote">
          <p class="quote-blockquote-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam exercitationem nobis incidunt alias ipsa quis, rerum doloribus nostrum, recusandae. Laboriosam, quasi, dolores! Itaque nihil quae, omnis, minus nisi iste iure.
          </p>
          <footer class="quote-blockquote-footer">
            <div class="avatar avatar-lg mr-3">
              <img src="assets/img/17.jpg" alt="..." class="img-cover rounded-circle">
            </div>
            <span>
              Jane Roe, <span class="text-zigzag">Los Angeles</span>
            </span>
          </footer>
        </blockquote>
      </div>

    </div>
  </div>

</div>

Title

A CSS component for creating titles. Usually used on support pages.

Another title
<h6 class="title">
  Another title
</h6>

Utilities

Incline comes with multiple utilities and helper classes for creating visual interest and fine-graining the look of your pages.

Backgrounds

Easily stack background utilities to get exactly what you need.

  • .bg-cover - sets a background image that covers the whole area.

    <div class="section bg-cover" style="background-image: url(assets/img/1.jpg);">...</div>

  • .bg-slider - stretches a slider to fit the whole area.

    <div class="bg-slider">
      <div class="slider slider-no-controls slider-no-draggable slider-fade">
        <div class="slider-item">
          
          <!-- Cover -->
          <div class="bg-cover" style="background-image: url(assets/img/48.jpg)"></div>

        </div>
        <div class="slider-item">
          
          <!-- Cover -->
          <div class="bg-cover" style="background-image: url(assets/img/49.jpg)"></div>

        </div>
      </div>
    </div>

  • .bg-video - sets a background video that covers the whole area. Add loop to the video tag to loop the video. Make sure the video is muted, otherwise it may not autoplay on some of the mobile devices.

    <div class="bg-video">
      <video src="assets/video/1.mp4" class="bg-video-media" autoplay muted playsinline loop></video>
    </div>

  • .bg-overlay - adds a dark background overlay. Typically required to make the text more readable against.

    <div class="section">
      <div class="bg-overlay"></div>
    </div>

  • .bg-triangle - adds a subtle triangle shape as the background.

    • .bg-triangle-left - push the triangle to the left.
    • .bg-triangle-right - push the triangle to the right.
    • .bg-triangle-top - push the triangle to the top.
    • .bg-triangle-bottom - push the triangle to the bottom.
    • .bg-triangle-dark - make the triangle dark.
    • .bg-triangle-light - make the triangle light.
    <div class="section">
      <div class="bg-triangle bg-triangle-light bg-triangle-top bg-triangle-left"></div>
      <div class="bg-triangle bg-triangle-light bg-triangle-bottom bg-triangle-right"></div>
    </div>

  • .bg-incline - adds a subtle background triangle as a continuation of the .bg-triangle pattern.

    • .bg-incline-left - pushes the incline to the left.
    • .bg-incline-right - pushes the triangle to the right.
    • .bg-incline-dark - makes the incline dark.
    • .bg-incline-light - makes the incline light.
    <div class="section">
      <div class="bg-incline bg-incline-light bg-incline-right"></div>
    </div>

Type

Helper classes to tune your text nodes from within the HTML.

  • .font-weight-medium - changes the font weight to medium.
  • .text-xs - makes your text extra small.
  • .text-sm - makes your text small.
  • .text-lg - makes your text large.
  • .text-vertical - rotates your text by 90 degrees to make vertical.
  • .text-zigzag - adds a zigzag underline.
  • .text-nounderline - removes an underline from links on hover.