DAHLIA Pattern Library

Signed Out 

<nav class="top-bar full-width inner--3x" role="navigation">
    <div class="row">
        <ul class="title-area">
            <li class="name">
                <div class="name-logo is-short t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
            </li>
        </ul>
        <section class="top-bar-section">
            <ul class="nav-menu left">
                <li>
                    <a href="/lease-up/listings.html">
          Listings
        </a>
                </li>
                <li>
                    <a href="/lease-up/flags.html">
          Flags
        </a>
                </li>
                <li>
                    <a href="/lease-up/applications.html">
          Applications
        </a>
                </li>
                <li>
                    <a href="/lease-up/lease-up.html">
          Lease Up
        </a>
                </li>
            </ul>

            <ul class="nav-menu right">
                <li>
                    <a href="/pages/get-assistance.html">
          Sign Out
        </a>
                </li>
            </ul>
        </section>
    </div>
</nav>
<header class="lead-header bg-gradient bg-image hero-header">
    <div class="row full-width inner--3x">
        <div class="large-12 columns max-width">
            <hgroup class="lead-header_group">
                <h1 class="lead-header_title small-serif c-white">Page Header</h1>
            </hgroup>
        </div>
    </div>
</header>
<section class="tabs-card-row row full-width inner--3x margin-bottom--2x padding-top--2x offset-up--4x">
    <div class="large-11 columns max-width">
        <ul class="content-grid margin-bottom--2x">
            <li class="content-item">
                <div class="content-card bg-dust">
                    <h4 class="t-sans t-base t-bold margin-bottom--half">
                        <a href="#">City of SF Affordable Rental Units </a>
                    </h4>
                    <p>Family Housing <br> San Francisco</p>
                </div>
            </li>
            <li class="content-item">
                <div class="content-card bg-dust">
                    <h4 class="t-sans t-base t-bold margin-bottom--half">
                        <a href="#">City of SF Middle-Income Rental Units </a>
                    </h4>
                    <p>Individual and Family Housing <br> San Francisco Bay Area</p>
                </div>
            </li>
            <li class="content-item">
                <div class="content-card bg-dust">
                    <h4 class="t-sans t-base t-bold margin-bottom--half">
                        <a href="#">Episcopal Community Services </a>
                    </h4>
                    <p>Individual and Family Housing <br> San Francisco Bay Area</p>
                </div>
            </li>
            <li class="content-item">
                <div class="content-card bg-dust">
                    <h4 class="t-sans t-base t-bold margin-bottom--half">
                        <a href="#">Compass One Home </a>
                    </h4>
                    <p>Individual and Family Housing <br> San Francisco Bay Area</p>
                </div>
            </li>
        </ul>
    </div>
</section>
 
{{> @top-bar--full }}
{{> @lead-header--hero classes="hero-header" max-width="max-width" }}

<section class="tabs-card-row row full-width inner--3x margin-bottom--2x padding-top--2x offset-up--4x">
  <div class="large-11 columns max-width">
    {{ render '@content-card-grid' items=welcome.signedout margins="wide-grid-margins" }}
  </div>
</section>
 
{
  "menus": {
    "leaseup-shortform": [
      {
        "name": "Short Form Application",
        "active": true
      },
      {
        "name": "Supplemental Information"
      }
    ],
    "leaseup": [
      {
        "name": "Short Form Application"
      },
      {
        "name": "Supplemental Information",
        "active": true
      }
    ],
    "listing": [
      {
        "name": "Listing"
      },
      {
        "name": "Applications",
        "active": true
      }
    ],
    "listing-view": [
      {
        "name": "Listing",
        "active": true
      },
      {
        "name": "Applications"
      }
    ]
  }
}

There are no notes for this item.