5 files changed, 17 insertions, 9 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 7c3696e..7bb59a0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -36,7 +36,7 @@ mixin view(id, title)
         views.push({ id, title });
 
     +container(narrow=true class='u-p-700 c-view' id=id)
-        +h1-heading('xl')= title
+        +h1-heading('xl')(class='u-mt-0')= title
         +divider('medium')
         block
 
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index aa3fec9..47ffefa 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -32,11 +32,11 @@ mixin h6-heading(level)
     h6(class=classes)&attributes(attributes)
         block
 
-mixin div-heading(level, inner = false)
+mixin div-heading(level, primary = false)
     - let classes = ['o-heading', 'o-heading--' + level]
     div(class=classes)&attributes(attributes)
-        if inner
-            span.o-heading__inner
+        if primary
+            span.o-heading__primary
                 block
         else
             block
diff --git a/tpl/views/blockquote.pug b/tpl/views/blockquote.pug
index a346292..a5dc95c 100644
--- a/tpl/views/blockquote.pug
+++ b/tpl/views/blockquote.pug
@@ -1,6 +1,6 @@
 mixin view-blockquote 
     +view('blockquote', 'Blockquote')
-        .c-box.s-blockquote
-            p= loremIpsum
+        .c-box.s-blockquotes
+            p.u-mt-0= loremIpsum
             blockquote= loremIpsum
             p= loremIpsum
diff --git a/tpl/views/code.pug b/tpl/views/code.pug
index 552500d..21e16c8 100644
--- a/tpl/views/code.pug
+++ b/tpl/views/code.pug
@@ -1,7 +1,7 @@
 mixin view-code 
     +view('code', 'Code')
         .c-box.s-body
-            p= loremIpsum
+            p.u-mt-0= loremIpsum
             pre
                 code.
                     font-weight:    700;
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index efdfb69..07080d5 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -1,15 +1,23 @@
 mixin view-heading 
     +view('heading', 'Heading')
         .c-box
-            h1= 'H1 default'
+            h1.u-mt-0= 'H1 default'
             h2= 'H2 default'
             h3= 'H3 default'
             h4= 'H4 default'
             h5= 'H5 default'
             h6= 'H6 default'
 
+        .c-box.s-headings
+            h1.u-mt-0: span.s-headings__primary= 'H1 styled'
+            h2= 'H2 styled'
+            h3= 'H3 styled'
+            h4= 'H4 styled'
+            h5= 'H5 styled'
+            h6= 'H6 styled'
+
         .c-box
-            +div-heading('xxl', true)= 'XXL Heading'
+            +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading'
             +div-heading('xl')= 'XL Heading'
             +div-heading('lg')= 'LG Heading'
             +div-heading('md')= 'MD Heading'