Page Titles

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/page-title.css file second from your npm repository. Note, the page title component does not contain navigation elements. Use the @corelogic/clui/dist/css/components/secondary-nav.css component instead if you would like navigation included.

Base Page Title

Order ID: CLG2253393

Loan #: 123456789 | Vendor Order ID: 897645321

<div class="title">
  <div class="container-fluid">
    <h1 class="primary-title">Order ID: CLG2253393</h1>
    <h2 class="secondary-title">Loan #: 123456789 | Vendor Order ID: 897645321</h2>
  </div>
</div>

Page Title With Secondary Navigation

189 Thompson Rd. Los Angeles, CA 90026

4 beds, 2 baths, Duplex, 3221 sqft

<div class="title-nav-group">
    <div class="title">
        <div class="container-fluid">
            <h1 class="primary-title">189 Thompson Rd. Los Angeles, CA 90026</h1>
            <h2 class="secondary-title">4 beds, 2 baths, Duplex, 3221 sqft</h2>
        </div>
    </div>
    <div class="secondary-nav">
        <div class="container-fluid more">
            <ul class="secondary-tabs">
                <li class="active"><a class="secondary-tab" href="#">Secondary</a></li>
                <li><a class="secondary-tab" href="#">Navigation</a></li>
                <li><a class="secondary-tab" href="#">Element</a></li>
                <li><a class="secondary-tab" href="#">Example</a></li>
            </ul>
        </div>
    </div>
</div>