2 files changed, 13 insertions, 12 deletions

diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index a2ff941..19439bb 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -3,9 +3,10 @@ include ../objects/status-indicator.pug
 mixin avatar
     -
         let classes = {
-            'o-avatar':         true,
-            'o-avatar--circle': attributes.circle,
-            'u-d-block':        attributes.block
+            'o-avatar':          true,
+            'o-avatar--colored': true,
+            'o-avatar--circle':  attributes.circle,
+            'u-d-block':         attributes.block
         }
         if (attributes.class) {
             classes[attributes.class] = true;
@@ -19,7 +20,7 @@ mixin avatar
             styles['--avatar--colors--h'] = attributes.hue;
         }
 
-    div(class=classes style=styles)
+    a(class=classes style=styles href=attributes.href)
         if attributes.status 
             +status-indicator(attributes.status)(class='o-avatar__status')
         if attributes.src 
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index 7941649..fcde68d 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -2,7 +2,7 @@ mixin view-avatar
     +view('avatar', 'Avatar')
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='150' hue=180)
+                +avatar(size='150' hue=180 href='#')
                     = 'Vo'
                 +avatar(size='150' hue=225)
                     = 'lp'
@@ -10,7 +10,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar
+                +avatar(href='#')
                     = 'Vo'
                 +avatar(status='green' hue=45)
                     = 'lp'
@@ -19,7 +19,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='75' hue=90)
+                +avatar(size='75' hue=90 href='#')
                     = 'eo'
                 +avatar(size='75' status='green' hue=135)
                     = 'n'
@@ -28,7 +28,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='50' hue=180)
+                +avatar(size='50' hue=180 href='#')
                     = 'V'
                 +avatar(size='50' hue=225)
                     = 'o'
@@ -36,7 +36,7 @@ mixin view-avatar
 
         .c-box
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='150' hue=180)
+                +avatar(circle=true size='150' hue=180 href='#')
                     = 'Vo'
                 +avatar(circle=true size='150' hue=225)
                     = 'lp'
@@ -44,7 +44,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true)
+                +avatar(circle=true href='#')
                     = 'Vo'
                 +avatar(circle=true status='green' hue=45)
                     = 'lp'
@@ -53,7 +53,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='75' hue=90)
+                +avatar(circle=true size='75' hue=90 href='#')
                     = 'eo'
                 +avatar(circle=true size='75' status='green' hue=135)
                     = 'n'
@@ -62,7 +62,7 @@ mixin view-avatar
             br
             br
             div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='50' hue=180)
+                +avatar(circle=true size='50' hue=180 href='#')
                     = 'V'
                 +avatar(circle=true size='50' hue=225)
                     = 'o'