Front 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 %}
<div class="miz-page-content__full mb-5">

  <h2>Front page template</h2>

  <p>This is sample content on the front page template. This content runs the full width of the page.</p>

  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis minus possimus, unde doloremque quaerat officiis asperiores dolorum repudiandae consequatur obcaecati esse voluptatem, fuga odio ex omnis iusto hic quasi tenetur.</p>

  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus quo nulla ipsa velit. Temporibus unde, aliquam officia assumenda, quae autem fugit optio nemo voluptatum illo totam nulla quasi, in facilis.</p>

</div>
{% 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>Front page - 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">

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

                    <div class="miz-page-content__layer">
                        <div class="miz-page-content__full mb-5">

                            <h2>Front page template</h2>

                            <p>This is sample content on the front page template. This content runs the full width of the page.</p>

                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis minus possimus, unde doloremque quaerat officiis asperiores dolorum repudiandae consequatur obcaecati esse voluptatem, fuga odio ex omnis iusto hic quasi tenetur.</p>

                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus quo nulla ipsa velit. Temporibus unde, aliquam officia assumenda, quae autem fugit optio nemo voluptatum illo totam nulla quasi, in facilis.</p>

                        </div>

                    </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": "Front page"
  }
}
  • Handle: @miz-front-page
  • Preview:
  • Filesystem Path: fractal/pattern-library/miz/templates/base/front-page/front-page.twig