diff --git a/sass/components/_all.sass b/sass/components/_all.sass
index 1de2c214..88fd45c5 100644
--- a/sass/components/_all.sass
+++ b/sass/components/_all.sass
@@ -4,6 +4,7 @@
 @import "card.sass"
 @import "dropdown.sass"
 @import "level.sass"
+@import "list.sass"
 @import "media.sass"
 @import "menu.sass"
 @import "message.sass"
diff --git a/sass/components/list.sass b/sass/components/list.sass
new file mode 100644
index 00000000..a40a3f84
--- /dev/null
+++ b/sass/components/list.sass
@@ -0,0 +1,27 @@
+$list-background-color: $white !default
+$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$list-radius: $radius !default
+
+$list-item-border: 1px solid $border !default
+$list-item-color: $text !default
+$list-item-active-background-color: $link !default
+$list-item-active-color: $link-invert !default
+$list-item-hover-background-color: $background !default
+
+.list
+  background-color: $list-background-color
+  box-shadow: $list-shadow
+  border-radius: $list-radius
+  &.is-hoverable > .list-item:hover:not(.is-active)
+    background-color: $list-item-hover-background-color
+    cursor: pointer
+
+.list-item
+  color: $list-item-color
+  display: block
+  padding: 0.5em 1em
+  &.is-active
+    background-color: $list-item-active-background-color
+    color: $list-item-active-color
+  &:not(:last-child)
+    border-bottom: $list-item-border