1 files changed, 72 insertions, 0 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 2980016..206e40b 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -13,6 +13,8 @@ include objects/checkbox.pug
 include objects/switch.pug
 include objects/form.pug
 include objects/action-button.pug
+include objects/status-indicator.pug
+include objects/avatar.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -363,3 +365,73 @@ html
                 = ' '
                 +action-button(quiet=true icon='trash' selected=true disabled=true)
 
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Status indicator'
+            +rule(level='medium')
+
+            +box
+                +status-indicator
+                = ' '
+                +status-indicator('green')
+                = ' '
+                +status-indicator('yellow')
+                = ' '
+                +status-indicator('red')
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Avatar'
+            +rule(level='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='sm' hue=90)
+                        = 'eo'
+                    +avatar(size='sm' status='green' hue=135)
+                        = 'n'
+                    +avatar(size='sm' src='avatar.png')
+                    +avatar(size='sm' src='avatar.png' status='red')
+                br
+                br
+                div(style={ display: 'flex', gap: '.3em' })
+                    +avatar(size='xs' hue=180)
+                        = 'V'
+                    +avatar(size='xs' hue=225)
+                        = 'o'
+                    +avatar(size='xs' 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='sm' hue=90)
+                        = 'eo'
+                    +avatar(circle=true size='sm' status='green' hue=135)
+                        = 'n'
+                    +avatar(circle=true size='sm' src='avatar.png')
+                    +avatar(circle=true size='sm' src='avatar.png' status='red')
+                br
+                br
+                div(style={ display: 'flex', gap: '.3em' })
+                    +avatar(circle=true size='xs' hue=180)
+                        = 'V'
+                    +avatar(circle=true size='xs' hue=225)
+                        = 'o'
+                    +avatar(circle=true size='xs' src='avatar.png')