Split demo in :target views

34 files changed, 737 insertions, 684 deletions

diff --git a/package.json b/package.json
index 13c1056..6047b47 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
         "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg",
-        "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
+        "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
         "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000"
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 26ba16f..3f81758 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -9,7 +9,6 @@
             --sm-content-width:  iro.fn-px-to-rem(360px),
             --pad-x:             fn.global-dim(--size --700),
             --pad-y:             fn.global-dim(--size --700),
-            --in-page-spacing-y: fn.global-dim(--size --700),
         )
     ), 'dims');
 
@@ -78,10 +77,5 @@
                 }
             }
         }
-
-        @include iro.bem-modifier('in-page') {
-            margin-top:    fn.dim(--in-page-spacing-y);
-            margin-bottom: fn.dim(--in-page-spacing-y);
-        }
     }
 }
diff --git a/src_demo/_base.scss b/src_demo/_base.scss
new file mode 100644
index 0000000..8dcd789
--- /dev/null
+++ b/src_demo/_base.scss
@@ -0,0 +1,5 @@
+body {
+    display:               grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:   'sidebar content';
+}
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
new file mode 100644
index 0000000..e983f2c
--- /dev/null
+++ b/src_demo/components/_box.scss
@@ -0,0 +1,16 @@
+@use 'iro-sass/src/index' as iro;
+@use '../../src/functions' as fn;
+
+@include iro.props-namespace('box') {
+    @include iro.props-store((
+        --colors: (
+            --border: fn.global-color(--obj),
+        ),
+    ), 'colors');
+
+    @include iro.bem-component(iro.props-namespace()) {
+        margin:  2em 0;
+        padding: 2em;
+        border:  1px solid fn.color(--border);
+    }
+}
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
new file mode 100644
index 0000000..6045e4b
--- /dev/null
+++ b/src_demo/components/_content.scss
@@ -0,0 +1,7 @@
+@use 'iro-sass/src/index' as iro;
+
+@include iro.props-namespace('content') {
+    @include iro.bem-component(iro.props-namespace()) {
+        grid-area: content;
+    }
+}
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
new file mode 100644
index 0000000..9cff3c8
--- /dev/null
+++ b/src_demo/components/_sidebar.scss
@@ -0,0 +1,29 @@
+@use 'iro-sass/src/index' as iro;
+@use '../../src/functions' as fn;
+
+@include iro.props-namespace('sidebar') {
+    @include iro.props-store((
+        --colors: (
+            --bg:              fn.global-color(--bg),
+            --border:          fn.global-color(--obj),
+            --icon:            fn.global-color(--fg-hi),
+            --group-header-fg: fn.global-color(--fg-hi),
+        ),
+    ), 'colors');
+
+    @include iro.props-store((
+        --colors: (
+            --bg:     fn.global-color(--bg-hi),
+            --border: fn.global-color(--bg-hi),
+        ),
+    ), 'colors-dark');
+
+    @include iro.bem-component(iro.props-namespace()) {
+        grid-area:        sidebar;
+        min-width:        10em;
+        padding:          .6em;
+        overflow:         auto;
+        border-right:     1px solid fn.color(--border);
+        background-color: fn.color(--bg);
+    }
+}
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
new file mode 100644
index 0000000..8086280
--- /dev/null
+++ b/src_demo/components/_view.scss
@@ -0,0 +1,12 @@
+@use 'iro-sass/src/index' as iro;
+@use '../../src/functions' as fn;
+
+@include iro.props-namespace('view') {
+    @include iro.bem-component(iro.props-namespace()) {
+        display: none;
+
+        &:target {
+            display: block;
+        }
+    }
+}
diff --git a/src_demo/index.scss b/src_demo/index.scss
new file mode 100644
index 0000000..2a442bd
--- /dev/null
+++ b/src_demo/index.scss
@@ -0,0 +1,17 @@
+@use '../src/declare-vars';
+
+@use '../src/base';
+@use 'base' as demo-base;
+
+@use 'components/sidebar';
+@use 'components/content';
+@use 'components/box';
+@use 'components/view';
+
+@use '../src/layouts';
+@use '../src/objects';
+@use '../src/scopes';
+@use '../src/utils';
+
+@use '../src/apply-vars';
+
diff --git a/tpl/index.pug b/tpl/index.pug
index 7c0c3ff..400ec64 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -1,5 +1,8 @@
 -
-    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+    const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+
+    const views = [];
+
 
 include layouts/container.pug
 
@@ -25,8 +28,13 @@ include objects/list-group.pug
 include objects/table.pug
 include objects/alert.pug
 
-mixin box 
-    +container(padX=true padY=true inPage=true)
+mixin view(id, title)
+    -
+        views.push({ id, title });
+
+    +container(padX=true padY=true narrow=true)(class='c-view' id=id)
+        +h1-heading('xl')= title
+        +rule('medium')
         block
 
 mixin user-card(name, hue)
@@ -38,6 +46,29 @@ mixin user-card(name, hue)
             = avaName
         = name
 
+include views/heading.pug
+include views/rule.pug
+include views/colored-links.pug
+include views/badge.pug
+include views/button.pug
+include views/text-field.pug
+include views/field-label.pug
+include views/radio.pug
+include views/checkbox.pug
+include views/switch.pug
+include views/form.pug
+include views/action-button.pug
+include views/status-indicator.pug
+include views/avatar.pug
+include views/action-menu.pug
+include views/menu.pug
+include views/backdrop.pug
+include views/dialog.pug
+include views/lightbox.pug
+include views/list-group.pug
+include views/table.pug
+include views/alert.pug
+
 
 doctype html
 html
@@ -49,674 +80,31 @@ html
         script(src="script.js")
 
     body
-        +container(padX=true padY=true narrow=true)
-
-            +h1-heading('xl')= 'Heading'
-            +rule('medium')
-
-            +box
-                +div-heading('xxl')= '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'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Rule'
-            +rule('medium')
-
-            +box
-                +div-heading('lg')= 'Heading'
-                +rule('strong')
-                p= loremIpsum
-
-            +box
-                +div-heading('sm')= 'Heading'
-                +rule('medium')
-                p= loremIpsum
-
-            +box
-                +div-heading('xs')= 'Heading'
-                +rule('faint')
-                p= loremIpsum
-
-            +box
-                +rule('strong')= 'Strong'
-                +rule('medium')= 'Medium'
-                +rule('faint')= 'Faint'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Colored links'
-            +rule('medium')
-
-            +box
-                .s-colored-links
-                    = 'Lorem ipsum dolor '
-                    a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
-                    = ' sit amet, consetetur '
-                    a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
-                    = ' sadipscing elitr, sed diam nonumy eirmod tempor'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Badge'
-            +rule('medium')
-
-            +box
-                +badge= '100'
-                = ' '
-                +badge('accent')= 'new'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Button'
-            +rule('medium')
-
-            +box
-                .l-button-group
-                    +a-button(variant='accent')= 'Button'
-                    +a-button(variant='accent' disabled=true)= 'Button'
-                    +a-button(variant='accent' outline=true)= 'Button'
-                    +a-button(variant='accent' outline=true disabled=true)= 'Button'
-                br
-                .l-button-group
-                    +a-button(variant='primary')= 'Button'
-                    +a-button(variant='primary' disabled=true)= 'Button'
-                    +a-button(variant='primary' outline=true)= 'Button'
-                    +a-button(variant='primary' outline=true disabled=true)= 'Button'
-                br
-                .l-button-group
-                    +a-button(variant='secondary')= 'Button'
-                    +a-button(variant='secondary' disabled=true)= 'Button'
-                    +a-button(variant='secondary' outline=true)= 'Button'
-                    +a-button(variant='secondary' outline=true disabled=true)= 'Button'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Text field'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', gap: '1rem' })
-                    +text-field(placeholder='Placeholder')
-                    +text-field(value='Just landed in L.A.')
-                    +text-field(value='Readonly' readonly=true)
-                    +text-field(value='Incorrect input' pattern='a+' required=true)
-                br
-                div(style={ display: 'flex', gap: '1rem' })
-                    +text-field(placeholder='Placeholder' disabled=true)
-                    +text-field(value='Just landed in L.A.' disabled=true)
-                    +text-field(value='Readonly' readonly=true disabled=true)
-                    +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
-                br
-                div
-                    +text-field(placeholder='Just landed in L.A.')
-                        +slot('pre')
-                            +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
-                        +slot('post')
-                            +action-button(quiet=true icon='smile' class='l-card__block')
-                            +action-button(quiet=true icon='send' class='l-card__block')
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Field label'
-            +rule('medium')
-
-            +box
-                +field-label('First name')
-                    +text-field(placeholder='Placeholder')
-                br
-                +field-label('Password', 'At least 6 characters required')
-                    +text-field(placeholder='Placeholder' type='password')
-                br
-                +field-label('Password', 'At least 6 characters required')(invalid=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true)
-                br
-                +field-label('First name')(disabled=true)
-                    +text-field(placeholder='Placeholder' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            +box
-                +field-label('First name')(align='left' labelWidth='100px')
-                    +text-field(placeholder='Placeholder')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
-                    +text-field(placeholder='Placeholder' type='password')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true)
-                br
-                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            +box
-                +field-label('First name')(align='right' labelWidth='100px')
-                    +text-field(placeholder='Placeholder')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
-                    +text-field(placeholder='Placeholder' type='password')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true)
-                br
-                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Radio'
-            +rule('medium')
-
-            +box
-                +radio(name="radio-demo-1")= 'Cats'
-                +radio(name="radio-demo-1")= 'Dogs'
-                +radio(name="radio-demo-1" checked=true)= 'Foxes'
-                br
-                +radio(name="radio-demo-2" disabled=true)= 'Cats'
-                +radio(name="radio-demo-2" disabled=true)= 'Dogs'
-                +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
-                br
-                +radio(accent=true name="radio-demo-3")= 'Cats'
-                +radio(accent=true name="radio-demo-3")= 'Dogs'
-                +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
-                br
-                +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
-                +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
-                +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Checkbox'
-            +rule('medium')
-
-            +box
-                +checkbox(indeterminate=true)= 'Cats'
-                +checkbox= 'Dogs'
-                +checkbox(checked=true)= 'Foxes'
-                br
-                +checkbox(indeterminate=true disabled=true)= 'Cats'
-                +checkbox(disabled=true)= 'Dogs'
-                +checkbox(checked=true disabled=true)= 'Foxes'
-                br
-                +checkbox(accent=true indeterminate=true)= 'Cats'
-                +checkbox(accent=true)= 'Dogs'
-                +checkbox(accent=true checked=true)= 'Foxes'
-                br
-                +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
-                +checkbox(accent=true disabled=true)= 'Dogs'
-                +checkbox(accent=true checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Switch'
-            +rule('medium')
-
-            +box
-                +switch= 'Cats'
-                +switch= 'Dogs'
-                +switch(checked=true)= 'Foxes'
-                br
-                +switch(disabled=true)= 'Cats'
-                +switch(disabled=true)= 'Dogs'
-                +switch(checked=true disabled=true)= 'Foxes'
-                br
-                +switch(accent=true)= 'Cats'
-                +switch(accent=true)= 'Dogs'
-                +switch(accent=true checked=true)= 'Foxes'
-                br
-                +switch(accent=true disabled=true)= 'Cats'
-                +switch(accent=true disabled=true)= 'Dogs'
-                +switch(accent=true checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Form'
-            +rule('medium')
-
-            +box
-                +form(labelsAlign="left")
-                    +form-item('Username')
-                        +text-field(placeholder='Example: Volpeon')
-
-                    +form-item('Password', 'At least 6 characters, all characters allowed')
-                        +text-field(placeholder='Example: hunter2' type='password')
-
-                    +form-item('Bio')
-                        +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
-
-                    +form-item('Favorite animal')
-                        +radio(name="form-demo-1" checked=true)= 'Foxes'
-                        +radio(name="form-demo-1")= 'Other'
-
-                    +form-item('Notification settings')
-                        +switch= 'In-app notifications'
-                        br
-                        +switch= 'Desktop notifications'
-                        br
-                        +switch= 'Email notifications'
-
-                    +form-item('')
-                        +checkbox= 'I\'ve read and accept the terms and conditions'
-
-                    +form-item('')
-                        +a-button(variant='primary')= 'Register'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Action button'
-            +rule('medium')
-
-            +box
-                +action-button= 'Idle'
-                = ' '
-                +action-button(selected=true)= 'Selected'
-                = ' '
-                +action-button(disabled=true)= 'Disabled'
-                = ' '
-                +action-button(selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(icon='trash')= 'Idle'
-                = ' '
-                +action-button(icon='trash' selected=true)= 'Selected'
-                = ' '
-                +action-button(icon='trash' disabled=true)= 'Disabled'
-                = ' '
-                +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(icon='trash')
-                = ' '
-                +action-button(icon='trash' selected=true)
-                = ' '
-                +action-button(icon='trash' disabled=true)
-                = ' '
-                +action-button(icon='trash' selected=true disabled=true)
-
-            +box
-                +action-button(quiet=true )= 'Idle'
-                = ' '
-                +action-button(quiet=true selected=true)= 'Selected'
-                = ' '
-                +action-button(quiet=true disabled=true)= 'Disabled'
-                = ' '
-                +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(quiet=true icon='trash')= 'Idle'
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true)= 'Selected'
-                = ' '
-                +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(quiet=true icon='trash')
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true)
-                = ' '
-                +action-button(quiet=true icon='trash' disabled=true)
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true disabled=true)
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Status indicator'
-            +rule('medium')
-
-            +box
-                +status-indicator
-                = ' '
-                +status-indicator('green')
-                = ' '
-                +status-indicator('yellow')
-                = ' '
-                +status-indicator('red')
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Avatar'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar
-                        = 'Vo'
-                    +avatar(status='green' hue=45)
-                        = 'lp'
-                    +avatar(src='avatar.png')
-                    +avatar(src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(size='75' hue=90)
-                        = 'eo'
-                    +avatar(size='75' status='green' hue=135)
-                        = 'n'
-                    +avatar(size='75' src='avatar.png')
-                    +avatar(size='75' src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(size='50' hue=180)
-                        = 'V'
-                    +avatar(size='50' hue=225)
-                        = 'o'
-                    +avatar(size='50' src='avatar.png')
-
-            +box
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(circle=true)
-                        = 'Vo'
-                    +avatar(circle=true status='green' hue=45)
-                        = 'lp'
-                    +avatar(circle=true src='avatar.png')
-                    +avatar(circle=true src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(circle=true size='75' hue=90)
-                        = 'eo'
-                    +avatar(circle=true size='75' status='green' hue=135)
-                        = 'n'
-                    +avatar(circle=true size='75' src='avatar.png')
-                    +avatar(circle=true size='75' src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(circle=true size='50' hue=180)
-                        = 'V'
-                    +avatar(circle=true size='50' hue=225)
-                        = 'o'
-                    +avatar(circle=true size='50' src='avatar.png')
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Action menu'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
-                    +action-button(quiet=true selected=true)= 'Menu'
-                    +action-menu
-                        +action-menu-slot(class='l-card l-card--flush')
-                            +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
-                            .l-card__block.l-card__block--main
-                                strong.u-d-block= 'Volpeon'
-                                small.u-d-block= '@volpeon@mk.vulpes.one'
-                        +action-menu-separator
-                        +action-menu-item(icon='user')= 'View profile'
-                        +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
-                        +action-menu-separator
-                        +action-menu-item(icon='trash' disabled=true)= 'Delete'
-                        +action-menu-item(icon='bookmark')= 'Bookmark'
-                        +action-menu-item(icon='tags')= 'Tags'
-                        +action-menu-item(postIcon='chevron-right')= 'More'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Menu'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', gap: '3rem' })
-                    +menu
-                        +menu-header= 'Category 1'
-                        +menu-item= 'Mark as away'
-                        +menu-item= 'Delete'
-                        +menu-separator
-                        +menu-header= 'Category 2'
-                        +menu-item(icon='bookmark')= 'Bookmark'
-                        +menu-item(icon='tags')= 'Tags'
-
-                    +menu
-                        +menu-item
-                            strong= 'Bouncer'
-                        +menu-separator
-                        +menu-item
-                            strong= 'Libera'
-                        +menu-item(icon='hash')= 'achannel'
-                        +menu-item(icon='hash')= 'kitsuneirc'
-                        +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
-                        +menu-item(icon='red' iconIsStatus=true)= 'someone'
-                        +menu-separator
-                        +menu-item
-                            strong= 'Ergo Testnet'
-                        +menu-separator
-                        +menu-item
-                            strong= 'NixNet'
-
-                    +menu
-                        +menu-header= 'Operators'
-                        +menu-item
-                            +user-card('volpeon', 0)
-                        +menu-item
-                            +user-card('curiousfox', 90)
-                        +menu-separator
-                        +menu-header= 'Moderators'
-                        +menu-item
-                            +user-card('user3567', 135)
-                        +menu-item
-                            +user-card('johndoe', 270)
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Backdrop'
-            +rule('medium')
-
-            +box
-                +backdrop
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Dialog'
-            +rule('medium')
-
-            +box
-                +backdrop
-                    +dialog('Lorem ipsum')
-                        +slot('body')
-                            = loremIpsum
-
-            +box
-                +backdrop
-                    +dialog('Lorem ipsum')(bodyClass='l-overflow')
-                        +slot('body')
-                            p.u-mt-0= loremIpsum
-                            p= loremIpsum
-                            p= loremIpsum
-                            p= loremIpsum
-                            p= loremIpsum
-
-            +box
-                +backdrop
-                    +dialog('Lorem ipsum')(noRule=true)
-                        +slot('sidebar')
-                            +menu(style={ 'min-width': '10em' })
-                                +menu-header= '#channel'
-                                +menu-item(icon='bookmark')= 'Bookmark'
-                                +menu-item(icon='tags', selected=true)= 'Tags'
-                                +menu-item(icon='hash')= 'achannel'
-                        +slot('body')
-                            p.u-mt-0= loremIpsum
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Lightbox'
-            +rule('medium')
-
-            +box
-                +backdrop(class='t-dark')
-                    +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
-                        = "Let's try multiple links! "
-                        a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
-                            = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
-                        = ' '
-                        a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
-                            = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
-                        = ' '
-                        a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
-                            = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'List group'
-            +rule('medium')
-
-            +box
-                +list-group
-                    +list-group-item= 'First item'
-                    +list-group-item= 'Second item'
-                    +list-group-item= 'Third item'
-                    +list-group-item= 'Fourth item'
-
-            +box
-                +list-group
-                    +list-group-item(action=true)= 'First item'
-                    +list-group-item(action=true)= 'Second item'
-                    +list-group-item(action=true)= 'Third item'
-                    +list-group-item(action=true)= 'Fourth item'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Table'
-            +rule('medium')
-
-            +box
-                +table(interactive=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            +box
-                +table(flush=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            +box
-                +table(box=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            +box
-                +table(box=true, size50=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Alert'
-            +rule('medium')
-
-            +box
-                +alert= loremIpsum
-                br
-                +alert('primary')= loremIpsum
-                br
-                +alert('error')= loremIpsum
-                br
-                +alert('success')= loremIpsum
-                br
-                +alert('warning')= loremIpsum
-
-
+        .c-content
+            +view-heading
+            +view-rule
+            +view-colored-links
+            +view-badge
+            +view-button
+            +view-text-field
+            +view-field-label
+            +view-radio
+            +view-checkbox
+            +view-switch
+            +view-form
+            +view-action-button
+            +view-status-indicator
+            +view-avatar
+            +view-action-menu
+            +view-menu
+            +view-backdrop
+            +view-dialog
+            +view-lightbox
+            +view-list-group
+            +view-table
+            +view-alert 
+
+        .c-sidebar
+            +menu
+                each view in views
+                    +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 0c9b6ec..c1affc4 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -12,7 +12,10 @@ mixin container
         if (!!attributes.theme) {
             classes['t-' + attributes.theme] = true
         }
+        if (attributes.class) {
+            classes[attributes.class] = true
+        }
 
-    div(class=classes)
+    div(class=classes)&attributes(attributes)
         .l-container__inner
             block
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 12726a3..2823e41 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -30,7 +30,7 @@ mixin dialog(title)
             .o-dialog__sidebar
                 - slots.sidebar()
         header.o-dialog__header
-            +div-heading('lg')(class='o-dialog__title')
+            +div-heading('md')(class='o-dialog__title')
                 = title
         +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
         section(class=bodyClass)
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 84321d7..c6e8223 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -18,7 +18,7 @@ mixin menu-item
             'is-selected':  attributes.selected,
         }
 
-    button(class=classes, disabled=attributes.disabled)
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
         .l-card.l-card--flush.l-card--75
             if attributes.icon
                 .l-card__block.o-menu__icon-slot
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
new file mode 100644
index 0000000..7bffe72
--- /dev/null
+++ b/tpl/views/action-button.pug
@@ -0,0 +1,55 @@
+mixin view-action-button 
+    +view('action-button', 'Action button')
+        .c-box
+            +action-button= 'Idle'
+            = ' '
+            +action-button(selected=true)= 'Selected'
+            = ' '
+            +action-button(disabled=true)= 'Disabled'
+            = ' '
+            +action-button(selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +action-button(icon='trash')= 'Idle'
+            = ' '
+            +action-button(icon='trash' selected=true)= 'Selected'
+            = ' '
+            +action-button(icon='trash' disabled=true)= 'Disabled'
+            = ' '
+            +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +action-button(icon='trash')
+            = ' '
+            +action-button(icon='trash' selected=true)
+            = ' '
+            +action-button(icon='trash' disabled=true)
+            = ' '
+            +action-button(icon='trash' selected=true disabled=true)
+
+        .c-box
+            +action-button(quiet=true )= 'Idle'
+            = ' '
+            +action-button(quiet=true selected=true)= 'Selected'
+            = ' '
+            +action-button(quiet=true disabled=true)= 'Disabled'
+            = ' '
+            +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +action-button(quiet=true icon='trash')= 'Idle'
+            = ' '
+            +action-button(quiet=true icon='trash' selected=true)= 'Selected'
+            = ' '
+            +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
+            = ' '
+            +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +action-button(quiet=true icon='trash')
+            = ' '
+            +action-button(quiet=true icon='trash' selected=true)
+            = ' '
+            +action-button(quiet=true icon='trash' disabled=true)
+            = ' '
+            +action-button(quiet=true icon='trash' selected=true disabled=true)
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug
new file mode 100644
index 0000000..4f96934
--- /dev/null
+++ b/tpl/views/action-menu.pug
@@ -0,0 +1,19 @@
+mixin view-action-menu 
+    +view('action-menu', 'Action menu')
+        .c-box
+            div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
+                +action-button(quiet=true selected=true)= 'Menu'
+                +action-menu
+                    +action-menu-slot(class='l-card l-card--flush')
+                        +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
+                        .l-card__block.l-card__block--main
+                            strong.u-d-block= 'Volpeon'
+                            small.u-d-block= '@volpeon@mk.vulpes.one'
+                    +action-menu-separator
+                    +action-menu-item(icon='user')= 'View profile'
+                    +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
+                    +action-menu-separator
+                    +action-menu-item(icon='trash' disabled=true)= 'Delete'
+                    +action-menu-item(icon='bookmark')= 'Bookmark'
+                    +action-menu-item(icon='tags')= 'Tags'
+                    +action-menu-item(postIcon='chevron-right')= 'More'
diff --git a/tpl/views/alert.pug b/tpl/views/alert.pug
new file mode 100644
index 0000000..c176279
--- /dev/null
+++ b/tpl/views/alert.pug
@@ -0,0 +1,12 @@
+mixin view-alert 
+    +view('alert', 'Alert')
+        .c-box
+            +alert= loremIpsum
+            br
+            +alert('primary')= loremIpsum
+            br
+            +alert('error')= loremIpsum
+            br
+            +alert('success')= loremIpsum
+            br
+            +alert('warning')= loremIpsum
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
new file mode 100644
index 0000000..01aaf93
--- /dev/null
+++ b/tpl/views/avatar.pug
@@ -0,0 +1,53 @@
+mixin view-avatar 
+    +view('avatar', 'Avatar')
+        .c-box
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar
+                    = 'Vo'
+                +avatar(status='green' hue=45)
+                    = 'lp'
+                +avatar(src='avatar.png')
+                +avatar(src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='75' hue=90)
+                    = 'eo'
+                +avatar(size='75' status='green' hue=135)
+                    = 'n'
+                +avatar(size='75' src='avatar.png')
+                +avatar(size='75' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='50' hue=180)
+                    = 'V'
+                +avatar(size='50' hue=225)
+                    = 'o'
+                +avatar(size='50' src='avatar.png')
+
+        .c-box
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true)
+                    = 'Vo'
+                +avatar(circle=true status='green' hue=45)
+                    = 'lp'
+                +avatar(circle=true src='avatar.png')
+                +avatar(circle=true src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='75' hue=90)
+                    = 'eo'
+                +avatar(circle=true size='75' status='green' hue=135)
+                    = 'n'
+                +avatar(circle=true size='75' src='avatar.png')
+                +avatar(circle=true size='75' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='50' hue=180)
+                    = 'V'
+                +avatar(circle=true size='50' hue=225)
+                    = 'o'
+                +avatar(circle=true size='50' src='avatar.png')
diff --git a/tpl/views/backdrop.pug b/tpl/views/backdrop.pug
new file mode 100644
index 0000000..d4fadce
--- /dev/null
+++ b/tpl/views/backdrop.pug
@@ -0,0 +1,4 @@
+mixin view-backdrop 
+    +view('backdrop', 'Backdrop')
+        .c-box
+            +backdrop
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
new file mode 100644
index 0000000..9b2c3e6
--- /dev/null
+++ b/tpl/views/badge.pug
@@ -0,0 +1,6 @@
+mixin view-badge 
+    +view('badge', 'Badge')
+        .c-box
+            +badge= '100'
+            = ' '
+            +badge('accent')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
new file mode 100644
index 0000000..9deba01
--- /dev/null
+++ b/tpl/views/button.pug
@@ -0,0 +1,20 @@
+mixin view-button 
+    +view('button', 'Button')
+        .c-box
+            .l-button-group
+                +a-button(variant='accent')= 'Button'
+                +a-button(variant='accent' disabled=true)= 'Button'
+                +a-button(variant='accent' outline=true)= 'Button'
+                +a-button(variant='accent' outline=true disabled=true)= 'Button'
+            br
+            .l-button-group
+                +a-button(variant='primary')= 'Button'
+                +a-button(variant='primary' disabled=true)= 'Button'
+                +a-button(variant='primary' outline=true)= 'Button'
+                +a-button(variant='primary' outline=true disabled=true)= 'Button'
+            br
+            .l-button-group
+                +a-button(variant='secondary')= 'Button'
+                +a-button(variant='secondary' disabled=true)= 'Button'
+                +a-button(variant='secondary' outline=true)= 'Button'
+                +a-button(variant='secondary' outline=true disabled=true)= 'Button'
diff --git a/tpl/views/checkbox.pug b/tpl/views/checkbox.pug
new file mode 100644
index 0000000..8f925af
--- /dev/null
+++ b/tpl/views/checkbox.pug
@@ -0,0 +1,18 @@
+mixin view-checkbox 
+    +view('checkbox', 'Checkbox')
+        .c-box
+            +checkbox(indeterminate=true)= 'Cats'
+            +checkbox= 'Dogs'
+            +checkbox(checked=true)= 'Foxes'
+            br
+            +checkbox(indeterminate=true disabled=true)= 'Cats'
+            +checkbox(disabled=true)= 'Dogs'
+            +checkbox(checked=true disabled=true)= 'Foxes'
+            br
+            +checkbox(accent=true indeterminate=true)= 'Cats'
+            +checkbox(accent=true)= 'Dogs'
+            +checkbox(accent=true checked=true)= 'Foxes'
+            br
+            +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
+            +checkbox(accent=true disabled=true)= 'Dogs'
+            +checkbox(accent=true checked=true disabled=true)= 'Foxes'
diff --git a/tpl/views/colored-links.pug b/tpl/views/colored-links.pug
new file mode 100644
index 0000000..8951154
--- /dev/null
+++ b/tpl/views/colored-links.pug
@@ -0,0 +1,9 @@
+mixin view-colored-links 
+    +view('colored-links', 'Colored links')
+        .c-box
+            .s-colored-links
+                = 'Lorem ipsum dolor '
+                a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
+                = ' sit amet, consetetur '
+                a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
+                = ' sadipscing elitr, sed diam nonumy eirmod tempor'
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
new file mode 100644
index 0000000..6aaead5
--- /dev/null
+++ b/tpl/views/dialog.pug
@@ -0,0 +1,29 @@
+mixin view-dialog 
+    +view('dialog', 'Dialog')
+        .c-box
+            +backdrop
+                +dialog('Lorem ipsum')
+                    +slot('body')
+                        = loremIpsum
+
+        .c-box
+            +backdrop
+                +dialog('Lorem ipsum')(bodyClass='l-overflow')
+                    +slot('body')
+                        p.u-mt-0= loremIpsum
+                        p= loremIpsum
+                        p= loremIpsum
+                        p= loremIpsum
+                        p= loremIpsum
+
+        .c-box
+            +backdrop
+                +dialog('Lorem ipsum')(noRule=true)
+                    +slot('sidebar')
+                        +menu(style={ 'min-width': '10em' })
+                            +menu-header= '#channel'
+                            +menu-item(icon='bookmark')= 'Bookmark'
+                            +menu-item(icon='tags', selected=true)= 'Tags'
+                            +menu-item(icon='hash')= 'achannel'
+                    +slot('body')
+                        p.u-mt-0= loremIpsum
diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug
new file mode 100644
index 0000000..37ffb1a
--- /dev/null
+++ b/tpl/views/field-label.pug
@@ -0,0 +1,58 @@
+mixin view-field-label 
+    +view('field-label', 'Field label')
+        .c-box
+            +field-label('First name')
+                +text-field(placeholder='Placeholder')
+            br
+            +field-label('Password', 'At least 6 characters required')
+                +text-field(placeholder='Placeholder' type='password')
+            br
+            +field-label('Password', 'At least 6 characters required')(invalid=true)
+                +text-field(placeholder='Placeholder' type='password' invalid=true)
+            br
+            +field-label('First name')(disabled=true)
+                +text-field(placeholder='Placeholder' disabled=true)
+            br
+            +field-label('Password', 'At least 6 characters required')(disabled=true)
+                +text-field(placeholder='Placeholder' type='password' disabled=true)
+            br
+            +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
+                +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
+
+        .c-box
+            +field-label('First name')(align='left' labelWidth='100px')
+                +text-field(placeholder='Placeholder')
+            br
+            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
+                +text-field(placeholder='Placeholder' type='password')
+            br
+            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
+                +text-field(placeholder='Placeholder' type='password' invalid=true)
+            br
+            +field-label('First name')(align='left' labelWidth='100px' disabled=true)
+                +text-field(placeholder='Placeholder' disabled=true)
+            br
+            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
+                +text-field(placeholder='Placeholder' type='password' disabled=true)
+            br
+            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
+                +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
+
+        .c-box
+            +field-label('First name')(align='right' labelWidth='100px')
+                +text-field(placeholder='Placeholder')
+            br
+            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
+                +text-field(placeholder='Placeholder' type='password')
+            br
+            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
+                +text-field(placeholder='Placeholder' type='password' invalid=true)
+            br
+            +field-label('First name')(align='right' labelWidth='100px' disabled=true)
+                +text-field(placeholder='Placeholder' disabled=true)
+            br
+            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
+                +text-field(placeholder='Placeholder' type='password' disabled=true)
+            br
+            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
+                +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
new file mode 100644
index 0000000..859e9a6
--- /dev/null
+++ b/tpl/views/form.pug
@@ -0,0 +1,29 @@
+mixin view-form 
+    +view('form', 'Form')
+        .c-box
+            +form(labelsAlign="left")
+                +form-item('Username')
+                    +text-field(placeholder='Example: Volpeon')
+
+                +form-item('Password', 'At least 6 characters, all characters allowed')
+                    +text-field(placeholder='Example: hunter2' type='password')
+
+                +form-item('Bio')
+                    +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
+
+                +form-item('Favorite animal')
+                    +radio(name="form-demo-1" checked=true)= 'Foxes'
+                    +radio(name="form-demo-1")= 'Other'
+
+                +form-item('Notification settings')
+                    +switch= 'In-app notifications'
+                    br
+                    +switch= 'Desktop notifications'
+                    br
+                    +switch= 'Email notifications'
+
+                +form-item('')
+                    +checkbox= 'I\'ve read and accept the terms and conditions'
+
+                +form-item('')
+                    +a-button(variant='primary')= 'Register'
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
new file mode 100644
index 0000000..a49c93d
--- /dev/null
+++ b/tpl/views/heading.pug
@@ -0,0 +1,9 @@
+mixin view-heading 
+    +view('heading', 'Heading')
+        .c-box
+            +div-heading('xxl')= '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'
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
new file mode 100644
index 0000000..174e904
--- /dev/null
+++ b/tpl/views/lightbox.pug
@@ -0,0 +1,14 @@
+mixin view-lightbox 
+    +view('lightbox', 'Lightbox')
+        .c-box
+            +backdrop(class='t-dark')
+                +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
+                    = "Let's try multiple links! "
+                    a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
+                        = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
+                    = ' '
+                    a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
+                        = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
+                    = ' '
+                    a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
+                        = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
new file mode 100644
index 0000000..970f0fb
--- /dev/null
+++ b/tpl/views/list-group.pug
@@ -0,0 +1,15 @@
+mixin view-list-group 
+    +view('list-group', 'List group')
+        .c-box
+            +list-group
+                +list-group-item= 'First item'
+                +list-group-item= 'Second item'
+                +list-group-item= 'Third item'
+                +list-group-item= 'Fourth item'
+
+        .c-box
+            +list-group
+                +list-group-item(action=true)= 'First item'
+                +list-group-item(action=true)= 'Second item'
+                +list-group-item(action=true)= 'Third item'
+                +list-group-item(action=true)= 'Fourth item'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
new file mode 100644
index 0000000..a255999
--- /dev/null
+++ b/tpl/views/menu.pug
@@ -0,0 +1,42 @@
+mixin view-menu 
+    +view('menu', 'Menu')
+        .c-box
+            div(style={ display: 'flex', gap: '3rem' })
+                +menu
+                    +menu-header= 'Category 1'
+                    +menu-item= 'Mark as away'
+                    +menu-item= 'Delete'
+                    +menu-separator
+                    +menu-header= 'Category 2'
+                    +menu-item(icon='bookmark')= 'Bookmark'
+                    +menu-item(icon='tags')= 'Tags'
+
+                +menu
+                    +menu-item
+                        strong= 'Bouncer'
+                    +menu-separator
+                    +menu-item
+                        strong= 'Libera'
+                    +menu-item(icon='hash')= 'achannel'
+                    +menu-item(icon='hash')= 'kitsuneirc'
+                    +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
+                    +menu-item(icon='red' iconIsStatus=true)= 'someone'
+                    +menu-separator
+                    +menu-item
+                        strong= 'Ergo Testnet'
+                    +menu-separator
+                    +menu-item
+                        strong= 'NixNet'
+
+                +menu
+                    +menu-header= 'Operators'
+                    +menu-item
+                        +user-card('volpeon', 0)
+                    +menu-item
+                        +user-card('curiousfox', 90)
+                    +menu-separator
+                    +menu-header= 'Moderators'
+                    +menu-item
+                        +user-card('user3567', 135)
+                    +menu-item
+                        +user-card('johndoe', 270)
diff --git a/tpl/views/radio.pug b/tpl/views/radio.pug
new file mode 100644
index 0000000..283bb4e
--- /dev/null
+++ b/tpl/views/radio.pug
@@ -0,0 +1,18 @@
+mixin view-radio 
+    +view('radio', 'Radio')
+        .c-box
+            +radio(name="radio-demo-1")= 'Cats'
+            +radio(name="radio-demo-1")= 'Dogs'
+            +radio(name="radio-demo-1" checked=true)= 'Foxes'
+            br
+            +radio(name="radio-demo-2" disabled=true)= 'Cats'
+            +radio(name="radio-demo-2" disabled=true)= 'Dogs'
+            +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
+            br
+            +radio(accent=true name="radio-demo-3")= 'Cats'
+            +radio(accent=true name="radio-demo-3")= 'Dogs'
+            +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
+            br
+            +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
+            +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
+            +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
diff --git a/tpl/views/rule.pug b/tpl/views/rule.pug
new file mode 100644
index 0000000..495c804
--- /dev/null
+++ b/tpl/views/rule.pug
@@ -0,0 +1,21 @@
+mixin view-rule 
+    +view('rule', 'Rule')
+        .c-box
+            +div-heading('lg')= 'Heading'
+            +rule('strong')
+            p= loremIpsum
+
+        .c-box
+            +div-heading('sm')= 'Heading'
+            +rule('medium')
+            p= loremIpsum
+
+        .c-box
+            +div-heading('xs')= 'Heading'
+            +rule('faint')
+            p= loremIpsum
+
+        .c-box
+            +rule('strong')= 'Strong'
+            +rule('medium')= 'Medium'
+            +rule('faint')= 'Faint'
diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug
new file mode 100644
index 0000000..6d7ad30
--- /dev/null
+++ b/tpl/views/status-indicator.pug
@@ -0,0 +1,10 @@
+mixin view-status-indicator 
+    +view('status-indicator', 'Status indicator')
+        .c-box
+            +status-indicator
+            = ' '
+            +status-indicator('green')
+            = ' '
+            +status-indicator('yellow')
+            = ' '
+            +status-indicator('red')
diff --git a/tpl/views/switch.pug b/tpl/views/switch.pug
new file mode 100644
index 0000000..f51077d
--- /dev/null
+++ b/tpl/views/switch.pug
@@ -0,0 +1,18 @@
+mixin view-switch 
+    +view('switch', 'Switch')
+        .c-box
+            +switch= 'Cats'
+            +switch= 'Dogs'
+            +switch(checked=true)= 'Foxes'
+            br
+            +switch(disabled=true)= 'Cats'
+            +switch(disabled=true)= 'Dogs'
+            +switch(checked=true disabled=true)= 'Foxes'
+            br
+            +switch(accent=true)= 'Cats'
+            +switch(accent=true)= 'Dogs'
+            +switch(accent=true checked=true)= 'Foxes'
+            br
+            +switch(accent=true disabled=true)= 'Cats'
+            +switch(accent=true disabled=true)= 'Dogs'
+            +switch(accent=true checked=true disabled=true)= 'Foxes'
diff --git a/tpl/views/table.pug b/tpl/views/table.pug
new file mode 100644
index 0000000..a5f62a7
--- /dev/null
+++ b/tpl/views/table.pug
@@ -0,0 +1,101 @@
+mixin view-table 
+    +view('table', 'Table')
+        .c-box
+            +table(interactive=true)
+                +table-head
+                    +table-row 
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                +table-body
+                    +table-row 
+                        +table-cell= 'Row 1,1'
+                        +table-cell= 'Row 1,2'
+                        +table-cell= 'Row 1,3'
+                    +table-row 
+                        +table-cell= 'Row 2,1'
+                        +table-cell= 'Row 2,2'
+                        +table-cell= 'Row 2,3'
+                    +table-row 
+                        +table-cell= 'Row 3,1'
+                        +table-cell= 'Row 3,2'
+                        +table-cell= 'Row 3,3'
+                    +table-row 
+                        +table-cell= 'Row 4,1'
+                        +table-cell= 'Row 4,2'
+                        +table-cell= 'Row 4,3'
+
+        .c-box
+            +table(flush=true)
+                +table-head
+                    +table-row 
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                +table-body
+                    +table-row 
+                        +table-cell= 'Row 1,1'
+                        +table-cell= 'Row 1,2'
+                        +table-cell= 'Row 1,3'
+                    +table-row 
+                        +table-cell= 'Row 2,1'
+                        +table-cell= 'Row 2,2'
+                        +table-cell= 'Row 2,3'
+                    +table-row 
+                        +table-cell= 'Row 3,1'
+                        +table-cell= 'Row 3,2'
+                        +table-cell= 'Row 3,3'
+                    +table-row 
+                        +table-cell= 'Row 4,1'
+                        +table-cell= 'Row 4,2'
+                        +table-cell= 'Row 4,3'
+
+        .c-box
+            +table(box=true)
+                +table-head
+                    +table-row 
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                +table-body
+                    +table-row 
+                        +table-cell(divider=true)= 'Row 1,1'
+                        +table-cell= 'Row 1,2'
+                        +table-cell= 'Row 1,3'
+                    +table-row 
+                        +table-cell(divider=true)= 'Row 2,1'
+                        +table-cell= 'Row 2,2'
+                        +table-cell= 'Row 2,3'
+                    +table-row 
+                        +table-cell(divider=true)= 'Row 3,1'
+                        +table-cell= 'Row 3,2'
+                        +table-cell= 'Row 3,3'
+                    +table-row 
+                        +table-cell(divider=true)= 'Row 4,1'
+                        +table-cell= 'Row 4,2'
+                        +table-cell= 'Row 4,3'
+
+        .c-box
+            +table(box=true, size50=true)
+                +table-head
+                    +table-row 
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                        +table-head-cell= 'Title'
+                +table-body
+                    +table-row 
+                        +table-cell= 'Row 1,1'
+                        +table-cell= 'Row 1,2'
+                        +table-cell= 'Row 1,3'
+                    +table-row 
+                        +table-cell= 'Row 2,1'
+                        +table-cell= 'Row 2,2'
+                        +table-cell= 'Row 2,3'
+                    +table-row 
+                        +table-cell= 'Row 3,1'
+                        +table-cell= 'Row 3,2'
+                        +table-cell= 'Row 3,3'
+                    +table-row 
+                        +table-cell= 'Row 4,1'
+                        +table-cell= 'Row 4,2'
+                        +table-cell= 'Row 4,3'
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
new file mode 100644
index 0000000..0ba84be
--- /dev/null
+++ b/tpl/views/text-field.pug
@@ -0,0 +1,22 @@
+mixin view-text-field 
+    +view('text-field', 'Text field')
+        .c-box
+            div(style={ display: 'flex', gap: '1rem' })
+                +text-field(placeholder='Placeholder')
+                +text-field(value='Just landed in L.A.')
+                +text-field(value='Readonly' readonly=true)
+                +text-field(value='Incorrect input' pattern='a+' required=true)
+            br
+            div(style={ display: 'flex', gap: '1rem' })
+                +text-field(placeholder='Placeholder' disabled=true)
+                +text-field(value='Just landed in L.A.' disabled=true)
+                +text-field(value='Readonly' readonly=true disabled=true)
+                +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
+            br
+            div
+                +text-field(placeholder='Just landed in L.A.')
+                    +slot('pre')
+                        +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
+                    +slot('post')
+                        +action-button(quiet=true icon='smile' class='l-card__block')
+                        +action-button(quiet=true icon='send' class='l-card__block')