DAHLIA Pattern Library

Leaseup Table 

<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 short has-breadcrumbs bg-dust has-tabs">
    <div class="row full-width inner--3x">
        <div class="large-12 columns ">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumbs">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li class="current"><a href="#" aria-current="page">Cloning</a></li>
                </ol>
            </nav>
            <hgroup class="lead-header_group">
                <h1 class="lead-header_title small c-oil">Page Header</h1>
                <div class="medium-8 columns no-padding">
                </div>
                <div class="medium-4 columns no-padding">
                    <span class="lead-header_secondary-action"><a href="#" class="alt-caps">export</a></span>
                </div>
            </hgroup>
        </div>
    </div>
</header>

<div class="tabs-row row full-width inner--3x bg-dust">
    <ul class="tabs full-width-small-only" role="menubar">
        <li class="tab-title" role="none"><a href="#" role="menuitem" tabindex="" aria-selected="">Listing</a></li>
        <li class="tab-title active" role="none"><a href="#" role="menuitem" tabindex="" aria-selected="">Applications</a></li>
    </ul>
</div>

<section class="tabs-card-row row full-width inner--3x padding-top--2x margin-bottom--2x">
    <div class="filter-row">
        <div class="filter-group">
            <div class="filter-group_item">
                <label for="textInput" class="sr-only">Label</label>
                <input type="text" id="textInput" name="textInput" placeholder="Application Number" class="" /> </div>
            <div class="filter-group_item">
                <label for="options" class="sr-only">Label</label>
                <select name="options" id="options" class="" data-width="auto">
        <option value="">Any Listing</option>
          <option value="1">Option 1</option>
      	<option value="2">Option 2</option>
      	<option value="3">Option 3</option>
      	<option value="4">Option 4</option>
      	<option value="5">Option 5</option>
      	<option value="6">Option 6</option>
      </select> </div>
            <div class="filter-group_item">
                <label for="textInput" class="sr-only">Label</label>
                <input type="text" id="textInput" name="textInput" placeholder="First Name" class="" /> </div>
            <div class="filter-group_item">
                <label for="textInput" class="sr-only">Label</label>
                <input type="text" id="textInput" name="textInput" placeholder="Last Name" class="" /> </div>
            <div class="filter-group_item">
                <label for="options" class="sr-only">Label</label>
                <select name="options" id="options" class="" data-width="auto">
        <option value="">Submission Type</option>
          <option value="1">Option 1</option>
      	<option value="2">Option 2</option>
      	<option value="3">Option 3</option>
      	<option value="4">Option 4</option>
      	<option value="5">Option 5</option>
      	<option value="6">Option 6</option>
      </select> </div>
            <div class="filter-group_action">
                <button class="button small" type="button" data-event="">Filter</button>
            </div>
        </div>
    </div>
    <table class="plain" role="grid">
        <thead>
            <tr>
                <th scope="col">Unit Number</th>
                <th scope="col">Area</th>
                <th scope="col">Baths</th>
                <th scope="col">Floor</th>
                <th scope="col">Accessibility</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row">
                    #127
                </td>
                <td>
                    469 <small>sqft</small>
                </td>
                <td>
                    1
                </td>
                <td>
                    1st
                </td>
                <td>
                    Wheelchair access
                </td>
            </tr>
            <tr>
                <td scope="row">
                    #127
                </td>
                <td>
                    469 <small>sqft</small>
                </td>
                <td>
                    1
                </td>
                <td>
                    1st
                </td>
                <td>
                    Wheelchair access
                </td>
            </tr>
            <tr>
                <td scope="row">
                    #127
                </td>
                <td>
                    469 <small>sqft</small>
                </td>
                <td>
                    1
                </td>
                <td>
                    1st
                </td>
                <td>
                    Wheelchair access
                </td>
            </tr>
            <tr>
                <td scope="row">
                    #127
                </td>
                <td>
                    469 <small>sqft</small>
                </td>
                <td>
                    1
                </td>
                <td>
                    1st
                </td>
                <td>
                    Wheelchair access
                </td>
            </tr>
            <tr>
                <td scope="row">
                    #127
                </td>
                <td>
                    469 <small>sqft</small>
                </td>
                <td>
                    1
                </td>
                <td>
                    1st
                </td>
                <td>
                    Wheelchair access
                </td>
            </tr>
            <tr>
                <td scope="row">
                    #127
                </td>
                <td>
                    469 <small>sqft</small>
                </td>
                <td>
                    1
                </td>
                <td>
                    1st
                </td>
                <td>
                    Wheelchair access
                </td>
            </tr>
        </tbody>
    </table>

</section>
 
{{> @top-bar--full }}
{{> @lead-header--short classes="bg-dust has-tabs" action="export" }}

<div class="tabs-row row full-width inner--3x bg-dust">
  {{> @tabs--menu-links items=menus.listing }}
</div>

<section class="tabs-card-row row full-width inner--3x padding-top--2x margin-bottom--2x">
  {{> @filter-row }}
  {{ render '@table--features' }}
</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.