Ribbons

The Mizzou Ribbon is an easy and branded way of showing our users they are on an official University of Missouri website. It supports an area for the University signature, if necessary, and a content area where links and a site search field can be placed.

The Ribbon can be called in three ways, outlined below.

Template reference

Simple Include

The easiest way to add the Ribbon is to simply include it. You’ll get the default Ribbon.

{% include '@miz/components/ribbons/ribbons.twig' %}

Include With Options

The standard class and attributes options are available to add if you need to extend the Ribbon.

Note: The only option is important if you don’t want your options bleeding into other included twig views.

Param Default Values Description
class miz-ribbon String Additional classes appended to the ribbon
attributes null Object Attributes to be applied to the ribbon
link-list null Object To add a list of inline links with the Ribbon, add a link-list object that contains the same options as the Link List component
{% set options = {
  "class": 'my-class',
  "attributes": {
    "id": "myRibbon"
  }
} %}

{% include '@miz/components/ribbons/ribbons.twig' with options only %}

Extends/Embed

Advanced: There are three blocks available to use if you choose to extend or embed the file.

Block Default
ribbon Missouri signature and site search input
ribbon__sig Missouri signature
ribbon__content Site search input

Embed

{% embed '@miz/components/ribbons/ribbons.twig'%}

  {% block ribbon__content %}
    {# This is where you will place your content #}

    {# This will give us the search input #}
    {{ parent() }}

  {% endblock ribbon__content %}
{% endembed %}

Extends

{% extends '@miz/components/ribbons/ribbons.twig'%}

{% block ribbon__content %}
  {# This is where you will place your content #}

  {# This will give us the search input #}
  {{ parent() }}

{% endblock ribbon__content %}
{% include 'components/ribbons/ribbons.twig' %}
<div class="miz-ribbon">

    <div class="miz-ribbon__signature">
        <div class="mu-sig-24 reverse">
            <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 class="miz-ribbon__search">

        <form class="miz-input-group" action="/search/" method="get">
            <label for="search-input" class="sr-only">Search</label>
            <input type="text" class="miz-input" id="search-input" placeholder="Search this site" name="q" />

            <button class="miz-button miz-button--icon miz-button--primary miz-button--small miz-button--square-sm miz-input-group__button" type="submit">
    
  <i class="miz-icon material-icons miz-icon--button miz-icon--md">search</i>


  </button>

        </form>
    </div>

</div>
/* No context defined for this component. */
  • Content:
    //
    // Ribbon styles
    // Early days here.
    //
    
    // Base Ribbon component
    .miz-ribbon {
      background: $miz-black;
    
      @include media-breakpoint-up(md) {
        @include make-row;
    
        align-items: center;
        justify-content: space-between;
      }
    }
    
    // Flex row for Ribbon
    .miz-ribbon__row {
      @include make-row;
    
      align-items: center;
    }
    
    // Ribbon University of Missouri signature
    .miz-ribbon__signature {
      padding: $miz-space-stack-sandwich-default;
      flex: 1 0 100%;
    
      @include media-breakpoint-up(md) {
        @include make-col-ready;
    
        flex: 1 0;
      }
    }
    
    // Ribbon link list
    .miz-ribbon__link-list {
      .miz-link-list__link {
        color: $miz-gold;
    
        &:hover {
          text-decoration: underline;
          background-color: inherit;
        }
      }
    }
    
    // Ribbon search column
    .miz-ribbon__search {
      padding: $miz-space-stack-sandwich-default;
      flex: 1 0 100%;
    
      @include media-breakpoint-up(md) {
        @include make-col-ready;
    
        flex: 0 1 220px;
      }
    }
    
  • URL: /components/raw/miz-ribbons/_ribbons.scss
  • Filesystem Path: fractal/pattern-library/miz/components/ribbons/_ribbons.scss
  • Size: 943 Bytes