Kinsey

# Uploading Logo

The template supports dual versions of the logotype to maintain a good contrast ratio depending on the conditions where it appears:

  • The Primary logo version is used for places with light backgrounds.
  • The Secondary logo version is used for places with dark backgrounds.

# Markup

# Graphic Version

For the best appearance, it's recommended to use the .svg format for the logo. Feel free to use any other image format appropriate for the web, such as .jpg, .png, or .gif.

<a class="logo" href="index.html">
  <div class="logo__wrapper-img">
    <!-- Primary logo version (for light backgrounds) -->
    <img class="logo__img-primary" src="img/general/logo/kinsey-dark.svg" alt="Kinsey HTML5 Template" width="52" height="19"/>
    <!-- Secondary logo version (for dark backgrounds) -->
    <img class="logo__img-secondary" src="img/general/logo/kinsey-light.svg" alt="Kinsey HTML5 Template" width="52" height="19"/>
  </div>
</a>

# Text Version

Don't have your own brand logo yet? No worries – just use the text logo version. It supports a title and tagline, which you can use to briefly describe yourself or your company.

<a class="logo" href="index.html">
  <div class="logo__text">
    <span class="logo__text-title">Kinsey</span>
    <span class="logo__text-tagline">Creative Agency</span>
  </div>
</a>

# Appearance in Header

Since the header supports a sticky effect with a changeable background on scrolling, you may define which logo version to appear in the normal header state with data-arts-header-logo="secondary" and when the header becomes sticky with data-arts-header-sticky-logo="primary".

<header
  class="header header_fixed container-fluid js-header-sticky"
  id="page-header"
  data-arts-theme-text="dark"
  data-arts-header-sticky-theme="bg-light-1"
  data-arts-header-logo="primary"
  data-arts-header-sticky-logo="primary"
  data-arts-header-sticky-theme-text="dark"
  data-arts-header-overlay-theme-text="light"
>
  ...
</header>

For the footer, use the data-arts-footer-logo="primary" attribute as follows:

<footer
  class="footer container-fluid" 
  id="page-footer" 
  data-arts-theme-text="dark" 
  data-arts-footer-logo="primary"
  data-arts-fixed-reveal="data-arts-fixed-reveal"
  data-arts-fixed-reveal-from="-20vh"
  data-arts-fixed-reveal-from-opacity="0"
>
  ...
</footer>

TIP

The dark and light appearance rules may differ from page to page depending on the visual conditions where the logo appears. For example, you may want the light version of your logo to appear on dark pages to maintain a good contrast ratio.

For the best results, make sure to check all the pages' headers and footers and adjust the logo appearance rules as needed.

← Generating Favicon →