Footers

The Footer component provides descriptive content for a page or website. Footers should contain contact, copyright, sitemap or authorship information.

Our current Footer standard contains other components such as a contact Card and the Colophon.

Usage

{# Set Footer options #}
  {% set footerOptions = {
    "contactCardOptions": {
      "class": "miz-footer__contact",
      "contents": [
        '<h2 class="h5">Custom contact information</h2>
        <p><strong>Email:</strong>&#160;<a href="mailto:custom@missouri.edu">custom@missouri.edu</a></p>
        <p><strong>Phone:</strong> 573-882-2121</p>'
      ]
    }
  } %}

{# Include the Footer #}
  {% include "@miz/components/footers/footers.twig" with footerOptions only %}

See HTML tab for output.

Options reference

Options

There are a few contextual variables available in the footers.twig file.

Param Default Values Description
class miz-button String Additional classes appended to the anchor button
attributes null Object Attributes to be applied to the anchor button
theme null String PROTOTYPE. An optional theme value to adjust the footer. Currently, this value will be appended to the base miz-footer class as a variant, i.e., a value of dark will create an extra class named miz-footer--dark. It will also adjust the signature to the reversed version.

Blocks

Each of these blocks can be used to extend and add more content _or_ override it completely. But be careful, that could cause unintended consquences.

Block name Description
footer Initial block for placing all content within the footer container.
footer__brand Containing block for the Footer’s branding content. Defaults to the university signature.
footer__information Containing block for any Footer information or content. Defaults to the university’s main contact information.
footer__colophon Containing block for the Colophon component. To override the publisher content, you must currently extend or embed the footer.twig file.
{#

  Footer

  @uses   AppendClasses, AddAttributes from @miz/utilties/utils.twig

  @param  {object}    options
  @param  {string}    ├─ options.class
  @param  {object}    └─ options.attributes (optional)

#}
{%- spaceless %}

  {# Imports #}
  {% import "@miz/utilities/utils.twig" as utils %}
  {% import "@miz/utilities/miz.twig" as miz %}
  {% from "@miz/components/cards/cards.twig" import Card as card %}

  {# Parameters #}
    {% set options = _context ?: {} %}

    {% set footerClass = "miz-footer" %}
    {% set footerClass = options.class ? utils.AppendClasses( footerClass, options.class ) : footerClass %}
    {% set footerClass = options.theme ? utils.AppendClasses( footerClass, "miz-footer--" ~ options.theme ) : footerClass %}
    {% set footerAttributes = options.attributes ? utils.AddAttributes( options.attributes ) %}
    {% set footerTheme = options.theme %}

{% endspaceless -%}

{# Output #}
  <footer class="{{ footerClass }}"{{ footerAttributes }}>

    {% block footer__brand %}

      <div class="miz-footer__brand">

        <div class="miz-container">
          {% set sigReverse = footerTheme == 'dark' ? true : false %}

          {{ miz.sig({},{ size: 'medium', reverse: sigReverse }) }}
        </div>

      </div>
    {% endblock footer__brand %}

    {% block footer__information %}

      <div class="miz-footer__information">

        <div class="miz-container">

{% include "@miz/components/cards-contact/cards-contact--base.twig" %}

        </div>

      </div>
    {% endblock footer__information %}

    {% block footer__colophon %}

      <div class="miz-footer__colophon">

        <div class="miz-container">

          {% include "components/colophon/colophon.twig" %}

        </div>

      </div>
    {% endblock footer__colophon %}



  </footer>
<footer class="miz-footer">

    <div class="miz-footer__brand">

        <div class="miz-container">

            <div class="mu-sig-32">
                <p class="logo"><a href="http://missouri.edu">MU Logo</a></p>
                <h1 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h1>
            </div>
        </div>

    </div>

    <div class="miz-footer__information">

        <div class="miz-container">

            <div class="miz-card__contact miz-card__contact">

                <h2 class="miz-card-contact__title">Contact Us</h2>

                <h6 class="miz-card-contact__subtitle">Department Name</h6>

                <p>123 Building | Columbia, MO 65203</p>

                <p><strong>Phone:</strong> (123) 456-7890</p>

                <p><strong>Email:</strong> <a href="mailto:email@email.com">email@email.com</a></p>

            </div>

        </div>

    </div>

    <div class="miz-footer__colophon">

        <div class="miz-container">

            <div class="miz-colophon">

                <div class="miz-publisher">
                    <p><small>Published by <a href="//www.umsystem.edu/">Digital Service,</a> 234 Heinkel Building, Columbia, MO 65211</small></p>
                    <p><small><strong>Email:</strong> <a href="mailto:digitalservice@missouri.edu">digitalservice@missouri.edu</a><br>
            <strong>Phone:</strong> 573-882-4523</small></p>
                </div>

                <div class="miz-copyright">
                    <p><small>&copy; <time datetime="2019">2019</time> &#8212; Curators of the <a href="//www.umsystem.edu/">University of Missouri</a>. All rights reserved. <a href="http://missouri.edu/copyright/">DMCA and other copyright information</a>.</small></p>
                    <p><small><a href="//missouri.edu/eeo-aa/">An equal opportunity/access/affirmative action/pro-disabled and veteran employer</a>.</small></p>
                </div>

            </div>

        </div>

    </div>

</footer>
/* No context defined for this component. */
  • Content:
    /* =============================================================================
      Footer pattern
    ============================================================================= */
    
    .miz-footer {
      margin: 0 -$miz-space-default;
    }
    
    .miz-footer__brand {
      padding: $miz-space-stack-sandwich-l;
    }
    
    .miz-footer__information {
      @include make-row;
    
      padding: $miz-space-stack-sandwich-default;
    }
    
    .miz-footer__contact {
      @include make-col-ready;
    }
    
    .miz-footer__colophon {
      background-color: $miz-black;
      padding: $miz-space-stack-sandwich-l;
    
      *,
      a:hover {
        color: $miz-white;
      }
    }
    
    .miz-footer--dark {
      background-color: $miz-black;
    }
    
    /* =============================================================================
      Styles copied over from patterns/_footer.scss
    ============================================================================= */
    
    .miz-brand {
      width: 100%;
      display: block;
      padding: $miz-space-stack-l;
    }
    
    .miz-brand__signature {
      height: 50px;
    }
    
    .miz-list-group__item {
      padding: $miz-space-stack-default;
    }
    
    .miz-sitemap {
      @include make-container;
    
      padding-top: $miz-space-l;
      padding-bottom: $miz-space-l;
    }
    
    // Sitemap
    .miz-sitemap__row {
      @include make-row;
    }
    
    .miz-sitemap__contact-col {
      @include make-col-ready;
    
      margin: $miz-space-stack-l;
      margin-top: -8px;
    
      @include media-breakpoint-up(md) {
        @include make-col(12);
      }
    
      @include media-breakpoint-up(lg) {
        @include make-col(4);
      }
    }
    
    .miz-sitemap__list-group-col {
      @include make-col-ready;
    
      @include media-breakpoint-up(md) {
        @include make-col(12);
      }
    
      @include media-breakpoint-up(lg) {
        @include make-col(8);
      }
    }
    
    .miz-sitemap__list-group {
      margin: $miz-space-stack-l;
    }
    
    .miz-sitemap__list-group-card {
      @include make-col-ready;
    
      @extend .card;
    
      border: none;
    
      @include media-breakpoint-up(md) {
        @include make-col(4);
      }
    
      @include media-breakpoint-up(lg) {
        @include make-col(4);
      }
    }
    
    .miz-sitemap__list-group-title {
      padding: $miz-space-stack-m;
    }
    
    // Tactical layer
    .miz-tactical {
      @include make-container;
    
      padding-top: $miz-space-l;
      padding-bottom: $miz-space-l;
    }
    
    .miz-tactical__row {
      @include make-row;
    
      align-items: center;
    }
    
    .miz-tactical__nav-col {
      @include make-col-ready;
    
      flex: 1 0;
    }
    
    .miz-tactical__nav-list {
      padding: 0;
    
      @include media-breakpoint-up(md) {
        margin: 0;
      }
    }
    
    .miz-tactical__nav-list-item {
      list-style: none;
      margin: $miz-space-stack-s;
    
      @include media-breakpoint-up(md) {
        display: inline;
        margin: $miz-space-inline-left-default;
      }
    }
    
    .miz-tactical__nav-list-item-link {
      display: inline-block;
      // padding: $miz-space-inset-squish-s;
    }
    
    .miz-tactical__social-col {
      @include make-col-ready;
    
      display: flex;
    
      @include media-breakpoint-up(md) {
        flex: 0 1;
      }
    }
    
  • URL: /components/raw/miz-footers/_footers.scss
  • Filesystem Path: fractal/pattern-library/miz/components/footers/_footers.scss
  • Size: 2.8 KB