mixin view-badge 
    +view('badge', 'Badge')
        .c-box
            +badge(size=50 href='#')= '50'
            = ' '
            +badge= '100'
            = ' '
            +badge(size=200 href='#')= '200'
            = ' '
            +badge(size=300 href='#')= '300'

        .c-box
            +badge(size=50 href='#' quiet=true)= '50'
            = ' '
            +badge(quiet=true)= '100'
            = ' '
            +badge(size=200 href='#' quiet=true)= '200'
            = ' '
            +badge(size=300 href='#' quiet=true)= '300'

        each theme in ['accent', 'positive', 'negative', 'warning']
            .c-box
                +badge(theme)(size=50 href='#')= 'new'
                = ' '
                +badge(theme)= 'new'
                = ' '
                +badge(theme)(size=200 href='#')= 'new'
                = ' '
                +badge(theme)(size=300 href='#')= 'new'

            .c-box
                +badge(theme)(size=50 href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(quiet=true)= 'new'
                = ' '
                +badge(theme)(size=200 href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(size=300 href='#' quiet=true)= 'new'

        .c-box
            +badge(size=50, pill=true)= '50'
            = ' '
            +badge(pill=true)= '100'
            = ' '
            +badge(size=200 pill=true)= '200'
            = ' '
            +badge(size=300 pill=true)= '300'

        .c-box
            +badge(size=50 pill=true quiet=true)= 'new'
            = ' '
            +badge(pill=true quiet=true)= 'new'
            = ' '
            +badge(size=200 pill=true quiet=true)= 'new'
            = ' '
            +badge(size=300 pill=true quiet=true)= 'new'

        each theme in ['accent', 'positive', 'negative', 'warning']
            .c-box
                +badge(theme)(size=50 pill=true href='#')= 'new'
                = ' '
                +badge(theme)(pill=true)= 'new'
                = ' '
                +badge(theme)(size=200 pill=true href='#')= 'new'
                = ' '
                +badge(theme)(size=300 pill=true href='#')= 'new'

            .c-box
                +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(pill=true quiet=true)= 'new'
                = ' '
                +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new'
                = ' '
                +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new'