Page template (Base)

If you’re interested in how to create Templates, contact digitalservice@missouri.edu and we can assist you.

In the future, more templated experiences will be available, including designs based on the new Mizzou homepage.

{% extends "templates/base/baseView.twig" %}

{% block content_header %}
  {% include "@miz/components/page-headers/page-headers.twig" %}
{% endblock %}

{% block content %}
<div class="miz-page-content__single">
<p><img src="https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle.png" alt="" srcset="https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle.png 900w, https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle-300x160.png 300w, https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle-768x410.png 768w" sizes="(max-width: 900px) 100vw, 900px"></p>
  <p>Lorem ipsum dolor sit amet, <a href="#" title="This is an example link">this is a default link style</a> consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

  <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

  <h3>Subhead 3</h3>

  <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>

  <h4>Subhead 4</h4>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Nunc dignissim risus id metus.</li>
  </ul>
</div>
{% endblock content %}

{% block content_aside %}

  {% if aside.align == "right" %}
  <aside class="miz-page-content__aside">
    <nav>
      <ul id="menu-chapters" class="miz-sub-nav">
        <li id="menu-item-584" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/1/" class="miz-sub-nav-link">General &amp; Administrative Information</a></li>
        <li id="menu-item-582" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/2/" class="miz-sub-nav-link">Finance</a>
          <ul class="miz-sub-nav">
            <li id="menu-item-584" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/1/" class="miz-sub-nav-link">Sub-item</a></li>
            <li id="menu-item-582" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/2/" class="miz-sub-nav-link">Sub-item 2</a></li>
          </ul></li>
        <li id="menu-item-589" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/3/" class="miz-sub-nav-link">Purchasing</a></li>
        <li id="menu-item-591" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/4/" class="miz-sub-nav-link">Travel</a></li>
        <li id="menu-item-581" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/5/" class="miz-sub-nav-link">Communications</a></li>
        <li id="menu-item-588" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/6/" class="miz-sub-nav-link">Property, Equipment, &amp; Facilities</a></li>
        <li id="menu-item-585" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/7/" class="miz-sub-nav-link">Health &amp; Safety</a></li>
        <li id="menu-item-579" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/8/" class="miz-sub-nav-link">Accidents &amp; Incidents</a></li>
        <li id="menu-item-587" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/9/" class="miz-sub-nav-link">Insurance</a></li>
        <li id="menu-item-590" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/10/" class="miz-sub-nav-link">Records Management</a></li>
        <li id="menu-item-583" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/11/" class="miz-sub-nav-link">Forms</a></li>
        <li id="menu-item-580" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/12/" class="miz-sub-nav-link">Campus Facilities</a></li>
        <li id="menu-item-586" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/13/" class="miz-sub-nav-link">Information Technology &amp; Telecommunications</a></li>
      </ul>
    </nav>
  </aside>
  {% elseif aside.align == "left" %}
  <aside class="miz-page-content__aside order-lg-first">
      <nav>
        <ul id="menu-chapters" class="miz-sub-nav">
          <li id="menu-item-584" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/1/" class="miz-sub-nav-link">General &amp; Administrative Information</a></li>
          <li id="menu-item-582" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/2/" class="miz-sub-nav-link">Finance</a>
            <ul class="miz-sub-nav">
              <li id="menu-item-584" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/1/" class="miz-sub-nav-link">Sub-item</a></li>
              <li id="menu-item-582" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/2/" class="miz-sub-nav-link">Sub-item 2</a></li>
            </ul></li>
          <li id="menu-item-589" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/3/" class="miz-sub-nav-link">Purchasing</a></li>
          <li id="menu-item-591" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/4/" class="miz-sub-nav-link">Travel</a></li>
          <li id="menu-item-581" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/5/" class="miz-sub-nav-link">Communications</a></li>
          <li id="menu-item-588" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/6/" class="miz-sub-nav-link">Property, Equipment, &amp; Facilities</a></li>
          <li id="menu-item-585" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/7/" class="miz-sub-nav-link">Health &amp; Safety</a></li>
          <li id="menu-item-579" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/8/" class="miz-sub-nav-link">Accidents &amp; Incidents</a></li>
          <li id="menu-item-587" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/9/" class="miz-sub-nav-link">Insurance</a></li>
          <li id="menu-item-590" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/10/" class="miz-sub-nav-link">Records Management</a></li>
          <li id="menu-item-583" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/11/" class="miz-sub-nav-link">Forms</a></li>
          <li id="menu-item-580" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/12/" class="miz-sub-nav-link">Campus Facilities</a></li>
          <li id="menu-item-586" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/13/" class="miz-sub-nav-link">Information Technology &amp; Telecommunications</a></li>
        </ul>
      </nav>
    </aside>
  {% endif %}


{% endblock %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="robots" content="index,follow">
    <!-- Document Title -->
    <title>Left aside - Base Templates</title>

    <!-- Favicon -->
    <link href="/images/favicons/favicon.ico" rel="icon" />

    <!-- Apple Touch Icons -->
    <link href="/images/favicons/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
    <meta content="" name="apple-mobile-web-app-title" />
    <link rel="mask-icon" href="/images/favicons/mu-safari-icon.svg" color="black">

    <!-- Microsoft Windows 8+ Tiles -->
    <meta content="" name="application-name" />
    <meta content="/images/favicons/apple-touch-icon.png" name="msapplication-TileImage" />
    <meta content="#F1B82D" name="msapplication-TileColor" />

    <!-- JavaScript -->
    <script src="https://jonneal.dev/svg4everybody/svg4everybody.min.js"></script>
    <script>
        svg4everybody();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>

    <!-- MIZ CSS -->
    <link rel="stylesheet" href="/css/miz-fonts.css" />
    <link rel="stylesheet" href="/css/miz.css" />
    <link rel="stylesheet" href="/css/miz-brand.css" />

</head>

<body class="miz-body">

    <div class="miz-skip-to">
        <a href="#navigation" class="miz-skip-to__link">Skip to navigation</a>
        <a href="#content" class="miz-skip-to__link">Skip to content</a>
    </div>

    <div class="miz-container--wide miz-fill--white">

        <header class="miz-header">

            <div class="miz-flex-row miz-fill--black">
                <div class="miz-container">

                    <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>
                </div>
            </div>

            <div class="miz-flex-row miz-fill--white">
                <div class="miz-container">

                    <div class="miz-masthead" role="banner">
                        <h1 class="miz-masthead__title">
                            <a title="" href="/">Default site name</a>
                        </h1>
                    </div>
                </div>
            </div>

            <div class="miz-flex-row miz-fill--gold">
                <div class="miz-container">
                    <div class="miz-navigation--primary">

                        <button class="miz-button miz-button--icon navbar-toggler miz-button--primary miz-navigation--primary__menu-button" type="button" id="menuButton" data-target="#primaryNavbarToggler" data-toggle="collapse" aria-label="Open navigation" aria-expanded="false"
                            aria-haspopup="true" aria-controls="primaryNavbarToggler">
    
  <i class="miz-icon material-icons miz-icon--button miz-icon miz-icon--md miz-svg--black">menu</i>


  </button>

                        <div class="miz-navigation--primary__nav collapse" id="primaryNavbarToggler" aria-labelledby="menuButton">
                            <nav class="miz-nav" id="navigation">

                                <ul class="miz-nav__list">

                                    <li class="miz-nav__list-item">
                                        <a class="miz-nav__link" href="#">Home</a>
                                    </li>

                                    <li class="miz-nav__list-item">
                                        <a class="miz-nav__link" href="#">Item 1</a>
                                    </li>

                                    <li class="miz-nav__list-item dropdown">
                                        <a class="miz-nav__link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Item</a>

                                        <ul class="miz-dropdown__menu dropdown-menu">

                                            <li class="miz-nav__list-item">
                                                <a class="miz-nav__link" href="www.example1.com">Sub item 1</a>
                                            </li>

                                            <li class="miz-nav__list-item">
                                                <a class="miz-nav__link" href="www.example2.com">Sub item 2</a>
                                            </li>
                                        </ul>

                                    </li>
                                </ul>

                            </nav>

                        </div>
                    </div>
                </div>
            </div>

        </header>

        <main class="miz-main" id="content" role="main">

            <section class="miz-main__section">

                <header class="miz-page-header">
                    <div class="miz-container">
                        <h2 class="miz-page-header__title">Page header default title</h2>
                    </div>
                </header>

                <div class="miz-page-content">

                    <div class="miz-page-content__layer">
                        <div class="miz-page-content__single">
                            <p><img src="https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle.png" alt="" srcset="https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle.png 900w, https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle-300x160.png 300w, https://freespeech.missouri.edu/wp-content/uploads/2017/05/speakers-circle-768x410.png 768w"
                                    sizes="(max-width: 900px) 100vw, 900px"></p>
                            <p>Lorem ipsum dolor sit amet, <a href="#" title="This is an example link">this is a default link style</a> consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna
                                nibh, viverra non, semper suscipit, posuere a, pede.</p>

                            <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed
                                semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

                            <h3>Subhead 3</h3>

                            <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in,
                                lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>

                            <h4>Subhead 4</h4>

                            <ul>
                                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                                <li>Aliquam tincidunt mauris eu risus.</li>
                                <li>Vestibulum auctor dapibus neque.</li>
                                <li>Nunc dignissim risus id metus.</li>
                            </ul>
                        </div>

                        <aside class="miz-page-content__aside order-lg-first">
                            <nav>
                                <ul id="menu-chapters" class="miz-sub-nav">
                                    <li id="menu-item-584" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/1/" class="miz-sub-nav-link">General &amp; Administrative Information</a></li>
                                    <li id="menu-item-582" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/2/" class="miz-sub-nav-link">Finance</a>
                                        <ul class="miz-sub-nav">
                                            <li id="menu-item-584" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/1/" class="miz-sub-nav-link">Sub-item</a></li>
                                            <li id="menu-item-582" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/2/" class="miz-sub-nav-link">Sub-item 2</a></li>
                                        </ul>
                                    </li>
                                    <li id="menu-item-589" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/3/" class="miz-sub-nav-link">Purchasing</a></li>
                                    <li id="menu-item-591" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/4/" class="miz-sub-nav-link">Travel</a></li>
                                    <li id="menu-item-581" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/5/" class="miz-sub-nav-link">Communications</a></li>
                                    <li id="menu-item-588" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/6/" class="miz-sub-nav-link">Property, Equipment, &amp; Facilities</a></li>
                                    <li id="menu-item-585" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/7/" class="miz-sub-nav-link">Health &amp; Safety</a></li>
                                    <li id="menu-item-579" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/8/" class="miz-sub-nav-link">Accidents &amp; Incidents</a></li>
                                    <li id="menu-item-587" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/9/" class="miz-sub-nav-link">Insurance</a></li>
                                    <li id="menu-item-590" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/10/" class="miz-sub-nav-link">Records Management</a></li>
                                    <li id="menu-item-583" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/11/" class="miz-sub-nav-link">Forms</a></li>
                                    <li id="menu-item-580" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/12/" class="miz-sub-nav-link">Campus Facilities</a></li>
                                    <li id="menu-item-586" class="miz-sub-nav-item"><a href="http://dev-bppm.pantheonsite.io/chapter/13/" class="miz-sub-nav-link">Information Technology &amp; Telecommunications</a></li>
                                </ul>
                            </nav>
                        </aside>

                    </div>
                </div>
            </section>
        </main>

        <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>

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="/scripts/bundle.js" defer="defer"></script>

</body>

</html>
{
  "Site": null,
  "site": {
    "title": "Base Templates"
  },
  "Menu": {
    "Primary": {
      "items": [
        {
          "title": "Home",
          "url": "#"
        },
        {
          "title": "Item 1",
          "url": "#foo"
        },
        {
          "title": "Item 2",
          "url": "#bar"
        }
      ]
    }
  },
  "footer": {},
  "page": {
    "title": "Left aside"
  },
  "aside": {
    "align": "left"
  }
}