There's a new version of UIDS!

UIDS - UI Design System

There are no notes for this item.

Page Layout

Component Preview 
<header class="iowa-bar iowa-bar--narrow" data-uids-header>
    <div class="iowa-bar__container">
        <div class="logo logo--tab">
            <a href="https://www.uiowa.edu">
                <div class="element-invisible">The University of Iowa</div>
                <svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo-header" role="img" viewBox="0 0 311.6 90.2">
                    <path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
                    <path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
                    <path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
                    <path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
                    <image src="../../assets/images/uiowa-primary.png">
                        <title id="logo-header">University of Iowa</title>
                    </image>
                </svg>
            </a>
        </div>
        <div class="parent-site-name">
            <a href="https://osc.uiowa.edu/">
                Office of Strategic Communication
            </a>
        </div>
    </div>
    <div class="iowa-bar__below">
        <div class="iowa-bar__container">
            <h1 class="site-name">
                Brand Manual
            </h1>

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

<main>
    <a id="main-content" tabindex="-1"></a>

    <article role="article" class="page__container">

        <h1>Page Title</h1>

        <h2>Second Level</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>

        <h3>Third Level</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>

        <h4>Fourth Level</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>
        <h5>Fifth Level</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
            mattis neque.</p>

        <ol type="1">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol type="A">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol type="a">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol type="I">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol type="i">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>

        <ol class="is-lower-alpha">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol class="is-lower-roman">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol class="is-upper-alpha">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <ol class="is-upper-roman">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>

    </article>
</main>

<footer class="footer">
    <div class="footer__container footer__container--flex">
        <div class="footer__links footer__links--contact">

            <div class="logo logo--footer">
                <a href="https://www.uiowa.edu">
                    <div class="element-invisible">The University of Iowa</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo-footer" role="img" viewBox="0 0 311.6 90.2">
                        <path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
                        <path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
                        <path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
                        <path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
                        <image src="../../assets/images/uiowa-primary.png">
                            <title id="logo-footer">University of Iowa</title>
                        </image>
                    </svg>
                </a>
            </div>

            <p>Iowa City, Iowa 52242<br>
                <a href="tel:319-335-3500"><i class="fas fa-phone"></i> 319-335-3500</a><br />
            </p>

            <div class="footer__links footer__links--icon">
                <nav role="navigation">
                    <ul class="menu">

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-facebook-square"></i><span class="link-text">Facebook</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-twitter-square"></i><span class="link-text">Twitter</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-instagram"></i><span class="link-text">Instagram</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-snapchat"></i><span class="link-text">Snapchat</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-youtube"></i><span class="link-text">Youtube</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-linkedin"></i><span class="link-text">LinkedIn</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-pinterest"></i><span class="link-text">Pinterest</span></a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="socket">
                <ul class="socket__menu">
                    <li>© 2023 The University of Iowa</li>
                    <li>
                        <a href="https://uiowa.edu/privacy">Privacy Notice</a>
                    </li>
                    <li>
                        <a href="https://opsmanual.uiowa.edu/community-policies/nondiscrimination-statement">UI Nondiscrimination Statement</a>
                    </li>
                    <li>
                        <a href="https://uiowa.edu/accessibility">Accessibility</a>
                    </li>
                    <li>
                        <a href="https://nativeamericancouncil.org.uiowa.edu">UI Indigenous Land Acknowledgement</a>
                    </li>
                </ul>
            </div>

        </div>

    </div>
</footer>
  • Content: 
    .page__container {
  @include container-width;;
  &--mixed {
    @include container-width;;
  }
}

.flex__wrapper {
  @include breakpoint(sm) {
    flex-wrap: wrap;
    @include flexbox;
  }
}
  • URL: /components/raw/page-layouts/_page-layouts.scss
  • Filesystem Path: src/components/wip/templates/page-layouts/_page-layouts.scss
  • Size: 193 Bytes