mixin view-heading 
    +view('heading', 'Heading')
        .c-box
            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= 'H1 styled'
            h2= 'H2 styled'
            h3= 'H3 styled'
            h4= 'H4 styled'
            h5= 'H5 styled'
            h6= 'H6 styled'

        .c-box.s-headings.s-headings--display
            h1.u-mt-0= 'H1 display styled'
            h2= 'H2 display styled'
            h3= 'H3 display styled'
            h4= 'H4 display styled'
            h5= 'H5 display styled'
            h6= 'H6 display styled'

        .c-box
            +div-heading('xxl')(class='u-mt-0')= 'XXL Heading'
            +div-heading('xl')= 'XL Heading'
            +div-heading('lg')= 'LG Heading'
            +div-heading('md')= 'MD Heading'
            +div-heading('sm')= 'SM Heading'
            +div-heading('xs')= 'XS Heading'

        .c-box
            +div-heading('xxl', true)(class='u-mt-0')= 'XXL display Heading'
            +div-heading('xl', true)= 'XL display Heading'
            +div-heading('lg', true)= 'LG display Heading'
            +div-heading('md', true)= 'MD display Heading'
            +div-heading('sm', true)= 'SM display Heading'
            +div-heading('xs', true)= 'XS display Heading'