---
layout: get-started
title: Header / Footer variants
group: getting-started
toc: true
---
<h2 class="fs-20 mb-3">Header</h2>
<div>
    <p>You can easily switch between differen pre-built Header and Footer variants using jekyll templates.</p>
    <p>
        <u>Here is how to change Header variant inside any page template:</u>
    </p>
    <img src="{{ '/images/header.jpg' | document_url }}" alt="Header" class="mb-5">
    <p>
        <u>And this is the list of available templates:</u>
    </p>
    <ul class="list-unstyled mb-3">
        <li><code>header-default</code></li>
        <li><code>header-01</code></li>
        <li><code>header-02</code></li>
        <li><code>header-03</code></li>
        <li><code>header-04</code></li>
        <li><code>header-05</code></li>
        <li><code>header-06</code></li>
        <li><code>header-07</code></li>
        <li><code>header-08</code></li>
        <li><code>header-09</code></li>
        <li><code>header-10</code></li>
        <li><code>header-default-light</code></li>
    </ul>
</div>
<h2 class="fs-20 mb-3">Footer</h2>
<div>
    <p>
        <u>Here is how to change Footer variant inside any page template:</u>
    </p>
    <img src="{{ '/images/footer.jpg' | document_url }}" alt="Footer" class="mb-5">
    <p>
        <u>And this is the list of available templates:</u>
    </p>
    <ul class="list-unstyled mb-8">
        <li><code>footer-default</code></li>
        <li><code>footer-01</code></li>
        <li><code>footer-02</code></li>
        <li><code>footer-03</code></li>
        <li><code>footer-04</code></li>
        <li><code>footer-05</code></li>
        <li><code>footer-06</code></li>
        <li><code>footer-07</code></li>
        <li><code>footer-08</code></li>
    </ul>
</div>