Add loose list style

src/stylesheets/typography/_typography-lists.scss

@@ -2,10 +2,11 @@
 /// @group Typography
 ////
 
+/// List placeholder
 /// @since 0.1.0
 %list {
   font-feature-settings: 'kern', 'onum', 'liga';
-  margin-left: 2rem;
+  margin-left: rem($spacing-large);
   padding: 0;
 }
 
@@ -14,20 +15,19 @@ ol {
   @extend %list;
 }
 
+/// Base list class. Can be used with various modifiers.
+/// @see .list--unstyled
+/// @see .list--loose
+/// @since 0.1.0
 .list {
   @extend %list;
 
-  &--unstyled {
-    list-style: none;
-    margin-left: 0;
-    padding: 0;
-  }
-
+  // TODO: Do we need featured lists?
   &--featured {
     list-style: none outside;
 
     li,
-    &__list-item {
+    .list__item {
       position: relative;
 
       &:before {
@@ -45,3 +45,23 @@ ol {
     }
   }
 }
+
+/// Unstyled list modifier - remove bullets, padding etc.
+/// Used as a modifier for `.list`.
+/// Often used for lists of links.
+/// @requires .list
+/// @since 0.1.0
+.list--unstyled {
+  list-style: none;
+  margin-left: 0;
+  padding: 0;
+}
+
+/// Loose list style - with a gap between list items
+/// @since 0.2.12
+.list--loose {
+  li,
+  .list__item {
+    margin-bottom: rem($spacing-x-small);
+  }
+}