DAHLIA Pattern Library

Features 

<accordion-group>
    <accordion-heading>
        <img class="accordion-icon" src="/toolkit/images/listing-features.svg" alt="features-options">
        <h3 class="accordion-name">Features</h3>
        <span class="accordion-subheader">Amenities, unit details and additional fees</span>
        <span class="ui-icon ui-control ui-small i-color ">
      <svg>
        <use xlink:href="#i-arrow-down"></use>
      </svg>
    </span>
    </accordion-heading>

    <header class="listing-header show-for-medium-up">
        <img class="listing-header_icon" src="/toolkit/images/listing-features.svg" alt="features-options">
        <hgroup class="listing-header_group">
            <h3 class="listing-header_name">Features</h3>
            <span class="listing-header_subheader">Amenities, unit details and additional fees</span>
        </hgroup>
    </header>

    <div class="content content-section">
        <div class="content-tile feature-tile">
            <div class="feature-row row collapse">
                <div class="medium-4 columns">
                    <h4 class="feature-title">Neighborhood</h4>
                </div>
                <div class="medium-8 columns">
                    <p class="feature-tile_content t-small">SOMA</p>
                </div>
            </div>
            <div class="feature-row row collapse">
                <div class="medium-4 columns overflow-wrap-break-word">
                    <h4 class="feature-title">Built</h4>
                </div>
                <div class="medium-8 columns">
                    <p class="feature-tile_content t-small">2015</p>
                </div>
            </div>

            <div class="feature-row row collapse margin-bottom">
                <div class="snall-12 medium-4 columns overflow-wrap-break-word">
                    <h4 class="feature-title">Property Amenities</h4>
                </div>
                <div class="small-6 medium-4 columns">
                    <ul class="feature-tile_content t-small">
                        <li>24-hour Desk</li>
                        <li>Elevator</li>
                        <li>Lobby</li>
                        <li>Laundry Facilities</li>
                        <li>Community TV Room</li>
                        <li>All units w/ Private Bathrooms and Kitchens</li>
                    </ul>
                </div>
                <div class="small-6 medium-4 columns">
                    <ul class="feature-tile_content t-small">
                        <li>Cats allowed</li>
                        <li>Dogs allowed</li>
                        <li>Water and Trash Included</li>
                        <li>No Parking</li>
                    </ul>
                </div>
            </div>

            <div class="feature-row row collapse">
                <div class="medium-4 columns overflow-wrap-break-word">
                    <h4 class="feature-title">Accessibility</h4>
                </div>
                <div class="medium-8 columns">
                    <ul class="feature-tile_content t-small">
                        <li>Wheelchair Accees</li>
                        <li>Grab Bars</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="content-tile feature-tile">
            <h4 class="feature-title margin-bottom">Unit Features</h4>
            <div class="stats-toggle margin-bottom">
                <div class="toggle-box toggler has-toggle" role="button" tabindex="0">
                    <div class="toggle-box_label">
                        <strong>Studio</strong>: 1 Unit, 639&ndash;900 square feet, Accessible units
                    </div>

                    <span class="ui-icon ui-control ui-small i-color ">
            <svg>
              <use xlink:href="#i-arrow-down"></use>
            </svg>
          </span>
                </div>

                <div class="toggled margin-bottom">
                    <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>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="stats-toggle margin-bottom">
                <div class="toggle-box toggler has-toggle" role="button" tabindex="0">
                    <div class="toggle-box_label">
                        <strong>1 Bedroom</strong>: 6 Units, 639&ndash;900 square feet, Accessible units
                    </div>

                    <span class="ui-icon ui-control ui-small i-color ">
            <svg>
              <use xlink:href="#i-arrow-down"></use>
            </svg>
          </span>
                </div>

                <div class="toggled">
                    <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>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="content-tile feature-tile">
            <div class="content-card bg-dust">
                <h5 class="content-card_title">Additional Fees</h5>

                <div class="row collapse">
                    <div class="medium-6 columns padding-right padding-bottom">
                        <span class="t-small">Application Fee</span>
                        <p class="t-delta no-margin t-bold">$40</p>
                        <span class="content-label t-small">per applicant age 18 and over</span>
                        <span class="t-tiny d-block">Due post lottery</span>
                    </div>
                    <div class="medium-6 columns padding-bottom">
                        <span class="t-small">Deposit</span>
                        <p class="t-delta no-margin t-bold">$941</p>
                        <span class="content-label t-small">or one month's rent</span>
                        <span class="t-tiny d-block">May be higher for lower credit scores</span>
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-12 columns">
                        <span class="t-small">Renter pays phone, internet and cable</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</accordion-group>
 
<accordion-group> 
  <accordion-heading>
    <img class="accordion-icon" src="/toolkit/images/listing-features.svg" alt="features-options">
    <h3 class="accordion-name">Features</h3>
    <span class="accordion-subheader">Amenities, unit details and additional fees</span>
    {{> @icons-base icon="arrow-down" size="small" position="control"}}
  </accordion-heading>

  <header class="listing-header show-for-medium-up">
    <img class="listing-header_icon" src="/toolkit/images/listing-features.svg" alt="features-options">
    <hgroup class="listing-header_group">
      <h3 class="listing-header_name">Features</h3>
      <span class="listing-header_subheader">Amenities, unit details and additional fees</span>
    </hgroup>
  </header>

  {{> @content-section}}
</accordion-group>
 
{
  "inputs": {
    "states": [
      {
        "name": "Alabama",
        "attr": "AL"
      },
      {
        "name": "Alaska",
        "attr": "AK"
      },
      {
        "name": "Arizona",
        "attr": "AK"
      },
      {
        "name": "Arkansas",
        "attr": "AK"
      },
      {
        "name": "California",
        "attr": "CA"
      },
      {
        "name": "Colorado",
        "attr": "CO"
      },
      {
        "name": "Connecticut",
        "attr": "CT"
      },
      {
        "name": "Delaware",
        "attr": "DE"
      },
      {
        "name": "District Of Columbia",
        "attr": "DC"
      },
      {
        "name": "Florida",
        "attr": "FL"
      },
      {
        "name": "Georgia",
        "attr": "GA"
      },
      {
        "name": "Hawaii",
        "attr": "HI"
      },
      {
        "name": "Idaho",
        "attr": "ID"
      },
      {
        "name": "Illinois",
        "attr": "IL"
      },
      {
        "name": "Indiana",
        "attr": "IN"
      },
      {
        "name": "Iowa",
        "attr": "IA"
      },
      {
        "name": "Kansas",
        "attr": "KS"
      },
      {
        "name": "Kentucky",
        "attr": "KY"
      },
      {
        "name": "Louisiana",
        "attr": "LA"
      },
      {
        "name": "Maine",
        "attr": "ME"
      },
      {
        "name": "Maryland",
        "attr": "MD"
      },
      {
        "name": "Massachusetts",
        "attr": "MA"
      },
      {
        "name": "Michigan",
        "attr": "MI"
      },
      {
        "name": "Minnesota",
        "attr": "MN"
      },
      {
        "name": "Mississippi",
        "attr": "MS"
      },
      {
        "name": "Missouri",
        "attr": "MO"
      },
      {
        "name": "Montana",
        "attr": "MT"
      },
      {
        "name": "Nebraska",
        "attr": "NE"
      },
      {
        "name": "Nevada",
        "attr": "NV"
      },
      {
        "name": "New Hampshire",
        "attr": "NH"
      },
      {
        "name": "New Jersey",
        "attr": "NJ"
      },
      {
        "name": "New Mexico",
        "attr": "NM"
      },
      {
        "name": "New York",
        "attr": "NY"
      },
      {
        "name": "North Carolina",
        "attr": "NC"
      },
      {
        "name": "North Dakota",
        "attr": "ND"
      },
      {
        "name": "Ohio",
        "attr": "OH"
      },
      {
        "name": "Oklahoma",
        "attr": "OK"
      },
      {
        "name": "Oregon",
        "attr": "OR"
      },
      {
        "name": "Pennsylvania",
        "attr": "PA"
      },
      {
        "name": "Rhode Island",
        "attr": "RI"
      },
      {
        "name": "South Carolina",
        "attr": "SC"
      },
      {
        "name": "South Dakota",
        "attr": "SD"
      },
      {
        "name": "Tennessee",
        "attr": "TN"
      },
      {
        "name": "Texas",
        "attr": "TX"
      },
      {
        "name": "Utah",
        "attr": "UT"
      },
      {
        "name": "Vermont",
        "attr": "VT"
      },
      {
        "name": "Virginia",
        "attr": "VA"
      },
      {
        "name": "Washington",
        "attr": "WA"
      },
      {
        "name": "West Virginia",
        "attr": "WV"
      },
      {
        "name": "Wisconsin",
        "attr": "WI"
      },
      {
        "name": "Wyoming",
        "attr": "WY"
      }
    ]
  }
}

There are no notes for this item.