cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              .container
  h1 The wide world of responsive, Bootstrap-powered card elements.
  br
  .row
    div.card3.col-sm-4(contentEditable="True")
      div
        div.cardhead
          h3.text-center Improved Product Card: .card3
          img.img-responsive(src="http://fasttechcdn.com/products/120/1205700/1205700-1.jpg")
        div.cardcontent
          p Features of this card:
          ul
            li 
              p Card title above image. 
            li
              p Pure bootstrap + CSS3. 
            li
              p No flexbox.
              p.alert.alert-success 
                em Nota bene: 
                | This card's mobile-friendliness has vastly improved over card1, because of a max-width on the div containing the image.
            li 
              p Arbitrary HTML below image/title fold
            li 
              p goes
            li 
              p here
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
    div.card1.col-sm-4(contentEditable="True")
      div
        div.cardhead
          img.img-responsive(src="//placehold.it/300x168")
          h3 Basic Card: .card1
        div.cardcontent
          p Features of this card:
          ul
            li 
              p Image above the card title. 
              p 
                em Nota bene: 
                | This card can be less than ideal for mobile, due to poor image resizing.
            li 
              p Arbitrary HTML below image/title fold
            li goes
            li here
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
    div.card2.col-sm-4(contentEditable="True")
      div
        div.cardhead
          div.cardtitles
            h3 Card Title Text how long can this get without making this break
            h4 Subtitle text if needed?
        div.cardcontent
          p colored text?
          ul
            li arbitrary
            li html
            li goes
            li here
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
    div.card2.col-sm-4(contentEditable="True")
      div
        div.cardhead
          div.cardtitles
            h3 Material-ish: .card2
            h4 A versitile info-card.
        div.cardcontent
          h4 To Do 
          p 
            i on this card style
          pre
            | - [ ] incorporate color scheme
            | - [ ] incorporate baseline grid calculations for padding & spacing
            | - [ ] test with all kinds of sizes of content
            | - [ ] 1px on right uncovered in middle card. Where's that coming from?
          h4 Features of this card:
          h5 Good background images
          p The background image fills its container along the limiting dimension. 
          p.alert.alert-info 
            em Nota bene: 
            | Ambiance images work best here, though they are not the only images that can fit.
          p.alert.alert-warning 
            em Careful!  
            | This may not be appropriate for product imagery.
          h5 Title overlay
          p A title overlay appears in the header.
          p.alert.alert-danger
            em
              span.fa.fa-warning 
              |  Take note: 
            | This feature is not compatible with IE<10, thanks to use of flexbox.
          h5 Refined style 
          p Subtle refinements to styles create a durable presentation.
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
  .row
    .col-md-12
      p new row
            
          
!
            
              em {
  font-weight: bold;
  font-style: normal;
}
// TODO:
// 1. incorporate color schemes
// 2. incorporate baseline grid sizing for padding calculations
// 3. variations: 
//     - title text that jumps above images on mobile
//     - product image cards that treat huge widths with respect
//     - click to expand long-text cards

.card1 { 
  
  margin-bottom: 30px;
  // The card class is primarily a .card wrapper,
  // plus an inner div with a border and padding.
  
  > div {
    border: solid 1px black; // color should be variable
    padding: 15px; // needs to be proportional to grid
  }
  
  .cardhead {
    //background-color: #eee;
  }
  
  .cardhead > img {
      margin: 0 auto; // centers elements when media queries kick in
      // better behavior would be to switch to a wider image
      // even better behavior would be to appropriately zoom the image
  }
  
  .cardcontent {
    //background-color: #eae;
  }


}

/******************** end of .card1 class ********************/

.card2 {
  * {
    //outline: solid 1px rgba(0,0,0,0.25);
  }
  
  margin-bottom: 30px;
  
  > div {
    border-radius: 4px;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.75);
    overflow: hidden;
  }
  
  .cardhead {
    background: url('//lorempixel.com/800/300/business') no-repeat center top;
    background-size: cover;
    border-radius: 4px 4px 0px 0px;
    box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.75);
    overflow: hidden;
    position: relative;
    border: none;
    display: flex;
    min-height: 160px;
    max-height: 200px;
    
    .cardtitles {
      background: rgba(0,0,0,.25);
      padding: 0px 8px;
      width: 100%;
      // this isn't working properly.
      // it's supposed to keep a constant
      // height and align the titles 
      // to the bottom, but right now
      // the titles have padding to push
      // up the height of this div.
      align-self: flex-end;
      
      > h3,h4 {
        color: #fff;
      }
    }
    
  }
  
  .cardcontent {
    padding: 16px 8px;
    background-color: #fafafa;
    
    
  }
  
}

/******************** end of .card2 class ********************/

.card3{
  margin-bottom: 30px;
  //- let the bootstrap column styles do the heavy lifting
  
  > div {
    //- and keep the card size-controlled from inside the container div
    max-width: 450px; //- prevents balooning feature images at 4:3 pixel ratios
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .cardhead {
    background-color: #eee;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
    
    > img {
      margin: 0 auto;
      padding: 15px; // optional padding to keep image /on top/ of background
    }
    
    > h3,h4 {
      color: #000;
    }
  } //- .cardhead
  
  .cardcontent {
    padding: 16px 8px;
    background-color: #fafafa;   
  } //- .cardcontent
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console