Housing

Edit on Github
Open in Playground View Demo

Introduction

This sample showcases how to build a housing page in AMP HTML. Explore how to use amp components, like amp-carousel, form and amp-list to create a housing page.

Additionally used AMP components must be imported in the header.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Heading

amp-fit-text can be used to fit the text to the available space. It works well for titles that vary not too much in length.

Example

Cosy House in Central London

<h4 class="mx1">
  <amp-fit-text width="300"
    height="45"
    layout="responsive"
    max-font-size="45">
    Cosy House in Central London
  </amp-fit-text>
</h4>

The amp-carousel works very well for housing image galleries. Learn more about amp-carousel here.

Example

<amp-carousel width="512"
  height="384"
  layout="responsive"
  type="slides">
  <amp-img src="/img/buckingham_palace_building_1280x960.jpg"
    width="1280"
    height="960"
    layout="responsive"
    alt="Buckingham Palace"
    attribution="https://pixabay.com"></amp-img>
  <amp-img src="/img/buckingham_palace_entrance_1280x853.jpg"
    width="1280"
    height="853"
    layout="responsive"
    alt="Buckingham Palace entrance"
    attribution="https://pixabay.com"></amp-img>
</amp-carousel>

These buttons are used for requesting details on the property.

Example

Do you like this property?

<div class="contact-section p1">
  <h4 class="mt0"> Do you like this property?</h4>
  <div class="contact">
    <a href="tel:012 3456789"
      class="ampstart-btn caps ml1">Call agent</a>
    <a href="mailto:someone@example.com"
      class="ampstart-btn caps ml1">Email agent</a>
  </div>
</div>

Social

The Social Share extension provides a common interface for share buttons. Learn more about amp-social-share here.

Example

<p class="social-share p1">
  <amp-social-share type="twitter"
    width="60"
    height="44"
    class="mr2"></amp-social-share>
  <amp-social-share type="facebook"
    width="60"
    height="44"
    data-attribution="254325784911610"
    class="mr2"> </amp-social-share>
  <amp-social-share type="gplus"
    width="60"
    height="44"
    class="mr2"></amp-social-share>
  <amp-social-share type="email"
    width="60"
    height="44"
    class="mr2"></amp-social-share>
  <amp-social-share type="pinterest"
    width="66"
    height="44"
    class="mr2"></amp-social-share>
</p>

Collapsibles/Accordion

Use amp-accordion to hide and show additional data about your product. Learn more about amp-accordion here. Embedding Google Maps is possible via the Google Maps Embed API, see here for a sample.

Example

Description

  • Ideally located near tube station
  • Open plan kitchen
  • Bicycle storage, visitors parking, communal gardens and roof terraces

View on map

Floorplan

Mortgage Calculator

Price
£
Deposit
£
Annual interest
%
Repayment period (years)
  <amp-accordion>
    <section>
      <h4>Description</h4>
      <ul class="description p1">
        <li>Ideally located near tube station</li>
        <li>Open plan kitchen</li>
        <li>Bicycle storage, visitors parking, communal gardens and roof terraces</li>
      </ul>
    </section>
    <section>
      <h4>View on map</h4>
      <amp-iframe title="Embedded Google map"
        width="600"
        height="400"
        layout="responsive"
        sandbox="allow-scripts allow-same-origin allow-popups"
        frameborder="0"
        src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848&q=London SW1A 1AA">
      </amp-iframe>
    </section>
    <section>
      <h4>Floorplan</h4>
      <amp-img src="/img/floorplan_518x340.jpg"
        width="518"
        height="340"></amp-img>
    </section>
    <section>
      <h4>Mortgage Calculator</h4>
      <form class="px1 pt1"
        method="GET"
        action="/samples_templates/housing/calculate-mortgage"
        action-xhr="/samples_templates/housing/calculate-mortgage-xhr"
        target="_top">
        <div class="flex mb1">
          <span class="form-field-left">
            Price
          </span>
          <div class="form-field-right relative">
            <span>&#163</span>
            <input type="number"
              name="price"
              maxlength="10"
              value="2000000"
              required>
          </div>
        </div>
        <div class="flex mb1">
          <span class="form-field-left">
            Deposit
          </span>
          <div class="form-field-right relative">
            <span>&#163</span>
            <input type="number"
              name="deposit"
              maxlength="10"
              value="100000"
              required>
          </div>
        </div>
        <div class="flex mb1">
          <span class="form-field-left">
            Annual interest
          </span>
          <div class="form-field-right relative">
            <span>&#37;</span>
            <input type="number"
              name="annual_interest"
              maxlength="10"
              value="2.5"
              step="0.01"
              required>
          </div>
        </div>
        <div class="flex mb1">
          <span class="form-field-left">
            Repayment period (years)
          </span>
          <div class="form-field-right relative">
            <span> </span>
            <input type="number"
              name="repayment_period"
              value="25"
              required>
          </div>
        </div>
        <div class="flex mb1">
          <input type="submit"
            value="Calculate"
            class="ampstart-btn caps">
        </div>
        <div submit-success>
          <template type="amp-mustache">
            Monthly repayment {{monthly_repayment}}
          </template>
        </div>
        <div submit-error>
          <template type="amp-mustache">
            Error! You entered some incorrect details {{err}}
          </template>
        </div>
      </form>
    </section>
  </amp-accordion>

Properties sold nearby

Use amp-list to show a list of properties sold nearby. Learn more about amp-list here

Example

Show more
<amp-list width="auto"
  height="150"
  layout="fixed-height"
  src="/json/other_properties.json">
  <template type="amp-mustache">
    <a href="#"
      class="ampstart-card related m1">
      <amp-img width="122"
        height="100"
        src="{{src}}"
        alt="{{alt}}"
        attribution="{{attribution}}"></amp-img>
      <p>{{desc}}</p>
      <p>{{address}}</p>
      <p class="price-other">{{price}}</p>
    </a>
  </template>
  <div overflow
    role="button"
    aria-label="Show more"
    class="list-overflow">
    Show more
  </div>
</amp-list>

User Analytics

Analytics must be configured in the body. Here we use Google Analytics to track pageviews.

Example

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-73836974-1"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "Housing"
          }
        }
      }
    }
  </script>
</amp-analytics>