Cards component.

Author: arielger

index.styl

@@ -22,6 +22,7 @@
 // Components
 @import 'lib/alerts/index';
 @import 'lib/buttons/index';
+@import 'lib/cards/index';
 @import 'lib/breadcrumb/index';
 @import 'lib/codemirror/index';
 @import 'lib/spinner/index';

landing/templates/components.jade

@@ -101,7 +101,13 @@
       p We use this for showing where is the user inside the application.
       p Use the <code>.has-homepage</code> modifier to show the home icon before the first element.
       +playground({name: "breadcrumb"})
-        include ../../lib/breadcrumb/demo 
+        include ../../lib/breadcrumb/demo
+        
+    section
+      h2#cards Cards
+      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, sit?
+      +playground({name: "cards"})
+        include ../../lib/cards/demo 
 
     section
       h2#code-picker Code picker

lib/cards/demo.jade

@@ -0,0 +1,32 @@
+.col-xs-12.col-md-4
+  article.card
+    i.card-icon.icon-budicon-499.orange
+    h2.card-title Getting started
+    p.card-description Learn how to connect Auth0 to any social provider
+    .card-links
+      a.card-link(href="") Applications
+      a.card-link(href="") Multifactor Authentication
+      a.card-link(href="") Single Sign On
+    a.card-more(href="") More
+
+.col-xs-12.col-md-4
+  article.card
+    i.card-icon.icon-budicon-342.green
+    h2.card-title SDKS
+    p.card-description Learn about all those difficult items that you heard but were 
+    .card-links
+      a.card-link(href="") Ionic
+      a.card-link(href="") AngularJs
+      a.card-link(href="") NodeJs
+    a.card-more(href="") More
+
+.col-xs-12.col-md-4
+  article.card
+    i.card-icon.icon-budicon-546.blue
+    h2.card-title APIs
+    p.card-description Learn how to integrate Auth0 with other tools and SaaS
+    .card-links
+      a.card-link(href="") Connect Auth0 to your DB
+      a.card-link(href="") Auth0 & AWS API Gateway
+      a.card-link(href="") Multi tenants ads with Azure
+    a.card-more(href="") More

lib/cards/index.styl

@@ -0,0 +1,87 @@
+.card
+  clearfix()
+  background-color white
+  text-align center
+  padding 0 45px
+  box-shadow 0 1px 4px 0 #DDD
+
+  +breakpoint("desktop", "max")
+    margin-bottom 30px
+
+  .theme-dark &
+    box-shadow 0 1px 4px 0 black
+
+  .card-icon
+    font-size 18px
+    display inline-block
+    margin-top 24px
+
+    &.red
+      color: $color-red
+    &.blue-light
+      color: $color-blue-light
+    &.blue
+      color: $color-blue
+    &.yellow
+      color: $color-yellow
+    &.orange
+      color: $color-orange
+    &.oil
+      color: $color-oil
+    &.green
+      color: $color-green
+    &.gray
+      color: $color-gray
+    &.pink
+      color: $color-pink
+
+  .card-title
+    font-size 18px
+    color $color-text-black
+    margin-top 15px
+    margin-bottom 24px
+
+  .card-description
+    font-size 12px
+    color $color-text-light
+    line-height 1.5em
+    height 4.5em
+    margin 0
+    margin 10px 0 6px 0
+
+  .card-links
+    text-align left
+    margin-bottom 18px
+
+    .card-link
+      display block
+      font-size 12px
+      color $color-text
+      padding 10px 0
+      border-bottom 1px solid #DDD
+
+  .card-more
+    float right
+    margin-bottom 18px
+
+    &:after
+      content ''
+      display inline-block
+      width 0
+      height 0
+      margin-left 10px
+      border-top 4px solid transparent
+      border-right 4px solid transparent
+      border-bottom 4px solid transparent
+      border-left 8px solid $link-color
+
+      .theme-dark &
+        border-left-color lighten($link-color, 30%)
+
+    &:hover,
+    &:focus
+      &:after
+        border-left-color $link-hover-color
+
+        .theme-dark &
+          border-left-color lighten($link-hover-color, 30%)