Regions

Banner

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

Team members working together

We're hiring!

The needs at Savas Labs 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 Savas Labs 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>

Case study blocks

The following example outputs 3 case study blocks with a CTA link.

<div class="region--case-study-blocks region">
  <h2 class="heading--underline--orange region--case-study-blocks__title">Case Studies</h2>
  <div class="region--case-study-blocks__case-studies">
    <div class="case-study-block">
      <a class="case-study-block__link" href="/results/case-studies/duke-today/">
        <div class="case-study-block__image" style="background-image: url(/assets/img/work/logos/duke-today-logo-eggshell.png);">
          <img src="/assets/img/work/duke-today/duke-today-block.jpg" alt="Duke Today Redesign">
        </div>
        <h3 class="heading--underline--orange">Duke Today Redesign</h3>
        <div class="case-study-block__tags">
          <p>Drupal </p><p></p>
          <p>Content Migration </p><p></p>
          <p>UX </p><p></p>
          <p>Docker </p>
        </div>
      </a>
    </div>
    <div class="case-study-block">
      <a class="case-study-block__link" href="/results/case-studies/hptn/">
        <div class="case-study-block__image" style="background-image: url(/assets/img/work/logos/hptn-logo-eggshell.png);">
          <img src="/assets/img/work/hptn/hptn-block.jpg" alt="HIV Prevention Trials Network (HPTN) Site Redesign">
        </div>
        <h3 class="heading--underline--orange">HIV Prevention Trials Network (HPTN) Site Redesign</h3>
        <div class="case-study-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="case-study-block">
      <a class="case-study-block__link" href="/results/case-studies/pmp-civil-rights-map/">
        <div class="case-study-block__image" style="background-image: url(/assets/img/work/logos/pmp-logo-eggshell.png);">
          <img src="/assets/img/work/pmp-civil-rights-map/pmp-civil-rights-map-block.jpg" alt="Durham Civil and Human Rights History Map">
        </div>
        <h3 class="heading--underline--orange">Durham Civil and Human Rights History Map</h3>
        <div class="case-study-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--case-study-blocks__cta flex-center">
      <a href="/results/case-studies" class="button--arrow--orange">View all case studies</a>
    </div>
  </div>
</div>

Small case study blocks

For smaller case study blocks.

<div class="region--case-study-blocks region--case-study-blocks--small region">
  <div class="region--case-study-blocks__case-studies">
    <div class="case-study-block">
      <a class="case-study-block__link" href="/results/case-studies/mitpress-allbooks/">
        <div class="case-study-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="case-study-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="case-study-block">
      <a class="case-study-block__link" href="/results/case-studies/transaction-advisors/">
        <div class="case-study-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="case-study-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="case-study-block">
      <a class="case-study-block__link" href="/results/case-studies/mitpress-cognet/">
        <div class="case-study-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="case-study-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>

Case study tiles

<div class="region--case-study-tiles region--full-width">
  <div class="region--case-study-tiles__wrapper region--full-width__wrapper">
    <div class="tile--title--case-study bg-magenta">
      <div class="tile--title--case-study__text">
        <h2 class="c-eggshell h1">Results</h2>
        <p class="c-eggshell">
          Solving your digital dilemmas &amp; integrating for growth
        </p>
      </div>
      <div class="tile--title--case-study__link">
        <a href="/work" class="button--arrow--white-magenta">View all work</a>
      </div>
    </div>
    <div class="region--case-study-tiles__tiles">
      <div class="tile--case-study tile">
        <a href="/results/case-studies/duke-today/" class="tile--case-study__link">
          <div class="tile--case-study__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/duke-today/duke-today-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Duke Today Redesign</h3>
          </div>
          <div class="tile--case-study__hover tile__hover bg-orange">
            <p>After multiple organizational transitions left Duke’s flagship news outlet’s redesign incomplete, partner Cuberis entrusted Savas Labs to audit the work, implement new functionality, and execute a complex content migration in just 4 months.</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
      <div class="tile--case-study tile">
        <a href="/results/case-studies/hptn/" class="tile--case-study__link">
          <div class="tile--case-study__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/hptn/hptn-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">HIV Prevention Trials Network (HPTN) Site Redesign</h3>
          </div>
          <div class="tile--case-study__hover tile__hover bg-orange">
            <p>When the HIV Prevention Trials Network aimed to update to a modern, mobile-friendly, easy-to-maintain website, Savas Labs helped them implement a new content management system that would meet their needs.</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
      <div class="tile--case-study tile">
        <a href="/results/case-studies/pmp-civil-rights-map/" class="tile--case-study__link">
          <div class="tile--case-study__content tile__content bg-dark-teal" style="background-image: url(/assets/img/work/pmp-civil-rights-map/pmp-civil-rights-map-tile.jpg);">
            <h3 class="heading--bold c-eggshell h4">Durham Civil and Human Rights History Map</h3>
          </div>
          <div class="tile--case-study__hover tile__hover bg-orange">
            <p>Savas Labs worked with the Pauli Murray Project to create a fresh responsive design to showcase the rich stories of Durham’s Civil and Human Rights history.</p>
            <p class="link--cta link--cta--inverse">Learn more</p>
          </div>
        </a>
      </div>
    </div>
  </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="Savas Labs" class="savas-logo savas-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="#">Results</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://github.com/savaslabs"><span class="fa fa-github fa-lg fa-2x"></span></a>
        <a href="https://www.drupal.org/node/2466865"><i class="fa fa-drupal fa-lg fa-2x"></i></a>
        <a href="https://twitter.com/SavasLabs"><i class="fa fa-twitter fa-lg fa-2x"></i></a>
        <a href="https://www.linkedin.com/company/savas-labs"><i class="fa fa-linkedin fa-lg fa-2x"></i></a>
      </div>
      <div class="region--footer__main__social__twitter">
        <a class="twitter-timeline"  href="https://twitter.com/SavasLabs" data-widget-id="720223236315815936">Tweets by @Savas_Labs</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      </div>
    </div>
  </div>
  <div class="region--footer__bottom">
    <div class="region--footer__bottom__wrapper">
      <p class="region--footer__bottom__copyright">
        Copyright &copy; Savas Labs 2017
      </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="Savas Labs logo" class="savas-logo savas-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="#">Results</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/savas">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>

Service icons

<div class="region--service-icons region">
  <div class="icon--service">
    <a href="/services/strategy/" class="icon--service__link">
      <div class="icon--service__image">
        <img src="/assets/img/icons-and-logos/strategy-icon.svg" alt="Strategy / Consulting">
      </div>
      <p class="icon--service__title">Strategy / Consulting</p>
    </a>
  </div>
    <div class="icon--service">
    <a href="/services/development/" class="icon--service__link">
      <div class="icon--service__image">
        <img src="/assets/img/icons-and-logos/development-icon.svg" alt="Development">
      </div>
      <p class="icon--service__title">Development</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/strategy/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/strategy-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/development/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/development-icon.svg" alt="Development">
        <div class="tile--service__content__text">
          <h2 class="tile--service__title heading--sans-serif">Development</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/design-ux/" class="tile--service__link">
      <div class="tile--service__content">
        <img class="tile--service__image" src="/assets/img/icons-and-logos/design-ux-icon.svg" alt="Design / UX">
        <div class="tile--service__content__text">
          <h2 class="tile--service__title heading--sans-serif">Design / UX</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/anne-tomasevich/">
          <div class="team-member-bio__image">
            <img src="/assets/img/team/anne/anne-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Anne Tomasevich">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Anne Tomasevich</h3>
          <p class="team-member-bio__title">Front End Developer</p>
          <p class="team-member-bio__description">Anne is a developer at Savas Labs, 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-russo/">
          <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 Russo">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Chris Russo</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 class="team-member-bio">
        <a class="team-member-bio__link" href="/company/dan-murphy/">
          <div class="team-member-bio__image">
            <img src="/assets/img/team/dan/dan-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Dan Murphy">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Dan Murphy</h3>
          <p class="team-member-bio__title">Web Developer</p>
          <p class="team-member-bio__description">Dan develops back-end solutions and front-end, responsive designs for Savas Labs clients.</p>
        </a>
      </div>
      <div class="team-member-bio">
      <a class="team-member-bio__link" href="/company/kat-nigro/">
        <div class="team-member-bio__image">
          <img src="/assets/img/team/kat/kat-square-green.jpg" class="image--team-square" itemprop="image" alt="Kat Nigro">
        </div>
        <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Kat Nigro</h3>
        <p class="team-member-bio__title">Office Administrator</p>
        <p class="team-member-bio__description">Kat is the office admin at Savas Labs. She gets stuff done.</p>
      </a>
    </div>
      <div class="team-member-bio">
        <a class="team-member-bio__link" href="/company/oksana-cyrwus/">
          <div class="team-member-bio__image">
            <img src="/assets/img/team/oksana/oksana-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Oksana Cyrwus">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Oksana Cyrwus</h3>
          <p class="team-member-bio__title">Drupal Developer</p>
          <p class="team-member-bio__description">Oksana is a Drupal Developer at Savas Labs. Her technical inputs include back-end, front-end development and site architecture.</p>
        </a>
      </div>
      <div class="team-member-bio">
        <a class="team-member-bio__link" href="/company/ro-wang/">
          <div class="team-member-bio__image">
            <img src="/assets/img/team/ro/ro-square-green.jpg" class="image--team-square-small" itemprop="image" alt="Ro Wang">
          </div>
          <h3 class="team-member-bio__name heading--bold heading--sans-serif h5 c-dark-teal">Ro Wang</h3>
          <p class="team-member-bio__title">Drupal Developer</p>
          <p class="team-member-bio__description">Ro is a junior web developer at Savas Labs filling her brain daily with myriad things the team throws at her.</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>