gExgKN

gexgkn.markdown

gExgKN

A Pen by Janson on CodePen.

License.

index.html

<aside class="Contacts">
  <header class="Contacts-summary">
    <h1 class="Contacts-results">4 People<button type="button"><i class="fas fa-file-download"></i>Export</button></h1>
    <div class="Contacts-actions">
      <button type="button"><i class="fas fa-sort-alpha-up"></i>Last Name</button>
      <a href="#" title="List View"><i class="fas fa-list-ul"></i></a>
      <a href="#" title="Data View"><i class="fas fa-chart-bar"></i></a>
      <a href="#" title="Map View"><i class="fas fa-map"></i></a>
    </div>
  </header>
  <ol class="Contacts-list">

    <li class="vcard Contacts-item Contact js-contact" data-key="315">
      
      <div class="Contact-info">
        <abbr class="Contact-status" title="Jake Caputo">JC</abbr>
      
        <div class="Contact-summary">
          <h2 class="fn Contact-fullName">Jake Caputo</h2>
          <p class="Contact-location">Redondo Beach, CA</p>
        </div>

        <div class="Contact-quickActions">
          <a class="Contact-action" href="mailto:" title="Email Jake"><i class="fas fa-envelope"></i></a>
          <a class="Contact-action" href="tel:" title="Call Jake"><i class="fas fa-phone"></i></a>
          <a class="Contact-action" href="#" title="Messege Jake"><i class="fas fa-comment-alt"></i></a>
          <a class="Contact-action" href="#" title="Map Jake"><i class="fas fa-map-marker-alt"></i></a>
          <button class="Contact-toggleDetails js-toggle" data-ref="315" type="button" title="Toggle Details"><i class="fas fa-chevron-down"></i></button>
        </div>
      </div>
      
      <div class="Contact-details js-details">
        <dl class="Contact-fullDetails">
          <dt><i class="fas fa-envelope"></i></dt>
          <dd><a class="email" href="mailto:" title="Email Jake">jake.caputo@gmail.com</a></dd>
          <dt><i class="fas fa-phone"></i></dt>
          <dd><a class="tel" href="tel:" title="Call Jake">555.867.5309</a></dd>
          <dt><i class="fas fa-map-marker-alt"></i></dt>
          <dd>
            <div class="adr">
              <div class="street-address">269 Forest Hills St</div>
              <span class="extended-address">#3</span>
              <span class="locality">Jamaica Plain</span>
              <abbr class="region" title="Massachusetts">MA</abbr>
              <span class="postal-code">02130</span>
            </div>
          </dd>
        </dl>
      </div>
      
    </li>
    <li class="vcard Contacts-item Contact js-contact" data-key="515">
      
      <div class="Contact-info">
        <abbr class="Contact-status" title="Martha Grant">MG</abbr>
      
        <div class="Contact-summary">
          <h2 class="fn Contact-fullName">Martha Grant</h2>
          <p class="Contact-location">Henderson, TX</p>
        </div>

        <div class="Contact-quickActions">
          <a class="Contact-action" href="mailto:" title="Email Martha"><i class="fas fa-envelope"></i></a>
          <a class="Contact-action" href="tel:" title="Call Martha"><i class="fas fa-phone"></i></a>
          <a class="Contact-action" href="#" title="Messege Martha"><i class="fas fa-comment-alt"></i></a>
          <a class="Contact-action" href="#" title="Map Martha"><i class="fas fa-map-marker-alt"></i></a>
          <button class="Contact-toggleDetails js-toggle" data-ref="515" type="button" title="Toggle Details"><i class="fas fa-chevron-down"></i></button>
        </div>
      </div>
      
      <div class="Contact-details js-details">
        <dl class="Contact-fullDetails">
          <dt><i class="fas fa-envelope"></i></dt>
          <dd><a class="email" href="mailto:" title="Email Martha">martha.311@gmail.com</a></dd>
          <dt><i class="fas fa-phone"></i></dt>
          <dd><a class="tel" href="tel:" title="Call Martha">555.867.5309</a></dd>
          <dt><i class="fas fa-map-marker-alt"></i></dt>
          <dd>
            <div class="adr">
              <div class="street-address">269 Forest Hills St</div>
              <span class="extended-address">#3</span>
              <span class="locality">Jamaica Plain</span>
              <abbr class="region" title="Massachusetts">MA</abbr>
              <span class="postal-code">02130</span>
            </div>
          </dd>
        </dl>
      </div>
      
    </li>
    <li class="vcard Contacts-item Contact js-contact" data-key="99">
      
      <div class="Contact-info">
        <abbr class="Contact-status" title="Barbara Glaser">BG</abbr>
      
        <div class="Contact-summary">
          <h2 class="fn Contact-fullName">Barbara Glaser</h2>
        </div>

        <div class="Contact-quickActions">
          <a class="Contact-action" href="mailto:" title="Email Barbara"><i class="fas fa-envelope"></i></a>
          <a class="Contact-action" href="tel:" title="Call Barbara"><i class="fas fa-phone"></i></a>
          <a class="Contact-action" href="#" title="Messege Barbara"><i class="fas fa-comment-alt"></i></a>
          <a class="Contact-action" href="#" title="Map Barbara"><i class="fas fa-map-marker-alt"></i></a>
          <button class="Contact-toggleDetails js-toggle" data-ref="99" type="button" title="Toggle Details"><i class="fas fa-chevron-down"></i></button>
        </div>
      </div>
      
      <div class="Contact-details js-details">
        <dl class="Contact-fullDetails">
          <dt><i class="fas fa-envelope"></i></dt>
          <dd><a class="email" href="mailto:" title="Email Barbara">barbara@gmail.com</a></dd>
          <dt><i class="fas fa-phone"></i></dt>
          <dd><a class="tel" href="tel:" title="Call Barbara">555.867.5309</a></dd>
          <dt><i class="fas fa-map-marker-alt"></i></dt>
          <dd>
            <div class="adr">
              <div class="street-address">269 Forest Hills St</div>
              <span class="extended-address">#3</span>
              <span class="locality">Jamaica Plain</span>
              <abbr class="region" title="Massachusetts">MA</abbr>
              <span class="postal-code">02130</span>
            </div>
          </dd>
        </dl>
      </div>
      
    </li>
    <li class="vcard Contacts-item Contact js-contact" data-key="13">
      
      <div class="Contact-info">
        <abbr class="Contact-status is-active" title="Anjuli Cameron">AC</abbr>
      
        <div class="Contact-summary">
          <h2 class="fn Contact-fullName">Anjuli Cameron</h2>
          <p class="Contact-location">Washington, DC</p>
        </div>

        <div class="Contact-quickActions">
          <a class="Contact-action" href="mailto:" title="Email Anjuli"><i class="fas fa-envelope"></i></a>
          <a class="Contact-action" href="tel:" title="Call Anjuli"><i class="fas fa-phone"></i></a>
          <a class="Contact-action" href="#" title="Messege Anjuli"><i class="fas fa-comment-alt"></i></a>
          <a class="Contact-action" href="#" title="Map Anjuli"><i class="fas fa-map-marker-alt"></i></a>
          <button class="Contact-toggleDetails js-toggle" data-ref="13" type="button" title="Toggle Details"><i class="fas fa-chevron-down"></i></button>
        </div>
      </div>
      
      <div class="Contact-details js-details">
        <dl class="Contact-fullDetails">
          <dt><i class="fas fa-envelope"></i></dt>
          <dd><a class="email" href="mailto:" title="Email Anjuli">anjuli@gmail.com</a></dd>
          <dt><i class="fas fa-phone"></i></dt>
          <dd><a class="tel" href="tel:" title="Call Anjuli">555.867.5309</a></dd>
          <dt><i class="fas fa-map-marker-alt"></i></dt>
          <dd>
            <div class="adr">
              <div class="street-address">269 Forest Hills St</div>
              <span class="extended-address">#3</span>
              <span class="locality">Jamaica Plain</span>
              <abbr class="region" title="Massachusetts">MA</abbr>
              <span class="postal-code">02130</span>
            </div>
          </dd>
        </dl>
      </div>
      
    </li>
    
  </ol>
</aside>

script.js

const toggles = Array.from(document.querySelectorAll(".js-toggle"));
toggles.forEach(toggle =>
  toggle.addEventListener("click", function(e) {
    const deets = e.target.dataset["ref"];
    document
      .querySelector(`.js-contact[data-key="${deets}"] .js-details`)
      .classList.toggle("is-active");
  })
);

style.scss

/**
 * A/B Test (1)
 * 
 * @author Janson Hartliep <janson.hartliep@gmail.com>
 * @copyright 2019 All Rights Reserved
 *
 **/

// Defaults, assuming ancestory context
html {
  font-size: 100%;
}
body {
  font: 1rem normal proxima-nova, sans-serif;
}

// Component styles, following React+SUIT naming convention & formatting

.Contacts {
  color: #202533;
  background-color: #ebeef5;
  padding: 1.21875em;
  min-width: 25rem;
  max-width: 58.75rem;
  margin: 0 auto;

  &-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-list {
    list-style: none;
    border: 1px solid #dde0eb;
    border-radius: 3px;
    background: #fff;
    padding: 0;
    margin: 0;
  }
  &-item {
    border-top: 1px solid #dde0eb;
    &:first-of-type {
      border-top: none;
    }
  }
}

.Contact {
  padding: 0.65625rem 0.8125rem;
  &-info {
    display: flex;
    align-items: center;
  }
  &-status {
    border: 1px solid #dde0eb;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0.875rem;
    text-align: center;
    color: #83899c;
    padding: 15px 13px 14px;
    margin-right: 1em;
  }

  &-fullName {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
  }
  &-location {
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    color: #4a5061;
    padding: 0;
    margin: 0.5em 0 0;
  }
  &-quickActions {
    margin-left: auto;
  }

  &-details {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out, opacity 0.3s 0.1s;
    opacity: 0.5;

    &.is-active {
      max-height: 10rem;
      opacity: 1;
    }
  }
  &-fullDetails {
    margin: 1rem 2rem 0;
    padding: 1rem 0 0;
    border-top: 1px solid transparentize(#dde0eb, 0.5);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />