Regions

Banner

A full-width element, typically with a call to action.

Team members working together

We're hiring!

The needs at Tokyo Furnished Rentals are constantly evolving, but we are always on the lookout for talented and engaged people to help us deliver excellence to the interwebs and beyond for our clients.

View open positions
<div class="region--banner region--banner--were-hiring region--full-width">
  <div class="region--banner--were-hiring__image">
    <img src="/assets/img/team-magenta-fade.jpg" alt="Team members working together">
  </div>
  <div class="region--banner--were-hiring__text">
    <h2 class="heading--underline--eggshell c-eggshell">
      We're hiring!
    </h2>
    <p class="c-eggshell">
      The needs at Tokyo Furnished Rentals are constantly evolving, but we are always on the lookout for talented and engaged people to help us deliver excellence to the interwebs and beyond for our clients.
    </p>
    <a href="/company" class="link--arrow link--light--no-hover">View open positions</a>
  </div>
</div>

Blog tiles

<div class="region--blog-tiles region--full-width">
  <div class="region--blog-tiles__wrapper region--full-width__wrapper">
    <div class="tile--title--blog bg-magenta">
      <h2 class="c-eggshell">Sharing Our Expertise</h2>
    </div>
    <div class="tile--blog tile">
      <a href="/2017/03/20/lightning-q1-2017.html" class="tile--blog__link">
        <div class="tile--blog__content tile__content bg-light-teal">
          <div class="tile--blog__image" style="background-image: url(/assets/img/blog/lightning-17q1-hero.jpg);">
          </div>
          <div class="tile--blog__post-title">
            <p>Lightning Talks - Three Useful Additions to Any Developer Toolbox in Q1 2017</p>
          </div>
        </div>
        <div class="tile--blog__hover tile__hover bg-orange">
          <p>What we’ve added to our developer toolboxes in Q1 2017!</p>
          <p class="link--cta link--cta--inverse">Read more</p>
        </div>
      </a>
    </div>
    <div class="tile--blog tile">
      <a href="/2017/03/06/five-drupal-8-tips-to-empower-content-authors.html" class="tile--blog__link">
        <div class="tile--blog__content tile__content bg-light-teal">
          <div class="tile--blog__image" style="background-image: url(/assets/img/blog/content-authoring-d8.jpg);">
          </div>
          <div class="tile--blog__post-title">
            <p>Five Drupal 8 Tips to Empower Content Authors</p>
          </div>
        </div>
        <div class="tile--blog__hover tile__hover bg-orange">
          <p>Five Drupal 8 tips to make the content authoring experience more enjoyable and productive!</p>
          <p class="link--cta link--cta--inverse">Read more</p>
        </div>
      </a>
    </div>
    <div class="tile--blog tile">
      <a href="/2017/02/27/on-web-typography-review.html" class="tile--blog__link">
        <div class="tile--blog__content tile__content bg-light-teal">
          <div class="tile--blog__image" style="background-image: url(/assets/img/blog/on-web-typography-featured.jpg);">
          </div>
          <div class="tile--blog__post-title">
            <p>On Web Typography - a Book Review</p>
          </div>
        </div>
        <div class="tile--blog__hover tile__hover bg-orange">
          <p>A review of Jason Santa Maria’s <em>On Web Typography</em>, and how we applied the
lessons learned to our workflow.</p>
          <p class="link--cta link--cta--inverse">Read more</p>
        </div>
      </a>
    </div>
  </div>
  <div class="region--blog-tiles__view-all-link">
    <a href="/blog" class="link--arrow">View all posts</a>
  </div>
</div>

Blog topics

<div class="region--blog-topics">
  <p class="region--blog-topics__heading heading--bold h4 c-dark-teal">TOPICS</p>
  <div class="region--blog-topics__topics">
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Drupal</span>
        <span class="blog-topic__number">31</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">User Experience</span>
        <span class="blog-topic__number">6</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Drupal 8</span>
        <span class="blog-topic__number">8</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Front End Development</span>
        <span class="blog-topic__number">4</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Design / UX</span>
        <span class="blog-topic__number">7</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Composer</span>
        <span class="blog-topic__number">3</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Continuous Integration</span>
        <span class="blog-topic__number">11</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Drupal 8</span>
        <span class="blog-topic__number">8</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Front End Development</span>
        <span class="blog-topic__number">4</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Design / UX</span>
        <span class="blog-topic__number">7</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Composer</span>
        <span class="blog-topic__number">3</span>
      </a>
    </div>
    <div class="blog-topic">
      <a class="blog-topic__link" href="/blog/tag/drupal">
        <span class="blog-topic__name">Continuous Integration</span>
        <span class="blog-topic__number">11</span>
      </a>
    </div>
  </div>
</div>

Call to action

Move Work Forward

Exploring how digital can help you achieve your business goals?
Want to learn more about our processes?
We'd love to hear from you!

Get in touch
<div class="region--cta wrapper">
  <div class="region--cta__wrapper">
    <h2 class="region--cta__heading c-orange">Move Work Forward</h2>
    <div class="region--cta__text">
      <p class="paragraph--loud c-dark-teal">Exploring how digital can help you achieve your business goals?<br>
         Want to learn more about our processes?<br>
         We'd love to hear from you!</p>
    </div>
    <a href="/contact" class="button--arrow--orange">Get in touch</a>
  </div>
</div>

Centered Paragraph

Core Values

What makes a truly great team out of Savasians is them sharing the same values, same culture and same core qualities.

<div class="region--centered-paragraph region--centered-paragraph--white region--full-width">
    <div class="region--full-width__wrapper">
        <div class="region--centered-paragraph__text">
            <h1 class=" heading--bold">Core Values</h1>
            <p>What makes a truly great team out of Savasians is them sharing the same values, same culture and same core qualities.</p>
        </div>
    </div>
</div>

Client logos

<div class="region--client-logos region">
  <div class="region--client-logos__logos">
    <div class="region--client-logos__logo">
      <img alt="Duke University" src="/assets/img/work/logos/duke-logo.png" class="image--grayscale">
    </div>
    <div class="region--client-logos__logo">
      <img alt="University of North Carolina at Chapel Hill" src="/assets/img/work/logos/unc-logo.png" class="image--grayscale">
    </div>
    <div class="region--client-logos__logo">
      <img alt="The MIT Press" src="/assets/img/work/logos/mitpress-logo.png" class="image--grayscale">
    </div>
    <div class="region--client-logos__logo">
      <img alt="Harvard Medical School" src="/assets/img/work/logos/hms-logo.png" class="image--grayscale">
    </div>
    <div class="region--client-logos__logo">
      <img alt="Acquia" src="/assets/img/work/logos/acquia-logo.png" class="image--grayscale">
    </div>
    <div class="region--client-logos__logo">
      <img alt="Hunter Boots" src="/assets/img/work/logos/hunter-logo.svg" class="image--grayscale">
    </div>
  </div>
</div>

Client logos stripe

Some of the organizations that entrusted us with their success:

<div class="region--client-logos-stripe region--full-width">
  <div class="region--client-logos-stripe__wrapper region--full-width__wrapper">
    <div class="region--client-logos-stripe__text">
      <p class="paragraph--loud">Some of the organizations that entrusted us with their success:</p>
    </div>
    <div class="region--client-logos__logos">
      <div class="region--client-logos__logo">
        <img alt="Duke University" src="/assets/img/work/logos/duke-logo.png" class="image--grayscale">
      </div>
      <div class="region--client-logos__logo">
        <img alt="University of North Carolina at Chapel Hill" src="/assets/img/work/logos/unc-logo.png" class="image--grayscale">
      </div>
      <div class="region--client-logos__logo">
        <img alt="The MIT Press" src="/assets/img/work/logos/mitpress-logo.png" class="image--grayscale">
      </div>
      <div class="region--client-logos__logo">
        <img alt="Harvard Medical School" src="/assets/img/work/logos/hms-logo.png" class="image--grayscale">
      </div>
      <div class="region--client-logos__logo">
        <img alt="Acquia" src="/assets/img/work/logos/acquia-logo.png" class="image--grayscale">
      </div>
    </div>
  </div>
</div>

Client quote

The class region--client-quote--dark can be included for a dark teal background.

Blyth Morrell

Blyth Morrell

Director of Strategic and Digital Communications at Duke University

We've gotten nothing but rave reviews about the new site.

<div class="region--client-quote region--full-width region--client-quote--light">
  <div class="region--client-quote__wrapper region--full-width__wrapper">
    <div class="region--client-quote__client-info">
      <img src="/assets/img/work/clients/bm-dt.jpg" class="region--client-quote__client-info__image" alt="Blyth Morrell">
      <p class="region--client-quote__client-info__name heading--bold">Blyth Morrell</p>
      <p class="region--client-quote__client-info__title">Director of Strategic and Digital Communications at Duke University</p>
    </div>
    <div class="region--client-quote__quote">
      <p class="region--client-quote__quote__text">We've gotten nothing but rave reviews about the new site.</p>
    </div>
  </div>
</div>

Footer

<footer class="region--footer" role="contentinfo">
  <div class="region--footer__main">
    <div class="region--footer__main__menu">
      <a href="#" class="region--footer__logo">
        <img src="/assets/img/logo-light.svg" alt="Tokyo Furnished Rentals" class="tfr-logo tfr-logo--light">
      </a>
      <nav role="navigation" class="footer-navigation">
        <ul class="footer-navigation__menu">
<!--
          <li class="footer-navigation__menu-link">
            <a href="#">Company</a>
          </li>
-->
          <li class="footer-navigation__menu-link">
            <a href="#">Listings</a>
          </li>
          <li class="footer-navigation__menu-link">
            <a href="#">Services</a>
          </li>
          <li class="footer-navigation__menu-link">
            <a href="#">Blog</a>
          </li>
          <li class="footer-navigation__menu-link">
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="region--footer__main__contact">
      <h4 class="region--footer__main__contact__title">Connect with us</h4>
      <a href="mailto:[email protected]">[email protected]</a>
<!--
      <p>(919) 432-4660</p>
      <address>
        SAVAS LABS<br>
        PMB 210<br>
        201 W Main Street, Suite 100<br>
        Durham, NC 27701
      </address>
-->
    </div>
    <div class="region--footer__main__social">
      <div class="region--footer__main__social__icons">
        <a href="https://twitter.com/RentalsTokyo"><i class="fa fa-twitter fa-lg fa-2x"></i></a>
      </div>
      <div class="region--footer__main__social__twitter">
    <a class="twitter-timeline" href="https://twitter.com/RentalsTokyo?ref_src=twsrc%5Etfw">Tweets by RentalsTokyo</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
    </div>
  </div>
  <div class="region--footer__bottom">
    <div class="region--footer__bottom__wrapper">
      <p class="region--footer__bottom__copyright">
        Copyright &copy; Tokyo Furnished Rentals 2018
      </p>
    </div>  </div>
</footer>

Header

<header class="region--header" role="banner">
  <div class="region--header__wrapper">

    <a href="#" class="region--header__logo">
      <img src="/assets/img/logo.svg" alt="Tokyo Furnished Rentals logo" class="tfr-logo tfr-logo--main">
    </a>

    <a href="#" id="js-mobile-menu" class="header-navigation__mobile-menu-link">MENU</a>

    <nav role="navigation" class="header-navigation">
      <ul id="js-navigation-menu" class="header-navigation__menu">
<!--
        <li class="header-navigation__menu-link ">
          <a href="#">Company</a>
        </li>
-->
        <li class="header-navigation__menu-link ">
          <a href="#">Listings</a>
        </li>
        <li class="header-navigation__menu-link ">
          <a href="#">Services</a>
        </li>
        <li class="header-navigation__menu-link ">
          <a href="#">Blog</a>
        </li>
        <li class="header-navigation__menu-link ">
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Key-value list

Be Inclusive

We embrace diversity in every sense of the word, not only for the benefits it brings to the company by providing a more holistic perspective on problem solving, but as it pertains to the empowerment of traditionally and presently underrepresented groups. We strive to craft an intentionally inclusive work environment in which everyone feels comfortable in their own skin.

Collaborate

Collaboration by means of listening, learning, and teaching is core to our spirit and key to our success. We share our knowledge and experience in our daily teamwork and enrich the broader community by imparting our expertise through blog posts, public code contributions, hosting local meetups, and presenting at conferences.

Be Respectful

Respect is paramount to fostering trust with each other and our partners. We recognize that we are all imperfect human humility and understanding. With egos checked at the door, our professional ethos, founded in honesty and integrity, makes us a delight to collaborate with.

Empathize

Not only do we find empathy a nice quality to be around, but exercising it intentionally in our work allows us put ourselves in the shoes of our partners and teammates to better understand their successes and struggles which makes us better-informed partners.

Excel

We take great care of the people we work with and the quality of the work we produce. By taking a client-centric approach to solving problems and constantly adding value we ensure we’re truly understanding each client’s needs and providing thoughtful, right-fit solutions that adhere to best practices. We hold ourselves to a high and constantly improving standard.

<div class="region--key-value-list region--full-width">
  <div class="region--key-value-list__wrapper region--full-width__wrapper">
    <div class="key-value-list__item">
      <div class="key-value-list__item__key">
        <h3 class="c-orange heading--bold">Be Inclusive</h3>
      </div>
      <div class="key-value-list__item__value">
        <p>We embrace diversity in every sense of the word, not only for the benefits it brings to the company by providing a more holistic perspective on problem solving, but as it pertains to the empowerment of traditionally and presently underrepresented groups. We strive to craft an intentionally inclusive work environment in which everyone feels comfortable in their own skin.</p>
      </div>
    </div>
    <div class="key-value-list__item">
      <div class="key-value-list__item__key">
        <h3 class="c-orange heading--bold">Collaborate</h3>
      </div>
      <div class="key-value-list__item__value">
        <p>Collaboration by means of listening, learning, and teaching is core to our spirit and key to our success. We share our knowledge and experience in our daily teamwork and enrich the broader community by imparting our expertise through <a href="/blog/">blog posts</a>, <a href="https://www.drupal.org/tfr">public code contributions</a>, <a href="http://www.meetup.com/triDUG/">hosting local meetups</a>, and presenting at conferences.</p>
      </div>
    </div>
    <div class="key-value-list__item">
      <div class="key-value-list__item__key">
        <h3 class="c-orange heading--bold">Be Respectful</h3>
      </div>
      <div class="key-value-list__item__value">
        <p>Respect is paramount to fostering trust with each other and our partners. We recognize that we are all imperfect human humility and understanding. With egos checked at the door, our professional ethos, founded in honesty and integrity, makes us a delight to collaborate with.</p>
      </div>
    </div>
    <div class="key-value-list__item">
      <div class="key-value-list__item__key">
        <h3 class="c-orange heading--bold">Empathize</h3>
      </div>
      <div class="key-value-list__item__value">
        <p>Not only do we find empathy a nice quality to be around, but exercising it intentionally in our work allows us put ourselves in the shoes of our partners and teammates to better understand their successes and struggles which makes us better-informed partners.</p>
      </div>
    </div>
    <div class="key-value-list__item">
      <div class="key-value-list__item__key">
        <h3 class="c-orange heading--bold">Excel</h3>
      </div>
      <div class="key-value-list__item__value">
        <p>We take great care of the people we work with and the quality of the work we produce. By taking a client-centric approach to solving problems and constantly adding value we ensure we’re truly understanding each client’s needs and providing thoughtful, right-fit solutions that adhere to best practices. We hold ourselves to a high and constantly improving standard.</p>
      </div>
    </div>
  </div>
</div>

Previous & Next links

<div class="region--prev-next-links region--prev-next-links--post pagination">
  <div class="outer-container">
    <a href="/2017/02/27/on-web-typography-review.html" class="pagination__previous"><i class="fa fa-angle-left "></i> Prev</a>
    <a href="/blog" class="pagination__view-all">View All Blog Posts</a>
    <a href="/2017/03/20/lightning-q1-2017.html" class="pagination__next"> Next <i class="fa fa-angle-right"></i></a>
  </div>
</div>

Rental blocks

The following example outputs 3 rental blocks with a CTA link.

<div class="region--rental-blocks region">
  <h2 class="heading--underline--orange region--rental-blocks__title">Rentals</h2>
  <div class="region--rental-blocks__rentals">
    <div class="rental-block">
<!--      <a class="rental-block__link" href="/listings/rentals/tokyo-treasures/"> -->
      <a class="rental-block__link" href="https://www.airbnb.com/rooms/11742309" target="_blank">
        <div class="rental-block__image" style="background-image: url(/assets/img/work/logos/airbnb-logo-eggshell.png);">
          <img src="/assets/img/work/tokyo-treasures/airbnb-block.jpg" alt="Tokyo Treasures">
        </div>
        <h3 class="heading--underline--orange">Tokyo Treasures</h3>
        <div class="rental-block__tags">
          <p>Hachikō Statue</p><p></p>
          <p>Scramble Crossing </p><p></p>
          <p>Shibuya Station </p><p></p>
          <p>Youth Capital of Tokyo </p>
        </div>
      </a>
    </div>
    <div class="rental-block">
<!--      <a class="rental-block__link" href="/listings/rentals/tokyo-listing1/"> -->
      <a class="rental-block__link" href="">
        <div class="rental-block__image" style="background-image: url(/assets/img/work/logos/airbnb-logo-eggshell.png);">
          <img src="/assets/img/work/tokyo-listing1/tokyo-listing1-block.jpg" alt="">
        </div>
        <h3 class="heading--underline--orange">Your property here!</h3>
        <div class="rental-block__tags">
          <p>Drupal 8 </p><p></p>
          <p>Responsive Design </p><p></p>
          <p>UX </p><p></p>
          <p>Client Server Integration </p>
        </div>
      </a>
    </div>
    <div class="rental-block">
      <a class="rental-block__link" href="/listings/rentals/tokyo-listing2/">
        <div class="rental-block__image" style="background-image: url(/assets/img/work/logos/homeaway-logo-eggshell.png);">
          <img src="/assets/img/work/tokyo-listing2/tokyo-listing2-block.jpg" alt="Your space here!">
        </div>
        <h3 class="heading--underline--orange">Your space here!</h3>
        <div class="rental-block__tags">
          <p>Drupal 8 </p><p></p>
          <p>Responsive Design </p><p></p>
          <p>UX </p><p></p>
          <p>Web Mapping </p>
        </div>
      </a>
    </div>
    <div class="region--rental-blocks__cta flex-center">
      <a href="/listings/rentals" class="button--arrow--orange">View all rentals</a>
    </div>
  </div>
</div>

Small rental blocks

For smaller rental blocks.

<div class="region--rental-blocks region--rental-blocks--small region">
  <div class="region--rental-blocks__rentals">
    <div class="rental-block">
      <a class="rental-block__link" href="/listings/rentals/mitpress-allbooks/">
        <div class="rental-block__image" style="background-image: url(/assets/img/work/logos/mitpress-logo-eggshell.png);">
          <img src="/assets/img/work/mitpress-allbooks/mitpress-allbooks-block.jpg" alt="MIT Press AllBooks Importer">
        </div>
        <h3 class="heading--underline--orange">MIT Press AllBooks Importer</h3>
        <div class="rental-block__tags">
          <p>Drupal </p><p></p>
          <p>Module Development </p><p></p>
          <p>PHP </p><p></p>
          <p>Testing </p>
        </div>
      </a>
    </div>
    <div class="rental-block">
      <a class="rental-block__link" href="/listings/rentals/transaction-advisors/">
        <div class="rental-block__image" style="background-image: url(/assets/img/work/logos/transaction-advisors-logo-eggshell.png);">
          <img src="/assets/img/work/transaction-advisors/transaction-advisors-block.jpg" alt="Transaction Advisors Multisite Development">
        </div>
        <h3 class="heading--underline--orange">Transaction Advisors Multisite Development</h3>
        <div class="rental-block__tags">
          <p>Drupal </p> <p></p>
          <p>Multisite </p><p></p>
          <p>Payment Processing </p><p></p>
          <p>Responsive Design </p>
        </div>
      </a>
    </div>
    <div class="rental-block">
      <a class="rental-block__link" href="/listings/rentals/mitpress-cognet/">
        <div class="rental-block__image" style="background-image: url(/assets/img/work/logos/cognet-logo-eggshell.png);">
          <img src="/assets/img/work/mitpress-cognet/mitpress-cognet-block.jpg" alt="MIT Press CogNet Responsive Redesign">
        </div>
        <h3 class="heading--underline--orange">MIT Press CogNet Responsive Redesign</h3>
        <div class="rental-block__tags">
          <p>Drupal </p><p></p>
          <p>Responsive Design </p><p></p>
          <p>UX </p><p></p>
          <p>Javascript </p>
        </div>
      </a>
    </div>
  </div>
</div>

Rental tiles

<div class="region--rental-tiles region--full-width">
  <div class="region--rental-tiles__wrapper region--full-width__wrapper">
    <div class="tile--title--rental bg-magenta">
      <div class="tile--title--rental__text">
        <h2 class="c-eggshell h1">Listings</h2>
        <p class="c-eggshell">
          Japan's capital city serves as a luminary for thoughtful design, high-energy nightlife, natural beauty, and big business savvy.
        </p>
      </div>
      <div class="tile--title--rental__link">
        <a href="/work" class="button--arrow--white-magenta">View all work</a>
      </div>
    </div>
    <div class="region--rental-tiles__tiles">
      <div class="tile--rental tile">
        <a href="https://www.airbnb.com/rooms/11742309" class="tile--rental__link" target="_blank">
          <div class="tile--rental__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/tokyo-treasures/tokyo-treasures-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Tokyo Treasures</h3>
          </div>
          <div class="tile--rental__hover tile__hover bg-orange">
            <p>This newly renovated condo has a modern feel, while paying homage to its Japanese roots.  Shibuya is renowned for its youth fashion culture and nightlife, but also plays host to cozy Japanese gastropubs (izakayas), the largest pedestrian crosswalk in the world, historical shrines, and Tokyo's lively Yoyogi Park.</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
      <div class="tile--rental tile">
<!--        <a href="/listings/rentals/tokyo-listing1/" class="tile--rental__link"> -->
    <a href="/services/" class="tile--rental__link">
          <div class="tile--rental__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/tokyo-listing1/tokyo-listing1-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Your property here!</h3>
          </div>
          <div class="tile--rental__hover tile__hover bg-orange">
            <p>List your property here, and earn more from your space!</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
      <div class="tile--rental tile">
        <a href="/services/" class="tile--rental__link">
          <div class="tile--rental__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/tokyo-listing2/tokyo-listing2-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Your space here!</h3>
          </div>
          <div class="tile--rental__hover tile__hover bg-orange">
            <p></p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Sale blocks

The following example outputs 3 sale blocks with a CTA link.

<div class="region--sale-blocks region">
  <h2 class="heading--underline--orange region--sale-blocks__title">Sales</h2>
  <div class="region--sale-blocks__sales">
    <div class="sale-block">
<!--      <a class="sale-block__link" href="/listings/sales/tokyo-treasures/"> -->
      <a class="sale-block__link" href="https://www.airbnb.com/rooms/11742309" target="_blank">
        <div class="sale-block__image" style="background-image: url(/assets/img/work/logos/airbnb-logo-eggshell.png);">
          <img src="/assets/img/work/tokyo-treasures/airbnb-block.jpg" alt="Tokyo Treasures">
        </div>
        <h3 class="heading--underline--orange">Tokyo Treasures</h3>
        <div class="sale-block__tags">
          <p>Hachikō Statue</p><p></p>
          <p>Scramble Crossing </p><p></p>
          <p>Shibuya Station </p><p></p>
          <p>Youth Capital of Tokyo </p>
        </div>
      </a>
    </div>
    <div class="sale-block">
<!--      <a class="sale-block__link" href="/listings/sales/tokyo-listing1/"> -->
      <a class="sale-block__link" href="">
        <div class="sale-block__image" style="background-image: url(/assets/img/work/logos/airbnb-logo-eggshell.png);">
          <img src="/assets/img/work/tokyo-listing1/tokyo-listing1-block.jpg" alt="">
        </div>
        <h3 class="heading--underline--orange">Your property here!</h3>
        <div class="sale-block__tags">
          <p>Drupal 8 </p><p></p>
          <p>Responsive Design </p><p></p>
          <p>UX </p><p></p>
          <p>Client Server Integration </p>
        </div>
      </a>
    </div>
    <div class="sale-block">
      <a class="sale-block__link" href="/listings/sales/tokyo-listing2/">
        <div class="sale-block__image" style="background-image: url(/assets/img/work/logos/homeaway-logo-eggshell.png);">
          <img src="/assets/img/work/tokyo-listing2/tokyo-listing2-block.jpg" alt="Your space here!">
        </div>
        <h3 class="heading--underline--orange">Your space here!</h3>
        <div class="sale-block__tags">
          <p>Drupal 8 </p><p></p>
          <p>Responsive Design </p><p></p>
          <p>UX </p><p></p>
          <p>Web Mapping </p>
        </div>
      </a>
    </div>
    <div class="region--sale-blocks__cta flex-center">
      <a href="/listings/sales" class="button--arrow--orange">View all sales</a>
    </div>
  </div>
</div>

Small sale blocks

For smaller sale blocks.

<div class="region--sale-blocks region--sale-blocks--small region">
  <div class="region--sale-blocks__sales">
    <div class="sale-block">
      <a class="sale-block__link" href="/listings/sales/mitpress-allbooks/">
        <div class="sale-block__image" style="background-image: url(/assets/img/work/logos/mitpress-logo-eggshell.png);">
          <img src="/assets/img/work/mitpress-allbooks/mitpress-allbooks-block.jpg" alt="MIT Press AllBooks Importer">
        </div>
        <h3 class="heading--underline--orange">MIT Press AllBooks Importer</h3>
        <div class="sale-block__tags">
          <p>Drupal </p><p></p>
          <p>Module Development </p><p></p>
          <p>PHP </p><p></p>
          <p>Testing </p>
        </div>
      </a>
    </div>
    <div class="sale-block">
      <a class="sale-block__link" href="/listings/sales/transaction-advisors/">
        <div class="sale-block__image" style="background-image: url(/assets/img/work/logos/transaction-advisors-logo-eggshell.png);">
          <img src="/assets/img/work/transaction-advisors/transaction-advisors-block.jpg" alt="Transaction Advisors Multisite Development">
        </div>
        <h3 class="heading--underline--orange">Transaction Advisors Multisite Development</h3>
        <div class="sale-block__tags">
          <p>Drupal </p> <p></p>
          <p>Multisite </p><p></p>
          <p>Payment Processing </p><p></p>
          <p>Responsive Design </p>
        </div>
      </a>
    </div>
    <div class="sale-block">
      <a class="sale-block__link" href="/listings/sales/mitpress-cognet/">
        <div class="sale-block__image" style="background-image: url(/assets/img/work/logos/cognet-logo-eggshell.png);">
          <img src="/assets/img/work/mitpress-cognet/mitpress-cognet-block.jpg" alt="MIT Press CogNet Responsive Redesign">
        </div>
        <h3 class="heading--underline--orange">MIT Press CogNet Responsive Redesign</h3>
        <div class="sale-block__tags">
          <p>Drupal </p><p></p>
          <p>Responsive Design </p><p></p>
          <p>UX </p><p></p>
          <p>Javascript </p>
        </div>
      </a>
    </div>
  </div>
</div>

Sale tiles

<div class="region--sale-tiles region--full-width">
  <div class="region--sale-tiles__wrapper region--full-width__wrapper">
    <div class="tile--title--sale bg-magenta">
      <div class="tile--title--sale__text">
        <h2 class="c-eggshell h1">Listings</h2>
        <p class="c-eggshell">
          Japan's capital city serves as a luminary for thoughtful design, high-energy nightlife, natural beauty, and big business savvy.
        </p>
      </div>
      <div class="tile--title--sale__link">
        <a href="/work" class="button--arrow--white-magenta">View all work</a>
      </div>
    </div>
    <div class="region--sale-tiles__tiles">
      <div class="tile--sale tile">
        <a href="https://www.airbnb.com/rooms/11742309" class="tile--sale__link" target="_blank">
          <div class="tile--sale__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/tokyo-treasures/tokyo-treasures-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Tokyo Treasures</h3>
          </div>
          <div class="tile--sale__hover tile__hover bg-orange">
            <p>This newly renovated condo has a modern feel, while paying homage to its Japanese roots.  Shibuya is renowned for its youth fashion culture and nightlife, but also plays host to cozy Japanese gastropubs (izakayas), the largest pedestrian crosswalk in the world, historical shrines, and Tokyo's lively Yoyogi Park.</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
      <div class="tile--sale tile">
<!--        <a href="/listings/sales/tokyo-listing1/" class="tile--sale__link"> -->
    <a href="/services/" class="tile--sale__link">
          <div class="tile--sale__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/tokyo-listing1/tokyo-listing1-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Your property here!</h3>
          </div>
          <div class="tile--sale__hover tile__hover bg-orange">
            <p>List your property here, and earn more from your space!</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
      <div class="tile--sale tile">
        <a href="/services/" class="tile--sale__link">
          <div class="tile--sale__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/tokyo-listing2/tokyo-listing2-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Your space here!</h3>
          </div>
          <div class="tile--sale__hover tile__hover bg-orange">
            <p></p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Service icons

<div class="region--service-icons region">
  <div class="icon--service">
    <a href="/services/booking/" class="icon--service__link">
      <div class="icon--service__image">
        <img src="/assets/img/icons-and-logos/calendar-icon.svg" alt="Flexible Booking">
      </div>
      <p class="icon--service__title">Flexible Booking</p>
    </a>
  </div>
    <div class="icon--service">
    <a href="/services/housekeeping/" class="icon--service__link">
      <div class="icon--service__image">
        <img src="/assets/img/icons-and-logos/housekeeping-icon.svg" alt="Housekeeping">
      </div>
      <p class="icon--service__title">Housekeeping</p>
    </a>
  </div>
    <div class="icon--service">
    <a href="/services/design-ux/" class="icon--service__link">
      <div class="icon--service__image">
        <img src="/assets/img/icons-and-logos/design-ux-icon.svg" alt="Design / UX">
      </div>
      <p class="icon--service__title">Design / UX</p>
    </a>
  </div>
    <div class="icon--service">
    <a href="/services/support/" class="icon--service__link">
      <div class="icon--service__image">
        <img src="/assets/img/icons-and-logos/support-maintenance-icon.svg" alt="Support / Maintenance">
      </div>
      <p class="icon--service__title">Support / Maintenance</p>
    </a>
  </div>
</div>

Service tiles

<div class="region--service-tiles region--full-width">
  <div class="tile--service">
    <a href="/services/booking/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/calendar-icon.svg" alt="Strategy / Consulting">
        <div class="tile--service__content__text">
          <h2 class="tile--service__title heading--sans-serif">Strategy / Consulting</h2>
          <p class="tile--service__summary">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
          <p class="tile--service__cta link--arrow paragraph--loud">Learn more</p>
        </div>
      </div>
    </a>
  </div>
  <div class="tile--service">
    <a href="/services/housekeeping/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/housekeeping-icon.svg" alt="Housekeeping">
        <div class="tile--service__content__text">
          <h2 class="tile--service__title heading--sans-serif">Housekeeping</h2>
          <p class="tile--service__summary">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
          <p class="tile--service__cta link--arrow paragraph--loud">Learn more</p>
        </div>
      </div>
    </a>
  </div>
  <div class="tile--service">
    <a href="/services/smarthome/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/smarthome-icon.svg" alt="Smart Home Technology">
        <div class="tile--service__content__text">
          <h2 class="tile--service__title heading--sans-serif">Smart Home Technology</h2>
          <p class="tile--service__summary">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
          <p class="tile--service__cta link--arrow paragraph--loud">Learn more</p>
        </div>
      </div>
    </a>
  </div>
  <div class="tile--service">
    <a href="/services/support/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/support-maintenance-icon.svg" alt="Support / Maintenance">
        <div class="tile--service__content__text">
          <h2 class="tile--service__title heading--sans-serif">Support / Maintenance</h2>
          <p class="tile--service__summary">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
          <p class="tile--service__cta link--arrow paragraph--loud">Learn more</p>
        </div>
      </div>
    </a>
  </div>
</div>

Team member list

Note that the team member bio component template uses the Jekyll Picture Tag plugin to create a <picture> element for the team member photo.

<div class="region--team-member-list region">
  <div class="region--team-member-list__wrapper">
    <h2 class="heading--underline--magenta">Team</h2>
    <div class="region--team-member-list__list">
      <div class="team-member-bio">
        <a class="team-member-bio__link" href="/company/eric/">
          <div class="team-member-bio__image">
            <img src="/assets/img/team/eric/eric-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Eric">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Eric</h3>
          <p class="team-member-bio__title">Front End Developer</p>
          <p class="team-member-bio__description">Eric is a developer at Tokyo Furnished Rentals, focused on front-end technologies and user experience.</p>
        </a>
      </div>
      <div class="team-member-bio">
        <a class="team-member-bio__link" href="/company/chris/">
          <div class="team-member-bio__image">
            <img src="/assets/img/team/chris/chris-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Chris">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Chris</h3>
          <p class="team-member-bio__title">Principal Director</p>
          <p class="team-member-bio__description">Chris does his best to ensure that his team is learning and growing and that our clients feel like partners.</p>
        </a>
      </div>
    </div>
  </div>
</div>

Text block list

<div class="region--text-block-list">
  <div class="text-block-list-item">
    <a href="https://www.drupal.org/project/rebuild" class="text-block-list-item__link">
      <div class="text-block-list-item__content">
        <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">Drush Rebuild</h3>
        <p class="text-block-list-item__text">Drush Rebuild is a utility for rebuilding your local development environments.</p>
        <p class="link--arrow">Learn More</p>
      </div>
    </a>
  </div>
  <div class="text-block-list-item">
    <a href="https://www.drupal.org/project/tournament" class="text-block-list-item__link">
      <div class="text-block-list-item__content">
        <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">Tournament</h3>
        <p class="text-block-list-item__text">This module provides a full tournament management system for Drupal.</p>
        <p class="link--arrow">Learn More</p>
      </div>
    </a>
  </div>
  <div class="text-block-list-item">
    <a href="https://www.drupal.org/project/salesforce" class="text-block-list-item__link">
      <div class="text-block-list-item__content">
        <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">Salesforce Suite</h3>
        <p class="text-block-list-item__text">This suite of modules supports integration with Salesforce by synchronizing Drupal entities with Salesforce objects.</p>
        <p class="link--arrow">Learn More</p>
      </div>
    </a>
  </div>
  <div class="text-block-list-item">
    <a href="https://www.drupal.org/sandbox/kostajh/1978148" class="text-block-list-item__link">
      <div class="text-block-list-item__content">
        <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">SubDrush</h3>
        <p class="text-block-list-item__text">Drush integration for Sublime Text 3.</p>
        <p class="link--arrow">Learn More</p>
      </div>
    </a>
  </div>
  <div class="text-block-list-item">
    <a href="https://www.drupal.org/sandbox/kostajh/1965494" class="text-block-list-item__link">
      <div class="text-block-list-item__content">
        <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">Drush Code Deploy</h3>
        <p class="text-block-list-item__text">Drush Code Deploy provides a set of commands for deploying code changes via Git to a remote environment.</p>
        <p class="link--arrow">Learn More</p>
      </div>
    </a>
  </div>
  <div class="text-block-list-item">
    <a href="https://www.drupal.org/project/drupal_up" class="text-block-list-item__link">
      <div class="text-block-list-item__content">
        <h3 class="text-block-list-item__heading heading--bold heading--sans-serif h4">Drupal Up</h3>
        <p class="text-block-list-item__text">Drupal-up is a Drush extension that facilitates building virtual machines for local development of Drupal sites</p>
        <p class="link--arrow">Learn More</p>
      </div>
    </a>
  </div>
</div>