Cards with images

index.html

@@ -14,7 +14,7 @@
         <h1>Sculptor</h1>
         <p>The future web experience</p>
         <a href="#getting-started" class="button blur">Getting Started</a><br>
-        <small>v0.1.2</small><br>
+        <small>v0.1.3</small><br>
 
     </div>
 </header>
@@ -462,6 +462,36 @@ <h2>With Nice Background on header</h2>
     &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
+
+    <h2>With image on header</h2>
+    <div class="flexRow">
+        <div class="column">
+            &nbsp;
+        </div>
+        <div class="column">
+            <div class="card">
+                <header class="header image textWhite">
+                    <img src="http://kingofwallpapers.com/sundown/sundown-008.jpg">
+                    <span>Card Title</span>
+                </header>
+                <div class="content">
+                    <p class="indent textJustify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.</p>
+                </div>
+            </div>
+        </div>
+        <div class="column">
+            &nbsp;
+        </div>
+    </div>
+    <pre><code data-language="html">&lt;div class="card"&gt;
+    &lt;div class="header image textWhite"&gt;
+        &lt;img src="http://kingofwallpapers.com/sundown/sundown-008.jpg"&gt;
+        &lt;span&gt;Card Title&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="content"&gt;
+        &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
     <h2>With nice background and action</h2>
     <div class="flexRow">
         <div class="column">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sculptorcss",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The future web experience in CSS",
   "main": "index.js",
   "scripts": {

sass/components/_card.scss

@@ -14,6 +14,25 @@
     padding: $buttonPadding $buttonPadding*2;
     font-size: $h2Size;
     font-weight: $fontLight;
+    &.image{
+      display: flex;
+      align-items: flex-end;
+      padding: 0;
+      overflow: hidden;
+      border-top-left-radius: $radiusLight;
+      border-top-right-radius: $radiusLight;
+
+      & span{
+        position: absolute;
+        padding: $buttonPadding;
+      }
+
+      & img{
+        display: block;
+        max-width: 100%;
+        height: auto;
+      }
+    }
   }
   // ==============================================
   //                Card Content

sass/sculptor.scss

@@ -1,5 +1,5 @@
 /*!
- * Sculptor v0.1.2
+ * Sculptor v0.1.3
  * https://github.com/1fabiosoares/sculptor
  *
  * Copyright (c) 2016 Fabio Soares