Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="unity-margin-x-auto unity-padding-y-4" style="max-width: 720px;">
  <div class="unity-shadow unity-fill-white">
    <div class="unity-padding-3">
      <h2 class="unity-text-xl unity-light">
         Select a View
      </h2>
    </div>
    
    <div class="unity-border-bottom unity-display-flex">
      <ul class="unity-menu unity-caps unity-bold unity-text-gray">
        <li class="unity-menu-horizontal-active unity-text-teal"><a href="" class="unity-button unity-text-small unity-padding-x-5">All</a></li>
        <li><a href="" class="unity-button unity-text-small">Favorites</a></li>
      </ul>
      <span class="unity-margin-right-auto"></span>
      <form class="unity-width-25">
  <label class="unity-search">
    <span class="unity-sr-only">Search People</span>
    <svg aria-hidden="true" class="unity-icon unity-icon-search unity-icon-large">
      <use xlink:href="#unity_icon_search"/>
    </svg>
    <input type="search" class="unity-search-control unity-fill-brighten-80 unity-width-100" placeholder="Search">
  </label>
</form>
      
    </div>
    
    <div class="unity-display-flex expand-on-hover" style="max-height: 320px;">
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Clients</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Really long Client Name that extends</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate unity-fill-shade-05 unity-dropdown-toggle-right" type="button">ACME Inc.</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li>
              <button class="unity-button unity-width-100" type="button">Tier</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Divisions</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate unity-fill-shade-05 unity-dropdown-toggle-right" type="button">Northeast Division</button>
            </li>
            
          </ul>
        </div>
      </div>
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Organizations</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Really long Tier Name that extends</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate unity-fill-shade-05 unity-dropdown-toggle-right" type="button">ACME Organization</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Tier</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="unity-border-right unity-display-flex unity-flex-column unity-min-width-0 unity-transition-all">
        <h3 class="unity-regular unity-text-small unity-caps unity-text-gray unity-padding-x-3 unity-padding-top-3 unity-padding-bottom-2 unity-border-bottom unity-flex-shrink-0">Views</h3>
        <div class="unity-overflow-scroll">
          <ul class="unity-menu unity-flex-column">
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Location Name</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Service Line Name</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Orthopedics</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Primary Care</button>
            </li>
            <li class="unity-display-flex">
              <button class="unity-button unity-display-block unity-width-100 unity-truncate" type="button">Really long Location Name that extends</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  
  </div>
  <p class="unity-margin-top-2 unity-text-small unity-text-gray">Copyright © 2006-2018</p>
</div>


<div class="unity-margin-x-auto unity-padding-y-4" style="max-width: 720px;">
  <div class="unity-shadow unity-fill-white">
    <div class="unity-padding-3">
      <h2 class="unity-text-xl unity-light">
         Select a View
      </h2>
    </div>
    
    <div class="unity-border-bottom unity-display-flex">
      <ul class="unity-menu unity-caps unity-bold unity-text-gray">
        <li><a href="" class="unity-button unity-text-small unity-padding-x-5">All</a></li>
        <li class="unity-menu-horizontal-active unity-text-teal"><a href="" class="unity-button unity-text-small">Favorites</a></li>
      </ul>
      <span class="unity-margin-right-auto"></span>
      <form class="unity-width-25">
  <label class="unity-search">
    <span class="unity-sr-only">Search People</span>
    <svg aria-hidden="true" class="unity-icon unity-icon-search unity-icon-large">
      <use xlink:href="#unity_icon_search"/>
    </svg>
    <input type="search" class="unity-search-control unity-fill-brighten-80 unity-width-100" placeholder="Search">
  </label>
</form>
      
    </div>
    
    <div class="unity-overflow-auto" style="max-height: 320px;">
      <a href="" class="unity-button unity-border-bottom unity-display-block unity-padding-top-4 unity-padding-bottom-4 unity-padding-x-5">
        
        <div class="unity-display-flex unity-flex-align-center">
          <div class="unity-flex-grow-1">
            <h3 class="unity-text-large unity-regular unity-text-blue">Orthopedics</h3>
            ACME Organization
          </div>
          <div class="unity-flex-grow-1">
            ACME Inc. - Northeast
          </div>
          <div class="unity-flex-shrink-0">
            <button type="button" class="unity-button unity-hover-fill-transparent unity-padding-0 unity-text-large star">
              &#x2606;
            </button>
          </div>
        </div>
      </a>
      
      <a href="" class="unity-button unity-border-bottom unity-display-block unity-padding-top-4 unity-padding-bottom-4 unity-padding-x-5">
        
        <div class="unity-display-flex unity-flex-align-center">
          <div class="unity-flex-grow-1">
            <h3 class="unity-text-large unity-regular unity-text-blue">Primary Care</h3>
            ACME Organization
          </div>
          <div class="unity-flex-grow-1">
            ACME Inc. - Northeast
          </div>
          <div class="unity-flex-shrink-0">
            <button type="button" class="unity-button unity-hover-fill-transparent unity-padding-0 unity-text-large star">
              &#x2605;
            </button>
          </div>
        </div>
      </a>
      
    </div>
  
  </div>
  <p class="unity-margin-top-2 unity-text-small unity-text-gray">Copyright © 2006-2018</p>
</div>



<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <symbol id="unity_icon_butterfly" viewbox="0 0 23 28">
    <path d="M12.445 9.275v12.382l10.483 6.265V15.54l-2.633-1.555 2.633-1.602V0L12.445 6.264M0 12.383l2.633 1.602L0 15.54V27.92l10.483-6.264V6.265L0 0"/>
  </symbol>
  <symbol id="unity_icon_search" viewbox="0 0 34 34">
    <path d="M25.387 23.533l-3.1-3.21c.854-1.287 1.357-2.85 1.357-4.527 0-2.206-.868-4.217-2.265-5.66-1.395-1.447-3.338-2.347-5.468-2.346-2.13 0-4.073.9-5.467 2.345-1.397 1.444-2.266 3.455-2.265 5.66 0 2.207.868 4.218 2.265 5.66 1.394 1.448 3.337 2.347 5.467 2.346 1.548.002 2.996-.475 4.208-1.29l3.127 3.238c.59.612 1.55.612 2.14 0 .59-.61.59-1.603 0-2.215zm-12.79-4.158c-.834-.908-1.347-2.145-1.347-3.527 0-1.383.513-2.62 1.348-3.527.838-.905 1.98-1.46 3.256-1.46 1.276 0 2.418.555 3.256 1.46.835.908 1.348 2.145 1.348 3.528 0 1.382-.513 2.62-1.348 3.527-.838.905-1.98 1.46-3.256 1.46-1.276 0-2.418-.555-3.256-1.46z"/>
  </symbol>
  <symbol id="unity_icon_notification" viewbox="0 0 34 34">
    <path d="M17.1 26.184c1.283-.027 2.545-.89 2.53-1.75h-5.25c.043.92 1.36 1.778 2.72 1.75zM25.728 22.812c-1.14-.88-1.82-2.033-2.1-3.425-.224-1.13-.293-2.276-.3-3.425-.003-.903-.065-1.803-.295-2.682-.452-1.727-1.408-3.074-3.11-3.813-.538-.233-1.12-.365-1.697-.548-.083-.652-.49-1.065-1.118-1.106-.712-.045-1.118.308-1.34 1.165-.096.02-.194.04-.292.058-2.085.417-3.53 1.574-4.276 3.538-.406 1.07-.517 2.18-.522 3.31-.004 1.114-.06 2.226-.263 3.327-.253 1.376-.847 2.575-1.98 3.47-.344.273-.68.508-1.055.877h19.25c-.324-.295-.607-.52-.902-.748z"/>
  </symbol>
</svg>
              
            
!

CSS

              
                @import 'https://unity-styles.netlify.com/styles/unity.min.css';

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';


.expand-on-hover > * {
  &:hover {
    flex-shrink: 0!important;
  }
}


.star {
  font-size: 1.5rem !important;
}
              
            
!

JS

              
                
              
            
!
999px

Console