cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="Tiles">
  <div class="Tile js-tile">
    <div class="Tile-content Tile-content--toggle js-toggle-tile"
      role="button"
      tabindex="0"
      aria-expanded="false"
      aria-controls="edit-flyout-0">
      <div class="Card-image">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-visa.svg" alt="Visa">
      </div>
      <pre class="Card-code"><code>&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 1234</code></pre>
      <p class="Card-expiry">Expires May 2017</p>
    </div>
    <form class="Tile-flyout js-tile-flyout"
      id="edit-flyout-0" 
      aria-hidden="true">
      <div class="Tile-content">
        <div class="Grid Grid--withGutter">
          <div class="Grid-cell u-md-size1of2">
            <label>
              Card Number
              <input class="Input is-visa" type="text" value="XXXX XXXX XXXX 1234">
            </label>
            <label>
              Full Name on Card
              <input class="Input" type="text" value="John Smith">
            </label>
            <div class="Grid Grid--withGutter u-marginTop">
              <div class="Grid-cell u-size1of2">
                <label>
                  Expiration Date
                  <input class="Input" type="text" value="05 / 17" placeholder="MM / YY">
                </label>
              </div>
              <div class="Grid-cell u-size1of2">
                <label>
                  Security Code
                  <input class="Input" type="text" value="XXX">
                </label>
              </div>
            </div>
          </div>
          <div class="Grid-cell u-md-size1of2 u-marginTop u-md-no-marginTop">
            <label>
              Address Line 1
              <input class="Input" type="text" value="208 SW 1st Ave">
            </label>
            <label>
              Address Line 2
              <input class="Input" type="text" value="Ste. 240">
            </label>
            <label>
              Zip/Postal Code
              <input class="Input" type="text" value="97204">
            </label>
          </div>
        </div>
        <div class="u-textRight">
          <button class="Button js-toggle-tile" type="button">Never Mind</button>
          <button class="Button Button--primary js-toggle-tile" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content Tile-content--toggle js-toggle-tile"
      role="button"
      tabindex="0"
      aria-expanded="false"
      aria-controls="edit-flyout-1">
      <div class="Card-image">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-mastercard.svg" alt="Mastercard">
      </div>
      <pre class="Card-code"><code>&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 0000</code></pre>
      <p class="Card-expiry">Expires July 2018</p>
    </div>
    <form class="Tile-flyout js-tile-flyout"
      id="edit-flyout-1" 
      aria-hidden="true">
      <div class="Tile-content">
        <div class="Grid Grid--withGutter">
          <div class="Grid-cell u-md-size1of2">
            <label>
              Card Number
              <input class="Input is-mastercard" type="text" value="XXXX XXXX XXXX 0000">
            </label>
            <label>
              Full Name on Card
              <input class="Input" type="text" value="John Smith">
            </label>
            <div class="Grid Grid--withGutter u-marginTop">
              <div class="Grid-cell u-size1of2">
                <label>
                  Expiration Date
                  <input class="Input" type="text" value="07 / 18" placeholder="MM / YY">
                </label>
              </div>
              <div class="Grid-cell u-size1of2">
                <label>
                  Security Code
                  <input class="Input" type="text" value="XXX">
                </label>
              </div>
            </div>
          </div>
          <div class="Grid-cell u-md-size1of2 u-marginTop u-md-no-marginTop">
            <label>
              Address Line 1
              <input class="Input" type="text" value="208 SW 1st Ave">
            </label>
            <label>
              Address Line 2
              <input class="Input" type="text" value="Ste. 240">
            </label>
            <label>
              Zip/Postal Code
              <input class="Input" type="text" value="97204">
            </label>
          </div>
        </div>
        <div class="u-textRight">
          <button class="Button js-toggle-tile" type="button">Never Mind</button>
          <button class="Button Button--primary js-toggle-tile" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content Tile-content--toggle js-toggle-tile"
      role="button"
      tabindex="0"
      aria-expanded="false"
      aria-controls="edit-flyout-2">
      <div class="Card-image">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-amex.svg" alt="American Express">
      </div>
      <pre class="Card-code"><code>&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679;&#9679;&#9679; &#9679;1001</code></pre>
      <p class="Card-expiry">Expires February 2019</p>
    </div>
    <form class="Tile-flyout js-tile-flyout"
      id="edit-flyout-2" 
      aria-hidden="true">
      <div class="Tile-content">
        <div class="Grid Grid--withGutter">
          <div class="Grid-cell u-md-size1of2">
            <label>
              Card Number
              <input class="Input is-amex" type="text" value="XXXX XXXXXX X1001">
            </label>
            <label>
              Full Name on Card
              <input class="Input" type="text" value="John Smith">
            </label>
            <div class="Grid Grid--withGutter u-marginTop">
              <div class="Grid-cell u-size1of2">
                <label>
                  Expiration Date
                  <input class="Input" type="text" value="02 / 19" placeholder="MM / YY">
                </label>
              </div>
              <div class="Grid-cell u-size1of2">
                <label>
                  Security Code
                  <input class="Input" type="text" value="XXX">
                </label>
              </div>
            </div>
          </div>
          <div class="Grid-cell u-md-size1of2 u-marginTop u-md-no-marginTop">
            <label>
              Address Line 1
              <input class="Input" type="text" value="208 SW 1st Ave">
            </label>
            <label>
              Address Line 2
              <input class="Input" type="text" value="Ste. 240">
            </label>
            <label>
              Zip/Postal Code
              <input class="Input" type="text" value="97204">
            </label>
          </div>
        </div>
        <div class="u-textRight">
          <button class="Button js-toggle-tile" type="button">Never Mind</button>
          <button class="Button Button--primary js-toggle-tile" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content Tile-content--toggle js-toggle-tile"
      role="button"
      tabindex="0"
      aria-expanded="false"
      aria-controls="edit-flyout-3">
      <div class="Card-image">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-visa.svg" alt="Visa">
      </div>
      <pre class="Card-code"><code>&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 1234</code></pre>
      <p class="Card-expiry">Expires May 2017</p>
    </div>
    <form class="Tile-flyout js-tile-flyout"
      id="edit-flyout-3" 
      aria-hidden="true">
      <div class="Tile-content">
        <div class="Grid Grid--withGutter">
          <div class="Grid-cell u-md-size1of2">
            <label>
              Card Number
              <input class="Input is-visa" type="text" value="XXXX XXXX XXXX 1234">
            </label>
            <label>
              Full Name on Card
              <input class="Input" type="text" value="John Smith">
            </label>
            <div class="Grid Grid--withGutter u-marginTop">
              <div class="Grid-cell u-size1of2">
                <label>
                  Expiration Date
                  <input class="Input" type="text" value="05 / 17" placeholder="MM / YY">
                </label>
              </div>
              <div class="Grid-cell u-size1of2">
                <label>
                  Security Code
                  <input class="Input" type="text" value="XXX">
                </label>
              </div>
            </div>
          </div>
          <div class="Grid-cell u-md-size1of2 u-marginTop u-md-no-marginTop">
            <label>
              Address Line 1
              <input class="Input" type="text" value="208 SW 1st Ave">
            </label>
            <label>
              Address Line 2
              <input class="Input" type="text" value="Ste. 240">
            </label>
            <label>
              Zip/Postal Code
              <input class="Input" type="text" value="97204">
            </label>
          </div>
        </div>
        <div class="u-textRight">
          <button class="Button js-toggle-tile" type="button">Never Mind</button>
          <button class="Button Button--primary js-toggle-tile" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content Tile-content--toggle js-toggle-tile"
      role="button"
      tabindex="0"
      aria-expanded="false"
      aria-controls="edit-flyout-4">
      <div class="Card-image">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-mastercard.svg" alt="Mastercard">
      </div>
      <pre class="Card-code"><code>&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679; 0000</code></pre>
      <p class="Card-expiry">Expires July 2018</p>
    </div>
    <form class="Tile-flyout js-tile-flyout"
      id="edit-flyout-4" 
      aria-hidden="true">
      <div class="Tile-content">
        <div class="Grid Grid--withGutter">
          <div class="Grid-cell u-md-size1of2">
            <label>
              Card Number
              <input class="Input is-mastercard" type="text" value="XXXX XXXX XXXX 0000">
            </label>
            <label>
              Full Name on Card
              <input class="Input" type="text" value="John Smith">
            </label>
            <div class="Grid Grid--withGutter u-marginTop">
              <div class="Grid-cell u-size1of2">
                <label>
                  Expiration Date
                  <input class="Input" type="text" value="07 / 18" placeholder="MM / YY">
                </label>
              </div>
              <div class="Grid-cell u-size1of2">
                <label>
                  Security Code
                  <input class="Input" type="text" value="XXX">
                </label>
              </div>
            </div>
          </div>
          <div class="Grid-cell u-md-size1of2 u-marginTop u-md-no-marginTop">
            <label>
              Address Line 1
              <input class="Input" type="text" value="208 SW 1st Ave">
            </label>
            <label>
              Address Line 2
              <input class="Input" type="text" value="Ste. 240">
            </label>
            <label>
              Zip/Postal Code
              <input class="Input" type="text" value="97204">
            </label>
          </div>
        </div>
        <div class="u-textRight">
          <button class="Button js-toggle-tile" type="button">Never Mind</button>
          <button class="Button Button--primary js-toggle-tile" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content Tile-content--toggle js-toggle-tile"
      role="button"
      tabindex="0"
      aria-expanded="false"
      aria-controls="edit-flyout-5">
      <div class="Card-image">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-amex.svg" alt="American Express">
      </div>
      <pre class="Card-code"><code>&#9679;&#9679;&#9679;&#9679; &#9679;&#9679;&#9679;&#9679;&#9679;&#9679; &#9679;1001</code></pre>
      <p class="Card-expiry">Expires February 2019</p>
    </div>
    <form class="Tile-flyout js-tile-flyout"
      id="edit-flyout-5" 
      aria-hidden="true">
      <div class="Tile-content">
        <div class="Grid Grid--withGutter">
          <div class="Grid-cell u-md-size1of2">
            <label>
              Card Number
              <input class="Input is-amex" type="text" value="XXXX XXXXXX X1001">
            </label>
            <label>
              Full Name on Card
              <input class="Input" type="text" value="John Smith">
            </label>
            <div class="Grid Grid--withGutter u-marginTop">
              <div class="Grid-cell u-size1of2">
                <label>
                  Expiration Date
                  <input class="Input" type="text" value="02 / 19" placeholder="MM / YY">
                </label>
              </div>
              <div class="Grid-cell u-size1of2">
                <label>
                  Security Code
                  <input class="Input" type="text" value="XXX">
                </label>
              </div>
            </div>
          </div>
          <div class="Grid-cell u-md-size1of2 u-marginTop u-md-no-marginTop">
            <label>
              Address Line 1
              <input class="Input" type="text" value="208 SW 1st Ave">
            </label>
            <label>
              Address Line 2
              <input class="Input" type="text" value="Ste. 240">
            </label>
            <label>
              Zip/Postal Code
              <input class="Input" type="text" value="97204">
            </label>
          </div>
        </div>
        <div class="u-textRight">
          <button class="Button js-toggle-tile" type="button">Never Mind</button>
          <button class="Button Button--primary js-toggle-tile" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>
            
          
!
            
              /**
 * Variables
 */

$sm-viewport: 30em;
$md-viewport: 48em;
$lg-viewport: 64em;

$ratio: 1.5;

$line-height: $ratio;
$line-height-compact: 1.1;
$font-family: "Source Sans Pro", sans-serif;
$font-family-mono: "Source Code Pro", monospace;

$font-size-xs: (1em / $ratio);
$font-size-sm: 1em;
$font-size-md: ($font-size-sm * $ratio);
$font-size-lg: ($font-size-md * $ratio);

$space: 1rem;
$space-medium: ($space * $ratio);
$radius: 0.375rem;
$edge: 3px;

$black: #000;
$white: #fff;

$gray-darker: #222;
$gray-dark: #444;
$gray: #888;
$gray-light: #aaa;
$gray-lighter: darken(#e6e6e6, 2%);

$blue: #08c;
$blue-light: lighten($blue, 33%);

/**
 * Scaffolding
 */

* {
  margin: 0;
}

* + * {
  margin-top: $space;
}

html {
  background: $gray-dark;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  color: $gray-lighter;
  font: 1em/#{$line-height} $font-family;
  margin: 0 auto $space;
  max-width: $lg-viewport;
}

h1,
a {
  color: $white;
  font-weight: 600;
}

h1 {
  font-size: $font-size-lg;
  line-height: $line-height-compact;
  text-rendering: optimizeLegibility;
}

label {
  display: block;
}

pre,
code {
  font-family: $font-family-mono;
}

/**
 * Component: Grid
 *
 * https://github.com/suitcss/components-grid/
 */

.Grid {
  display: block;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: left; 
}

.Grid--withGutter {
  margin: 0 (-0.5 * $space);
}

.Grid--withGutter > .Grid-cell {
  padding: 0 (0.5 * $space);
}

.Grid-cell {
  box-sizing: border-box;
  display: inline-block;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

/**
 * Component: Card
 */

.Card-image {
  display: inline-block;
  position: relative;
}

.Card-image:after {
  box-shadow: inset 0 0 0 1px rgba($black, 0.2);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.Card-image img {
  display: block;
  height: 3.125em;
  width: 5em;
}

.Card-expiry {
  color: $gray-light;
  font-size: $font-size-xs;
}

/**
 * Component: Input
 */

.Input {
  background: $white;
  border: $edge solid $gray-lighter;
  border-radius: $radius;
  color: $gray-dark;
  display: block;
  font: inherit;
  padding: ($space / 2) $space;
  width: 100%;
  -webkit-appearance: none;
  
  &:hover {
    border-color: $gray-light;
  }
  
  &:focus {
    border-color: $blue;
    outline: 0;
  }
  
  &.is-visa,
  &.is-mastercard,
  &.is-amex {
    background-position: ($space * 0.75) center;
    background-repeat: no-repeat;
    padding-left: (30 / 16 * 1rem + $space * 1.5);
  }
  
  &.is-visa {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-visa.svg");
  }
  
  &.is-mastercard {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-mastercard.svg");
  }
  
  &.is-amex {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/creditcard-amex.svg");
  }
}

/**
 * Component: Button
 */

.Button {
  background: $white;
  border: $edge solid transparent;
  border-radius: $radius;
  color: $blue;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  padding: ($space / 2) $space;
  
  &:focus,
  &:hover {
    color: lighten($blue, 10%);
  }
}

.Button--primary {
  background: $blue;
  color: $white !important;

  &:focus,
  &:hover {
    background: lighten($blue, 10%);
  }
}

/**
 * Component: Tiles
 */

.Tiles {
  font-size: 0;
  margin-left: ($space / 2);
  margin-right: ($space / 2);
}

.Tile {
  display: inline-block;
  font-size: 1rem;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.Tile-content {
  background: $white;
  border-radius: $radius;
  color: $gray-dark;
  margin: $space ($space / 2) 0;
  min-height: 10em;
  padding: $space;
  position: relative;
}

.Tile-content--toggle {
  cursor: pointer;
  
  &:focus,
  &:hover {
    box-shadow: 0 0 0 $edge $blue-light;
    outline: 0;
  }
}

.Tile.is-disabled .Tile-content--toggle {
  cursor: default;
  opacity: 0.5;
  
  &:focus,
  &:hover {
    box-shadow: none;
  }
}

.Tile-flyout {
  display: none;
  position: relative;
}

.Tile.is-expanded .Tile-flyout {
  display: block;
}

.Tile-flyout:before {
  background: #fff;
  content: "";
  left: 50%;
  margin-left: ($space / -2);
  position: absolute;
  height: $space;
  top: ($space / -2);
  transform: rotate(45deg);
  width: $space;
}

/**
 * Breakpoint layout changes
 */

@mixin generate-tile-grid($columns) {
  .Tile {
    width: (100% / $columns);
  }
  
  .Tile-flyout {
    width: (100% * $columns);
  }
  
  @for $column from 1 through $columns {
    .Tile:nth-child(#{$columns}n+#{$column}) {
      .Tile-flyout {
        margin-left: (-100% * ($column - 1));
      }
      
      .Tile-flyout:before {
        left: (100% / $columns * ($column - 0.5));
      }
    }
  }
}

@media (min-width: $sm-viewport) {
  @include generate-tile-grid(2);
}

@media (min-width: $md-viewport) {
  @include generate-tile-grid(3);
}

@media (min-width: $lg-viewport) {
  @include generate-tile-grid(4);
}

/**
 * Utilities: Space
 */

.u-marginTop {
  margin-top: $space;
}

@media (min-width: $md-viewport) {
  .u-md-no-marginTop {
    margin-top: 0;
  }
}

/**
 * Utilities: Size
 *
 * https://github.com/suitcss/utils-size/
 */

.u-size1of2 {
  width: 50% !important;
}

@media (min-width: $md-viewport) {
  .u-md-size1of2 {
    width: 50% !important;
  }
}

/**
 * Utilities: Text
 * 
 * https://github.com/suitcss/utils-text/
 */

.u-textCenter {
  text-align: center !important;
}

.u-textRight {
  text-align: right !important;
}
            
          
!
            
              /**
 * Plugin: RichTile
 *
 * Because I got a little ambitious and decided to include ARIA attributes
 * and stuff, it became easier to manage this as a plugin.
 */

var RichTile = function (element, options) {
  this.element = $(element);
  this.options = $.extend({}, RichTile.DEFAULTS, options);
  this.flyoutElement = this.element.find(this.options.flyout);
  this.toggleElement = this.element.find(this.options.toggle);
  
  this.toggleElement.on({
    'click.RichTile': $.proxy(this.clickHandler, this),
    'keyup.RichTile': $.proxy(this.keyHandler, this)
  });
};

RichTile.DATA_KEY = 'plugin_richTile';

RichTile.DEFAULTS = {
  flyout: '.js-tile-flyout',
  toggle: '.js-toggle-tile',
  expandedClass: 'is-expanded',
  disabledClass: 'is-disabled',
  toggleKeyCodes: [13, 32] // ENTER, SPACE
};

RichTile.prototype.isExpanded = function() {
  return this.element.hasClass(this.options.expandedClass);
};

RichTile.prototype.isDisabled = function() {
  return this.element.hasClass(this.options.disabledClass);
};

RichTile.prototype.isEnabled = function() {
  return ! this.isDisabled();
};

RichTile.prototype.toggle = function(expand) {
  if (typeof expand === 'undefined') {
    expand = ! this.isExpanded();
  }
  if (this.isEnabled() || !expand) {
    this.flyoutElement.attr('aria-hidden', ! expand);
    this.toggleElement.attr('aria-expanded', expand);
    this.element.toggleClass(this.options.expandedClass, expand);
    this.element.trigger((expand ? 'expanded' : 'collapsed') + '.RichTile', [ this ]);
  }
  return this;
};

RichTile.prototype.expand = function() {
  return this.toggle(true);
};

RichTile.prototype.collapse = function() {
  return this.toggle(false);
};

RichTile.prototype.toggleEnable = function(enable) {
  if (typeof enable === 'undefined') {
    enable = this.isDisabled();
  }
  this.toggleElement.filter('[tabindex]').attr({
    'tabindex': enable ? 0 : -1,
    'aria-disabled': ! enable
  });
  if (! enable) {
    this.toggle(false);
  }
  this.element.toggleClass(this.options.disabledClass, ! enable);
  this.element.trigger((enable ? 'enabled' : 'disabled') + '.RichTile', [ this ]);
  return this;
};

RichTile.prototype.enable = function() {
  return this.toggleEnable(true);
};

RichTile.prototype.disable = function() {
  return this.toggleEnable(false);
};

RichTile.prototype.clickHandler = function(event) {
  event.preventDefault();
  return this.toggle();
};

RichTile.prototype.keyHandler = function(event) {
  if (this.options.toggleKeyCodes.indexOf(event.which) > -1) {
    event.preventDefault();
    return this.toggle();
  }
};

$.fn.richTile = function(option) {
  return this.each(function() {
    var data = $.data(this, RichTile.DATA_KEY);

    if (!data) {
      $.data(this, RichTile.DATA_KEY, (data = new RichTile(this, typeof option === 'object' && option)));
    }
    
    if (typeof option === 'string') {
      data[option]();
    }
  });
};

/**
 * Apply plugin and account for desired behavior outside of individual toggles.
 */

$('.js-tile').richTile().on({
  'expanded.RichTile': function(event, tile) {
    // disable siblings on expand
    var siblings = tile.element.siblings('.js-tile');
    siblings.richTile('disable');
    // re-enable when this tile is collapsed
    tile.element.one('collapsed.RichTile', function() {
      siblings.richTile('enable');
    });
  }
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console