Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.6)

Note

This page is archived under version 1.6 and is available for reference purposes only. The latest version of Pattern Library is 2.

Application header

The following header contains the application’s title. View more header configurations.

Application title

Code


<header class="cui coc-header">
    <div class="header-inner">
        <!-- Skip links provide screen readers and keyboard users a shortcut to the main content area -->
        <ul class="skip-links">
            <li><a href="#content" class="skip-link">Skip to main content</a></li>
        </ul>

        <!-- Logo -->
        <a href="#" class="coc-logo">
            <img src="../img/coc-logo-simplify.svg" alt="Return to the homepage" class="coc-logo-mobile no-print">
            <img src="../img/coc-logo.svg" alt="Return to the homepage" class="coc-logo-desktop">
        </a>

        <!-- Title -->
        <span class="app-title">Application title</span>
    </div>
</header>