Footer block

A container for links, copyright and other common content at the bottom of webpages.

github location npm version

Variants

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "exampleMultiColumns": "false",
  "component-type": "block",
  "footer__url": "JavaScript:Void(0);"
}
 %}
{% include "../path_to/vf-footer/vf-footer.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-footer', {
  "exampleMultiColumns": "false",
  "component-type": "block",
  "footer__url": "JavaScript:Void(0);"
} %}
                
HTML
<footer class="vf-footer">
  <div class="vf-footer__inner">
    <p class="vf-footer__notice">A description of a site or organisation and what its goals are.</p>
    <div class="vf-footer__links-group | vf-grid">
      <div class="vf-links">
        <h4 class="vf-links__heading">Category</h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">A link</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Another link</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Third link</a>
          </li>
        </ul>
      </div>
      <div class="vf-links">
        <h4 class="vf-links__heading">Category</h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
        </ul>
      </div>
      <div class="vf-links">
        <h4 class="vf-links__heading">Category</h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
        </ul>
      </div>
      <div class="vf-links">
        <h4 class="vf-links__heading">Category</h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
        </ul>
      </div>
      <div class="vf-links">
        <h4 class="vf-links__heading">Category</h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link" href="JavaScript:Void(0);">Entry</a>
          </li>
        </ul>
      </div>

    </div>
    <section class="vf-footer__legal | vf-grid vf-grid__col-1">
      <ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
        <li class="vf-list__item">
          <a href="JavaScript:Void(0);" class="vf-list__link">Entry</a>
        </li>
        <li class="vf-list__item">
          <a href="JavaScript:Void(0);" class="vf-list__link">Entry</a>
        </li>
        <li class="vf-list__item">
          <a href="JavaScript:Void(0);" class="vf-list__link">Entry</a>
        </li>
      </ul>
      <p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
      <p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
      <p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
      <a class="vf-footer__link" href="JavaScript:Void(0);">Another entry</a>
    </section>
  </div>
</footer>
              

Examples

Installation info

This component is distributed with npm. After installing npm, you can install the vf-footer with this command.

$ yarn add --dev @visual-framework/vf-footer

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-footer/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.2.0

  • Requires at least @visual-framework@vf-sass-config@2.6.1.
  • Specify the footer link colours.
  • https://github.com/visual-framework/vf-core/pull/1606

1.1.1

  • changes any set- style functions to cleaner version

1.1.0

  • removes inline padding as it's defunct when using the vf-body component

1.0.6

  • dependency bump

1.0.3

  • updates max-width of component

1.0.2

  • Removes need for .vf-body on .vf-footer
  • Refines layout spacing
  • Allows for footer headers to be links

1.0.1

  • Darkens background
  • Updates layout

1.0.0

  • Initial stable release

Assets



File system location: components/vf-footer

Find an issue on this page? Propose a change or discuss it.