diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss
index a31392a..08b6735 100644
--- a/app/assets/sass/_variables.scss
+++ b/app/assets/sass/_variables.scss
@@ -138,6 +138,13 @@ $list-group-item-border-color:      $gray-light;
 $list-group-hover-background:       $gray-lightest;
 $list-group-item-active-background: $brand-color;
 
+// ----------------------------------
+//   List group
+// ----------------------------------
+
+$card-border-color: $gray-light;
+$card-header-background: $gray-lightest;
+
 // ----------------------------------
 //   Shadows
 // ----------------------------------
diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 6f97880..a1f7d81 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -30,6 +30,7 @@
 @import "components/icon";
 @import "components/button";
 @import "components/badge";
+@import "components/card";
 @import "components/section";
 @import "components/spacer";
 @import "components/pagination";
diff --git a/app/assets/sass/components/_card.scss b/app/assets/sass/components/_card.scss
new file mode 100644
index 0000000..7abf9e8
--- /dev/null
+++ b/app/assets/sass/components/_card.scss
@@ -0,0 +1,74 @@
+
+
+// ----------------------------------
+//  Base style.
+// ----------------------------------
+
+
+.card {
+    border: 1px solid $card-border-color;
+
+    &-header,
+    &-body {
+        display: block;
+        padding: .5em 1em;
+    }
+
+    //    Contextual colors
+    // ----------------------------------
+
+    &-header-default {
+        background-color: $card-header-background;
+    }
+
+    // Add border between header and body if they follow eachother.
+    &-header + &-body {
+        border-top: 1px solid $card-border-color;
+    }
+}
+
+//    Header link
+// ----------------------------------
+
+a.card-header,
+.card-header-link {
+    cursor: pointer;
+    color: $list-group-item-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+    }
+
+    &:hover {
+        background: $card-header-background;
+    }
+}
+
+
+// ----------------------------------
+//  Layouts
+// ----------------------------------
+
+
+//    Accordion
+// ----------------------------------
+
+.card-accordion {
+
+    .card {
+
+        &-header {
+            border-bottom: 0;
+        }
+
+        &-body {
+            border-top: 1px solid $card-border-color;
+        }
+    }
+
+    .card:not(:first-of-type) {
+        border-top: 0;
+    }
+}