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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <section class="card-container">
  
  
  
  <article class="c-card">
    
    <header class="c-card__header">
      <img src="http://placehold.it/350x200"  class="c-card__image" alt="Card Image" />
    </header>

    <div class="c-card__body">
      <h2 class="c-card__title">
        Card
      </h2>
      <p class="c-card__subtitle">
        initial component
      </p>
      
      <p class="c-card__intro">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </p>
      
    </div>

    <footer class="c-card__footer">
      Footer
    </footer>

  </article>
  
  
  
  <article class="c-card c-card--center">
    
    <header class="c-card__header">
      <img src="http://placehold.it/350x200" class="c-card__image" alt="Card Image" />
    </header>

    <div class="c-card__body">
      <h2 class="c-card__title">
        card--center
      </h2>
      <p class="c-card__subtitle">
        center modifier
      </p>
      
      <p class="c-card__intro">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </p>
    </div>

    <footer class="c-card__footer">
      Footer
    </footer>

  </article>
  
  
  
  <article class="c-card c-card--wide">
    
    <header class="c-card__header">
      <img src="http://placehold.it/300x250"  class="c-card__image" alt="Card Image" />
    </header>

    <div class="c-card__body">
      <h2 class="c-card__title">
        card-wide
      </h2>
      <p class="c-card__subtitle">
        wide-modifier
      </p>
      <p class="c-card__intro">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </p>
    </div>

    <footer class="c-card__footer">
      Footer
    </footer>

  </article>
  
  
  
  <article class="c-card-flip">
    <div class="c-card-flip__flipper">
      
      <div class="c-card-flip__front">
         <img src="http://placehold.it/450x250"  class="c-card-flip__image" alt="Card Image" />
      </div>
      
      <div class="c-card-flip__back">
        <h3 class="c-card-flip__title">
          Hi there, how are you today ?
          <br>
          This is a separated card-flip component :)
        </h3>
      </div>
      
    </div>
  </article>
  
  
  
</section>
            
          
!

CSS

            
              // ----------------------------------------
// !!GENERAL
// ----------------------------------------
/* ** !!GENERAL ** */
@import url(https://fonts.googleapis.com/css?family=Amaranth:400,400italic,700italic,700)

.c-card *
  display: block
  box-sizing: border-box

body
  font-family: "Amaranth", sans-serif
  text-align: center
  background-color: #edf3f8


  
// ----------------------------------------
// !!CARD
// ----------------------------------------
/* ** !!CARD ** */

// Sometimes you need a container or wrapper for your components in which case you could use a class like this
// Important thing to understand here is that .c-card doesn't depend on .card-container
//.card-container is a helper in this situation, it helps us to keep the cards together
.card-container
  max-width: 900px
  margin: 0 auto

.c-card
  display: inline-block
  width: 100%
  max-width: 350px
  margin: 20px
  cursor: pointer
  transition: all 0.3s ease
  text-align: left
  background: #fff
  box-shadow: 0 6px 10px -5px rgba(0, 0, 0, 0.2)

  &:hover
    transform: translateY(-5px)
    box-shadow: 0 20px 20px -15px rgba(0, 0, 0, 0.3)

  &__header
    //..     
  
  &__image
    max-width: 100%
 
  &__body
    padding: 20px
    
  &__title
    font-size: 15px
    font-weight: 700
    line-height: 1.2
    margin: 0
    padding: 0
    text-transform: uppercase

  &__subtitle
    font-size: 13px
    margin-top: 5px
    padding: 0

  &__intro
    margin-bottom: 0

  &__footer
    padding: 20px
    border-top: 1px solid #ddd

    
    
// ----------------------------------------
// !!CARD CENTER MODIFIER
// ----------------------------------------
/* ** !!CARD CENTER MODIFIER ** */
.c-card--center
  text-align: center

  
  
// ----------------------------------------
// !!CARD WIDE MODIFIER
// ----------------------------------------
/* ** !!CARD WIDE MODIFIER ** */
.c-card--wide
  max-width: 740px

  .c-card
    &__header
      float: left

    &__body
      float: left
      padding-top: 30px

    &__footer
      clear: both
      text-align: center

      
      
// ----------------------------------------
// !!CARD FLIP, ANOTHER BLOCK COMPONENT
// ----------------------------------------
/* ** !!CARD FLIP, ANOTHER BLOCK COMPONENT ** */
.c-card-flip
  width: 450px
  height: 250px
  margin: 20px auto
  cursor: pointer
  perspective: 1000
  -webkit-perspective: 1000

  &__flipper
    position: relative
    transition: 0.8s ease-in-out
    transform-style: preserve-3d

  &__front,
  &__back
    position: absolute
    top: 0
    left: 0
    width: 450px
    height: 250px
    -webkit-perspective: 1000
    perspective: 1000
    -webkit-backface-visibility: hidden
    backface-visibility: hidden

  &__back
    transform: rotateY(180deg)
    background: #ddd

  &__title
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    height: 50px
    margin: auto

  &:hover
    .c-card-flip__flipper
      transform: rotateY(180deg)

            
          
!

JS

            
              
            
          
!
999px

Console