From 6a0626abf9d1ae17272673b1f302bcaae6132954 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 20 Aug 2026 13:36:27 +0300
Subject: [PATCH 1/4] refactor(avatar): simplify and update avatar samples with
 grid layout and consistent styling

---
 .../avatar-overview.component.html            |  95 ++++-----
 .../avatar-overview.component.scss            |  60 +++---
 .../avatar-shape/avatar-shape.component.html  |  98 ++++-----
 .../avatar-shape/avatar-shape.component.scss  | 113 ++++++----
 .../avatar-size/avatar-size.component.html    |  98 ++++-----
 .../avatar-size/avatar-size.component.scss    | 125 ++++++-----
 .../avatar-styling.component.html             | 128 ++++++-----
 .../avatar-styling.component.scss             |  40 ++--
 .../layouts/avatar/avatar-styling/layout.scss |   4 -
 .../avatar-tailwind-styling.component.html    | 198 +++++++++---------
 .../avatar-tailwind-styling.component.scss    |  33 +++
 .../avatar-variants.component.html            |  96 ++++-----
 .../avatar-variants.component.scss            |  93 +++++---
 13 files changed, 616 insertions(+), 565 deletions(-)
 delete mode 100644 src/app/layouts/avatar/avatar-styling/layout.scss

diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html
index e4b1ef8ff..9f7dd3a84 100644
--- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html
+++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html
@@ -1,56 +1,51 @@
-<div class="sample avatar-overview-sample">
+<!-- Simple avatar -->
+<igx-avatar
+    shape="circle"
+    size="large"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+
+<!-- Avatar + badge -->
+<igx-avatar
+    class="profile-status"
+    shape="circle"
+    size="large"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+    alt="A profile photo of a woman.">
+</igx-avatar>
+<igx-badge
+    class="status-badge"
+    dot
+    outlined
+    type="success">
+</igx-badge>
+
+<!-- Avatar stack -->
+<div class="avatar-stack" aria-label="Project members">
     <igx-avatar
-        class="size-large"
         shape="circle"
         size="large"
-        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+        alt="A profile photo of a animated kid.">
+    </igx-avatar>
+    <igx-avatar
+        shape="circle"
+        size="large"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
         alt="A profile photo of a man.">
     </igx-avatar>
-
-    <span class="avatar-with-badge">
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-badge
-            class="avatar-status size-large"
-            dot
-            outlined
-            type="success">
-        </igx-badge>
-    </span>
-
-    <span class="avatar-stack" aria-label="Project members">
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            initials="+3"
-            alt="Three additional project members.">
-        </igx-avatar>
-    </span>
+    <igx-avatar
+        shape="circle"
+        size="large"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
+        alt="A profile photo of a abstract flat cat.">
+    </igx-avatar>
+    <igx-avatar
+        shape="circle"
+        size="large"
+        initials="+3"
+        alt="Three additional project members.">
+    </igx-avatar>
 </div>
+
diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
index fbf75d273..8d41b7afb 100644
--- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
+++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
@@ -1,47 +1,39 @@
-.avatar-overview-sample {
+:host {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    width: 100%;
-    min-height: 100vh;
+    place-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+    max-width: fit-content;
+    margin: 0 auto;
+    height: 100vh;
+    padding: 2rem;
 }
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
+.profile-status {
+    anchor-name: --profile-status;
 }
 
-.avatar-status {
+.status-badge {
     position: absolute;
-    right: 6px;
-    bottom: 6px;
+    position-anchor: --profile-status;
+    inset-block-start: anchor(85%);
+    inset-inline-start: anchor(85%);
+    translate: -50% -50%;
 }
 
 .avatar-stack {
-    display: inline-flex;
-    align-items: center;
-}
-
-.avatar-stack .size-large {
-    margin-left: -24px;
-}
-
-.avatar-stack .size-large:first-child {
-    margin-left: 0;
-}
+    display: flex;
 
-.avatar-stack .igx-avatar {
-    border: 4px solid #fff;
-    box-sizing: border-box;
-}
+    > igx-avatar:not(:first-child) {
+        margin-left: -24px;
+    }
 
-.avatar-stack .size-large:last-child {
-    --ig-avatar-background: #e8eef6;
-    --ig-avatar-color: #6f8097;
-}
+    > *:last-child {
+        --ig-avatar-background: #e8eef6;
+        --ig-avatar-color: #6f8097;
+    }
 
-.avatar-stack .size-large:last-child .igx-avatar__initials {
-    font-size: 32px;
-    font-weight: 500;
+    igx-avatar {
+        box-shadow: 0 0 0 .4rem var(--ig-surface-500);
+    }
 }
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
index 88c355153..dcb5aa753 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
@@ -1,56 +1,46 @@
-<div class="sample avatar-shape-sample">
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="circle"
-                size="small"
-                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-                alt="A profile photo of a man.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-dot-badge size-small"
-                dot
-                outlined
-                type="success">
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Circle</span>
-    </div>
+<!-- Avatar Circle -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    class="profile-status profile-status--circle"
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span class="label label--circle">Circle</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar class="size-small" shape="square" size="small">
-                <igx-icon name="mail" collection="material"></igx-icon>
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-count-badge size-small"
-                outlined
-                shape="square"
-                type="info">
-                2
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Square</span>
-    </div>
+<!-- Avatar Square -->
+<igx-avatar
+    shape="square"
+    size="small">
+    <igx-icon name="mail" collection="material"></igx-icon>
+</igx-avatar>
+<igx-badge
+    class="profile-status profile-status--square"
+    outlined
+    shape="square"
+    type="info">
+    2
+</igx-badge>
+<span class="label label--square">Square</span>
+
+<!-- Avatar Rounded -->
+<igx-avatar
+    shape="rounded"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    class="profile-status profile-status--rounded"
+    outlined
+    shape="rounded"
+    type="success">
+    <igx-icon name="check" collection="material"></igx-icon>
+</igx-badge>
+<span class="label label--rounded">Rounded</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="rounded"
-                size="small"
-                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-                alt="A profile photo of a man.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-check-badge size-small"
-                outlined
-                shape="rounded"
-                type="success">
-                <igx-icon name="check" collection="material"></igx-icon>
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Rounded</span>
-    </div>
-</div>
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
index 78ac1f205..565ec1bae 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
@@ -1,48 +1,81 @@
-.avatar-shape-sample {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    min-height: 100vh;
-}
+@use "igniteui-theming/sass/typography" as *;
 
-.avatar-variant {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-}
+:host {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    justify-items: center;
+    place-content: center;
+    column-gap: rem(40px);
+    row-gap: rem(8px);
+    flex-wrap: wrap;
+    max-width: fit-content;
+    margin: 0 auto;
+    height: 100vh;
+    padding: rem(32px);
 
-.avatar-label {
-    color: var(--ig-gray-600);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
+    igx-avatar {
+        grid-row: 1;
+    }
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
-}
+    span {
+        grid-row: 2;
+        text-align: center;
+        color: var(--ig-gray-600);
+        font-size: var(--ig-detail-1-font-size);
+        font-weight: var(--ig-detail-1-font-weight);
+        font-style: var(--ig-detail-1-font-style);
+        line-height: var(--ig-detail-1-line-height);
+        letter-spacing: var(--ig-detail-1-letter-spacing);
+        text-transform: var(--ig-detail-1-text-transform);
+    }
 
-.avatar-status {
-    --size: 18px;
-    position: absolute;
-    right: -4px;
-    bottom: -4px;
-    font-size: 0.75rem;
-    line-height: 1;
-}
+    igx-avatar:nth-of-type(1) {
+        grid-column: 1;
+        anchor-name: --circle-anchor;
+    }
 
-.avatar-dot-badge {
-    --size: 12px;
-    right: 3px;
-    bottom: 3px;
-}
+    igx-avatar:nth-of-type(2) {
+        grid-column: 2;
+        anchor-name: --square-anchor;
+    }
 
-.avatar-count-badge {
-    --ig-badge-text-color: #ffffff;
-}
+    igx-avatar:nth-of-type(3) {
+        grid-column: 3;
+        anchor-name: --rounded-anchor;
+    }
+
+    span:nth-of-type(1) {
+        grid-column: 1;
+    }
 
-.avatar-check-badge {
-    --ig-badge-icon-color: #ffffff;
+    span:nth-of-type(2) {
+        grid-column: 2;
+    }
+
+    span:nth-of-type(3) {
+        grid-column: 3;
+    }
+
+    igx-badge {
+        --ig-size: var(--ig-size-small);
+
+        position: absolute;
+        inset-block-start: anchor(85.5%);
+        inset-inline-start: anchor(85.5%);
+        translate: -50% -50%;
+    }
+
+    igx-badge:nth-of-type(1) {
+        position-anchor: --circle-anchor;
+    }
+
+    igx-badge:nth-of-type(2) {
+        position-anchor: --square-anchor;
+    }
+
+    igx-badge:nth-of-type(3) {
+        position-anchor: --rounded-anchor;
+    }
 }
+
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.html b/src/app/layouts/avatar/avatar-size/avatar-size.component.html
index 5b16e53d1..be7a2c62b 100644
--- a/src/app/layouts/avatar/avatar-size/avatar-size.component.html
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.html
@@ -1,61 +1,41 @@
-<div class="sample avatar-size-sample">
-    <div class="avatar-size">
-        <span class="avatar-frame avatar-frame-large">
-            <span class="avatar-with-badge">
-                <igx-avatar
-                    shape="circle"
-                    size="large"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png"
-                    alt="A profile photo of a man.">
-                </igx-avatar>
-                <igx-badge
-                    class="avatar-status avatar-dot-badge avatar-dot-badge-large"
-                    dot
-                    outlined
-                    type="success">
-                </igx-badge>
-            </span>
-        </span>
-        <span class="avatar-label">Large</span>
-    </div>
+<!-- Avatar large size -->
+<igx-avatar
+    shape="circle"
+    size="large"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Large</span>
 
-    <div class="avatar-size">
-        <span class="avatar-frame avatar-frame-medium">
-            <span class="avatar-with-badge">
-                <igx-avatar
-                    shape="circle"
-                    size="medium"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
-                    alt="A profile photo of a man.">
-                </igx-avatar>
-                <igx-badge
-                    class="avatar-status avatar-dot-badge avatar-dot-badge-medium"
-                    dot
-                    outlined
-                    type="success">
-                </igx-badge>
-            </span>
-        </span>
-        <span class="avatar-label">Medium</span>
-    </div>
+<!-- Avatar medium size -->
+<igx-avatar
+    shape="circle"
+    size="medium"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Medium</span>
 
-    <div class="avatar-size">
-        <span class="avatar-frame avatar-frame-small">
-            <span class="avatar-with-badge">
-                <igx-avatar
-                    shape="circle"
-                    size="small"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
-                    alt="A profile photo of a man.">
-                </igx-avatar>
-                <igx-badge
-                    class="avatar-status avatar-dot-badge avatar-dot-badge-small"
-                    dot
-                    outlined
-                    type="success">
-                </igx-badge>
-            </span>
-        </span>
-        <span class="avatar-label">Small</span>
-    </div>
-</div>
+<!-- Avatar small size -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Small</span>
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
index 5d2dcdb74..eb0196e66 100644
--- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
@@ -1,69 +1,82 @@
-.avatar-size-sample {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    min-height: 100vh;
-}
+@use "igniteui-theming/sass/typography" as *;
 
-.avatar-size {
-    display: inline-flex;
-    flex-direction: column;
+:host {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    justify-items: center;
     align-items: center;
-    gap: 8px;
-}
+    place-content: center;
+    column-gap: rem(48px);
+    row-gap: rem(8px);
+    flex-wrap: wrap;
+    max-width: fit-content;
+    margin: 0 auto;
+    height: 100vh;
+    padding: rem(32px);
 
-.avatar-frame {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
+    igx-avatar {
+        grid-row: 1;
+    }
 
-.avatar-frame-large {
-    width: 72px;
-    height: 72px;
-}
+    span {
+        grid-row: 2;
+        text-align: center;
+        color: var(--ig-gray-600);
+        font-size: var(--ig-detail-1-font-size);
+        font-weight: var(--ig-detail-1-font-weight);
+        font-style: var(--ig-detail-1-font-style);
+        line-height: var(--ig-detail-1-line-height);
+        letter-spacing: var(--ig-detail-1-letter-spacing);
+        text-transform: var(--ig-detail-1-text-transform);
+    }
 
-.avatar-frame-medium {
-    width: 72px;
-    height: 72px;
-}
+    igx-avatar:nth-of-type(1) {
+        grid-column: 1;
+        anchor-name: --circle-anchor;
+    }
 
-.avatar-frame-small {
-    width: 72px;
-    height: 72px;
-}
+    igx-avatar:nth-of-type(2) {
+        grid-column: 2;
+        anchor-name: --square-anchor;
+    }
 
-.avatar-label {
-    color: var(--ig-gray-600);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
+    igx-avatar:nth-of-type(3) {
+        grid-column: 3;
+        anchor-name: --rounded-anchor;
+    }
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
-}
+    span:nth-of-type(1) {
+        grid-column: 1;
+    }
 
-.avatar-status {
-    position: absolute;
-    line-height: 1;
-}
+    span:nth-of-type(2) {
+        grid-column: 2;
+    }
 
-.avatar-dot-badge-large {
-    --size: 16px;
-    right: 3px;
-    bottom: 3px;
-}
+    span:nth-of-type(3) {
+        grid-column: 3;
+    }
 
-.avatar-dot-badge-medium {
-    --size: 14px;
-    right: 2px;
-    bottom: 2px;
-}
+    igx-badge {
+        --ig-size: var(--ig-size-small);
 
-.avatar-dot-badge-small {
-    --size: 12px;
-    right: 1px;
-    bottom: 1px;
+        position: absolute;
+        inset-block-start: anchor(85.5%);
+        inset-inline-start: anchor(85.5%);
+        translate: -50% -50%;
+    }
+
+    igx-badge:nth-of-type(1) {
+        position-anchor: --circle-anchor;
+    }
+
+    igx-badge:nth-of-type(2) {
+        position-anchor: --square-anchor;
+    }
+
+    igx-badge:nth-of-type(3) {
+        position-anchor: --rounded-anchor;
+    }
 }
+
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
index 07510f6c3..e7e7ef090 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
@@ -1,71 +1,69 @@
-<div class="sample avatar-styling-sample">
-    <igx-list class="chat-list">
-        <igx-list-item [isHeader]="true">Chats</igx-list-item>
+<igx-list class="chat-list">
+    <igx-list-item [isHeader]="true">Chats</igx-list-item>
 
-        <igx-list-item>
-            <div igxListThumbnail class="avatar-with-badge">
-                <igx-avatar
-                    class="size-small"
-                    shape="circle"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-                    alt="A profile photo of Nick Evans.">
-                </igx-avatar>
-                <igx-badge class="avatar-status avatar-check-badge size-small" outlined shape="rounded" type="success">
-                    <igx-icon name="check" collection="material"></igx-icon>
-                </igx-badge>
-            </div>
-            <h2 igxListLineTitle>Nick Evans</h2>
-            <span igxListLineSubTitle>Hi Samira, thanks for the ...</span>
-            <span igxListAction>9:44 AM</span>
-        </igx-list-item>
+    <igx-list-item>
+        <div igxListThumbnail class="avatar-with-badge">
+            <igx-avatar
+                class="profile-avatar"
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+                alt="A profile photo of Nick Evans.">
+            </igx-avatar>
+            <igx-badge class="avatar-status" outlined shape="rounded" type="success">
+                <igx-icon name="check" collection="material"></igx-icon>
+            </igx-badge>
+        </div>
+        <p igxListLineTitle>Nick Evans</p>
+        <span igxListLineSubTitle>Hi Samira, thanks for the ...</span>
+        <span igxListAction>9:44 AM</span>
+    </igx-list-item>
 
-        <igx-list-item>
-            <div igxListThumbnail class="avatar-with-badge">
-                <igx-avatar class="avatar-muted size-small" shape="circle" initials="JF" alt="James Ford initials."></igx-avatar>
-                <igx-badge class="avatar-status avatar-check-badge avatar-muted-badge size-small" outlined shape="rounded" type="primary">
-                    <igx-icon name="x" collection="material"></igx-icon>
-                </igx-badge>
-            </div>
-            <h2 igxListLineTitle>James Ford</h2>
-            <span igxListLineSubTitle>I'll send the text and im ...</span>
-            <span igxListAction>8:30 AM</span>
-        </igx-list-item>
+    <igx-list-item>
+        <div igxListThumbnail class="avatar-with-badge">
+            <igx-avatar class="avatar-muted profile-avatar" shape="circle" initials="JF" alt="James Ford initials."></igx-avatar>
+            <igx-badge class="avatar-status avatar-muted-badge" outlined shape="rounded">
+                <igx-icon name="x" collection="material"></igx-icon>
+            </igx-badge>
+        </div>
+        <p igxListLineTitle>James Ford</p>
+        <span igxListLineSubTitle>I'll send the text and im ...</span>
+        <span igxListAction>8:30 AM</span>
+    </igx-list-item>
 
-        <igx-list-item>
-            <div igxListThumbnail class="avatar-with-badge">
-                <igx-avatar
-                    class="size-small"
-                    shape="circle"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
-                    alt="A profile photo of Kate Porter.">
-                </igx-avatar>
-                <igx-badge class="avatar-status avatar-check-badge size-small" outlined shape="rounded" type="danger">
-                    <igx-icon name="horizontalRule" collection="material"></igx-icon>
-                </igx-badge>
-            </div>
-            <h2 igxListLineTitle>Kate Porter</h2>
-            <span igxListLineSubTitle>That's great!</span>
-            <span igxListAction>Yesterday</span>
-        </igx-list-item>
+    <igx-list-item>
+        <div igxListThumbnail class="avatar-with-badge">
+            <igx-avatar
+                class="profile-avatar"
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
+                alt="A profile photo of Kate Porter.">
+            </igx-avatar>
+            <igx-badge class="avatar-status" outlined shape="rounded" type="error">
+                <igx-icon name="horizontalRule" collection="material"></igx-icon>
+            </igx-badge>
+        </div>
+        <p igxListLineTitle>Kate Porter</p>
+        <span igxListLineSubTitle>That's great!</span>
+        <span igxListAction>Yesterday</span>
+    </igx-list-item>
 
-        <igx-list-item [isHeader]="true">Meetings</igx-list-item>
+    <igx-list-item [isHeader]="true">Meetings</igx-list-item>
 
-        <igx-list-item>
-            <igx-avatar igxListThumbnail class="size-small" shape="circle" alt="Calendar icon.">
-                <igx-icon name="calendar" collection="material"></igx-icon>
-            </igx-avatar>
-            <h2 igxListLineTitle>Weekly Meeting</h2>
-            <span igxListLineSubTitle>https://www.infra.com</span>
-            <span igxListAction>Monday</span>
-        </igx-list-item>
+    <igx-list-item>
+        <igx-avatar igxListThumbnail class="profile-avatar" shape="circle" alt="Calendar icon.">
+            <igx-icon name="calendar" collection="material"></igx-icon>
+        </igx-avatar>
+        <p igxListLineTitle>Weekly Meeting</p>
+        <span igxListLineSubTitle>https://www.infra.com</span>
+        <span igxListAction>Monday</span>
+    </igx-list-item>
 
-        <igx-list-item>
-            <igx-avatar igxListThumbnail class="size-small" shape="circle" alt="Group icon.">
-                <igx-icon name="group" collection="material"></igx-icon>
-            </igx-avatar>
-            <h2 igxListLineTitle>Design Discussion</h2>
-            <span igxListLineSubTitle>https://www.infra.com</span>
-            <span igxListAction>11:30 AM</span>
-        </igx-list-item>
-    </igx-list>
-</div>
+    <igx-list-item>
+        <igx-avatar igxListThumbnail class="profile-avatar" shape="circle" alt="Group icon.">
+            <igx-icon name="group" collection="material"></igx-icon>
+        </igx-avatar>
+        <p igxListLineTitle>Design Discussion</p>
+        <span igxListLineSubTitle>https://www.infra.com</span>
+        <span igxListAction>11:30 AM</span>
+    </igx-list-item>
+</igx-list>
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
index 13d20bb3f..8001ff67f 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -1,35 +1,43 @@
-.avatar-styling-sample {
+:host {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100vh;
+
+    igx-badge {
+        --ig-size: var(--ig-size-small);
+    }
+
+    igx-avatar {
+        --background: var(--ig-gray-300);
+        --color: var(--ig-gray-300-contrast);
+    }
+
+    igx-avatar.avatar-muted {
+        --background: var(--ig-gray-800);
+        --color: var(--ig-gray-800-contrast);
+    }
 }
 
 .chat-list {
-    width: 344px;
-    max-width: 100%;
-}
+    --border-width: #{rem(1px)};
+    --border-color: var(--ig-gray-300);
+    --header-text-color: var(--ig-gray-900);
 
-.size-small {
-    --ig-size: var(--ig-size-small);
+    max-width: rem(328px);
 }
 
 .avatar-with-badge {
     position: relative;
-    display: inline-flex;
 }
 
 .avatar-status {
-    --ig-badge-icon-color: #ffffff;
     position: absolute;
-    right: -4px;
-    bottom: -4px;
+    inset-inline-end: rem(-4px);
+    inset-block-end: rem(-4px);
 }
 
 .avatar-muted-badge {
-    --ig-badge-background-color: var(--ig-gray-300);
-    --ig-badge-icon-color: var(--ig-gray-700);
-}
-
-.avatar-muted {
-    --ig-avatar-background: #D2DBE8;
+    --background-color: var(--ig-gray-300);
+    --icon-color: var(--ig-gray-300-contrast);
 }
diff --git a/src/app/layouts/avatar/avatar-styling/layout.scss b/src/app/layouts/avatar/avatar-styling/layout.scss
deleted file mode 100644
index d3a420849..000000000
--- a/src/app/layouts/avatar/avatar-styling/layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-  display: inline-flex;
-  gap: 32px
-}
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index 79cd59492..4b6e8be4d 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1,111 +1,105 @@
-<div class="sample flex min-h-screen w-full flex-row flex-nowrap items-center justify-center gap-10">
-    <igx-card class="box-border h-[479px] w-[344px] [--ig-card-border-radius:30px]">
-        <igx-card-media class="h-[189px] overflow-hidden">
-            <img
-                class="h-full w-full object-cover"
-                src="https://dl.infragistics.com/x/img/avatars/image-bg4.png"
-                alt="Cafe interior" />
-        </igx-card-media>
+<igx-card class="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+    <igx-card-media class="h-[189px]">
+        <img
+        class="object-cover"
+        src="https://dl.infragistics.com/x/img/avatars/image-bg4.png"
+        alt="Cafe interior" />
+    </igx-card-media>
+    <igx-card-header>
+        <igx-avatar
+            igxCardThumbnail
+            shape="circle"
+            size="medium"
+            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
+            alt="A profile photo of Kate Thompson.">
+        </igx-avatar>
+        <span igxCardHeaderTitle>Kate Thompson</span>
+        <p class="card-sample-custom-subtitle">3D Artist. Turning polygons into worlds and immersive digital realities</p>
 
-        <igx-card-header>
+    </igx-card-header>
+    <igx-card-content>
+        <div class="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
+            @for (stat of profileStats; track stat.label; let isLast = $last) {
+                <div class="flex min-w-0 flex-col items-center gap-1 px-3">
+                    <span class="stats-title">{{ stat.value }}</span>
+                    <span class="stats-subtitle">{{ stat.label }}</span>
+                </div>
+                @if (!isLast) {
+                    <igx-divider class="h-12" vertical></igx-divider>
+                }
+            }
+        </div>
+    </igx-card-content>
+    <igx-card-actions>
+        <button
+            igxButton="contained"
+            class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
+            <span class="inline-flex items-center gap-1">
+                FOLLOW
+                <igx-icon name="plus" collection="material"></igx-icon>
+            </span>
+        </button>
+        <div igxEnd class="inline-flex gap-1">
+            <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
+                <igx-icon name="instagram" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
+                <igx-icon name="bereal" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
+                <igx-icon name="threads" collection="material"></igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
+<igx-card class="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+    <igx-card-header>
+        <span igxCardThumbnail
+            class="inline-flex rounded-full p-[5px] bg-[linear-gradient(40deg,#D2F586,#A0C9FF)]">
             <igx-avatar
-                igxCardThumbnail
-                class="[--ig-size:var(--ig-size-medium)]"
+                size="medium"
                 shape="circle"
                 src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
                 alt="A profile photo of Kate Thompson.">
             </igx-avatar>
-            <span igxCardHeaderTitle>Kate Thompson</span>
-        </igx-card-header>
-
-        <igx-card-content>
-            <p class="m-0">3D Artist. Turning polygons into worlds and immersive digital realities</p>
-            <div class="mt-4 grid w-full grid-cols-[1fr_auto_1fr_auto_1fr] items-center">
-                @for (stat of profileStats; track stat.label; let isLast = $last) {
-                    <div class="flex min-w-0 flex-col items-center gap-1 px-3">
-                        <span class="text-base font-bold leading-tight text-[var(--ig-gray-900)]">{{ stat.value }}</span>
-                        <span class="text-sm leading-tight text-[var(--ig-gray-600)]">{{ stat.label }}</span>
-                    </div>
-                    @if (!isLast) {
-                        <igx-divider class="h-12" vertical></igx-divider>
-                    }
+        </span>
+        <span igxCardHeaderTitle>Kate Thompson</span>
+        <p class="card-sample-custom-subtitle">3D Artist. Turning polygons into worlds and immersive digital realities</p>
+    </igx-card-header>
+    <igx-card-content>
+        <div class="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
+            @for (stat of profileStats; track stat.label; let isLast = $last) {
+                <div class="flex min-w-0 flex-col items-center gap-1 px-3">
+                    <span class="stats-title">{{ stat.value }}</span>
+                    <span class="stats-subtitle">{{ stat.label }}</span>
+                </div>
+                @if (!isLast) {
+                    <igx-divider class="h-12" vertical></igx-divider>
                 }
-            </div>
-        </igx-card-content>
-
-        <igx-card-actions>
-            <button
-                igxButton="contained"
-                class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
-                <span class="inline-flex items-center gap-1">
-                    FOLLOW
-                    <igx-icon class="h-4 w-4" name="plus" collection="material"></igx-icon>
-                </span>
-            </button>
-            <div igxEnd class="inline-flex items-center gap-1">
-                <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
-                    <igx-icon name="instagram" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
-                    <igx-icon name="bereal" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
-                    <igx-icon name="threads" collection="material"></igx-icon>
-                </button>
-            </div>
-        </igx-card-actions>
-    </igx-card>
-
-    <igx-card class="box-border h-[290px] w-[344px] [--ig-card-border-radius:30px]">
-        <igx-card-header>
-            <span
-                igxCardThumbnail
-                class="inline-flex rounded-full bg-[linear-gradient(135deg,#7dd3fc,#bff47a,#f5c2ff,#93c5fd)] p-[3px]">
-                <igx-avatar
-                    class="[--ig-size:var(--ig-size-medium)]"
-                    shape="circle"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
-                    alt="A profile photo of Kate Thompson.">
-                </igx-avatar>
+            }
+        </div>
+    </igx-card-content>
+    <igx-card-actions >
+        <button
+            igxButton="contained"
+            class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
+            <span class="inline-flex items-center gap-1">
+                <span>FOLLOW</span>
+                <igx-icon name="plus" collection="material"></igx-icon>
             </span>
-            <span igxCardHeaderTitle>Kate Thompson</span>
-        </igx-card-header>
-
-        <igx-card-content class="overflow-hidden">
-            <p class="m-0">3D Artist. Turning polygons into worlds and immersive digital realities</p>
-            <div class="mt-4 grid w-full grid-cols-[1fr_auto_1fr_auto_1fr] items-center">
-                @for (stat of profileStats; track stat.label; let isLast = $last) {
-                    <div class="flex min-w-0 flex-col items-center gap-1 px-3">
-                        <span class="text-base font-bold leading-tight text-[var(--ig-gray-900)]">{{ stat.value }}</span>
-                        <span class="text-sm leading-tight text-[var(--ig-gray-600)]">{{ stat.label }}</span>
-                    </div>
-                    @if (!isLast) {
-                        <igx-divider class="h-12" vertical></igx-divider>
-                    }
-                }
-            </div>
-        </igx-card-content>
-
-        <igx-card-actions>
-            <button
-                igxButton="contained"
-                class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
-                <span class="inline-flex items-center gap-1">
-                    FOLLOW
-                    <igx-icon class="h-4 w-4" name="plus" collection="material"></igx-icon>
-                </span>
+        </button>
+        <div igxEnd class="inline-flex items-center gap-1">
+            <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
+                <igx-icon name="instagram" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
+                <igx-icon name="bereal" collection="material"></igx-icon>
             </button>
-            <div igxEnd class="inline-flex items-center gap-1">
-                <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
-                    <igx-icon name="instagram" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
-                    <igx-icon name="bereal" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
-                    <igx-icon name="threads" collection="material"></igx-icon>
-                </button>
-            </div>
-        </igx-card-actions>
-    </igx-card>
-</div>
+            <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
+                <igx-icon name="threads" collection="material"></igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
index 7f26ddcb5..ea7083981 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
@@ -1,3 +1,36 @@
+@use "igniteui-theming/sass/typography" as *;
+
 :host {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, rem(344px));
+    gap: rem(40px);
+    place-content: center;
+    height: 100vh;
+}
+
+igx-card:nth-of-type(2) {
+    align-self: center;
+}
+
+.card-sample-custom-subtitle {
     display: block;
+    color: var(--ig-gray-700);
+
+    @include type-style("body-2") {
+        margin-block-start: rem(8px);
+    };
+}
+
+.stats-title {
+    color: var(--ig-gray-900);
+
+    @include type-style("subtitle-1") {
+        font-weight: 600;
+    };
+}
+
+.stats-subtitle {
+    color: var(--ig-gray-500);
+
+    @include type-style("body-2");
 }
diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html
index 438406536..6ac275898 100644
--- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html
+++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html
@@ -1,56 +1,44 @@
-<div class="sample avatar-variants-sample">
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="circle"
-                size="small"
-                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
-                alt="A profile photo of a man.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-dot-badge size-small"
-                dot
-                outlined
-                type="success">
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Image</span>
-    </div>
+<!-- Avatar with image -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Image</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar class="size-small" shape="circle" size="small">
-                <igx-icon name="mail" collection="material"></igx-icon>
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-count-badge size-small"
-                outlined
-                shape="rounded"
-                type="info">
-                2
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Icon</span>
-    </div>
+<!-- Avatar with icon -->
+<igx-avatar
+    shape="circle"
+    size="small"
+>
+    <igx-icon name="mail" collection="material"></igx-icon>
+</igx-avatar>
+<igx-badge
+    outlined
+    shape="rounded"
+    type="info">
+    2
+</igx-badge>
+<span>Icon</span>
+
+<!-- Avatar with initials -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    initials="AZ"
+    alt="Avatar with AZ initials.">
+</igx-avatar>
+<igx-badge
+    outlined
+    shape="rounded"
+    type="success">
+    <igx-icon name="check" collection="material"></igx-icon>
+</igx-badge>
+<span>Initials</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="circle"
-                size="small"
-                initials="AZ"
-                alt="Avatar with AZ initials.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-check-badge size-small"
-                outlined
-                shape="rounded"
-                type="success">
-                <igx-icon name="check" collection="material"></igx-icon>
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Initials</span>
-    </div>
-</div>
diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
index 355ff7df2..58ea36566 100644
--- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
+++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
@@ -1,48 +1,79 @@
-.avatar-variants-sample {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    min-height: 100vh;
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    justify-items: center;
+    place-content: center;
+    column-gap: rem(48px);
+    row-gap: rem(8px);
+    flex-wrap: wrap;
+    max-width: fit-content;
+    margin: 0 auto;
+    height: 100vh;
+    padding: rem(32px);
 }
 
-.avatar-variant {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+igx-avatar {
+    grid-row: 1;
 }
 
-.avatar-label {
+span {
+    grid-row: 2;
+    text-align: center;
     color: var(--ig-gray-600);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    font-size: var(--ig-detail-1-font-size);
+    font-weight: var(--ig-detail-1-font-weight);
+    font-style: var(--ig-detail-1-font-style);
+    line-height: var(--ig-detail-1-line-height);
+    letter-spacing: var(--ig-detail-1-letter-spacing);
+    text-transform: var(--ig-detail-1-text-transform);
+}
+
+igx-avatar:nth-of-type(1) {
+    grid-column: 1;
+    anchor-name: --circle-anchor;
+}
+
+igx-avatar:nth-of-type(2) {
+    grid-column: 2;
+    anchor-name: --square-anchor;
+}
+
+igx-avatar:nth-of-type(3) {
+    grid-column: 3;
+    anchor-name: --rounded-anchor;
+}
+
+span:nth-of-type(1) {
+    grid-column: 1;
+}
+
+span:nth-of-type(2) {
+    grid-column: 2;
 }
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
+span:nth-of-type(3) {
+    grid-column: 3;
 }
 
-.avatar-status {
-    --size: 18px;
+igx-badge {
+    --ig-size: 1;
     position: absolute;
-    right: -4px;
-    bottom: -4px;
-    font-size: 0.75rem;
-    line-height: 1;
+    inset-block-start: anchor(85.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
 }
 
-.avatar-dot-badge {
-    --size: 12px;
-    right: 3px;
-    bottom: 3px;
+igx-badge:nth-of-type(1) {
+    position-anchor: --circle-anchor;
 }
 
-.avatar-count-badge {
-    --ig-badge-text-color: #ffffff;
+igx-badge:nth-of-type(2) {
+    position-anchor: --square-anchor;
 }
 
-.avatar-check-badge {
-    --ig-badge-icon-color: #ffffff;
+igx-badge:nth-of-type(3) {
+    position-anchor: --rounded-anchor;
 }

From 22b2bc7d2cc3d3cbec287ec4a6837e2c814ee830 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 20 Aug 2026 14:25:42 +0300
Subject: [PATCH 2/4] refactor(avatar): enhance layout and styling for avatar
 components

---
 .../avatar-overview.component.scss            | 29 +++---
 .../avatar-shape/avatar-shape.component.html  | 10 +-
 .../avatar-shape/avatar-shape.component.scss  | 90 +++++++-----------
 .../avatar-size/avatar-size.component.scss    | 92 +++++++------------
 .../avatar-styling.component.scss             | 32 ++++---
 .../avatar-variants.component.scss            | 68 +++++---------
 6 files changed, 119 insertions(+), 202 deletions(-)

diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
index 8d41b7afb..6f1aecb3f 100644
--- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
+++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
@@ -1,12 +1,13 @@
+@use "igniteui-theming/sass/typography" as *;
+
 :host {
     display: flex;
-    place-items: center;
-    gap: 2rem;
     flex-wrap: wrap;
-    max-width: fit-content;
-    margin: 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: rem(32px);
     height: 100vh;
-    padding: 2rem;
+    padding: rem(32px);
 }
 
 .profile-status {
@@ -24,16 +25,16 @@
 .avatar-stack {
     display: flex;
 
-    > igx-avatar:not(:first-child) {
-        margin-left: -24px;
-    }
+    igx-avatar {
+        box-shadow: 0 0 0 rem(6px) var(--ig-surface-500);
 
-    > *:last-child {
-        --ig-avatar-background: #e8eef6;
-        --ig-avatar-color: #6f8097;
-    }
+        + igx-avatar {
+            margin-inline-start: rem(-24px);
+        }
 
-    igx-avatar {
-        box-shadow: 0 0 0 .4rem var(--ig-surface-500);
+        &:last-child {
+            --ig-avatar-background: #e8eef6;
+            --ig-avatar-color: #6f8097;
+        }
     }
 }
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
index dcb5aa753..261085c24 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
@@ -6,12 +6,11 @@
     alt="A profile photo of a man.">
 </igx-avatar>
 <igx-badge
-    class="profile-status profile-status--circle"
     dot
     outlined
     type="success">
 </igx-badge>
-<span class="label label--circle">Circle</span>
+<span>Circle</span>
 
 <!-- Avatar Square -->
 <igx-avatar
@@ -20,13 +19,12 @@
     <igx-icon name="mail" collection="material"></igx-icon>
 </igx-avatar>
 <igx-badge
-    class="profile-status profile-status--square"
     outlined
     shape="square"
     type="info">
     2
 </igx-badge>
-<span class="label label--square">Square</span>
+<span>Square</span>
 
 <!-- Avatar Rounded -->
 <igx-avatar
@@ -36,11 +34,9 @@
     alt="A profile photo of a man.">
 </igx-avatar>
 <igx-badge
-    class="profile-status profile-status--rounded"
     outlined
     shape="rounded"
     type="success">
     <igx-icon name="check" collection="material"></igx-icon>
 </igx-badge>
-<span class="label label--rounded">Rounded</span>
-
+<span>Rounded</span>
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
index 565ec1bae..07248577e 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
@@ -1,81 +1,53 @@
+@use "sass:list";
 @use "igniteui-theming/sass/typography" as *;
 
+$avatars: circle, square, rounded;
+
 :host {
     display: grid;
     grid-auto-flow: column;
     grid-template-rows: auto auto;
-    justify-items: center;
     place-content: center;
+    place-items: center;
     column-gap: rem(40px);
     row-gap: rem(8px);
-    flex-wrap: wrap;
-    max-width: fit-content;
-    margin: 0 auto;
     height: 100vh;
     padding: rem(32px);
+}
 
-    igx-avatar {
-        grid-row: 1;
-    }
-
-    span {
-        grid-row: 2;
-        text-align: center;
-        color: var(--ig-gray-600);
-        font-size: var(--ig-detail-1-font-size);
-        font-weight: var(--ig-detail-1-font-weight);
-        font-style: var(--ig-detail-1-font-style);
-        line-height: var(--ig-detail-1-line-height);
-        letter-spacing: var(--ig-detail-1-letter-spacing);
-        text-transform: var(--ig-detail-1-text-transform);
-    }
-
-    igx-avatar:nth-of-type(1) {
-        grid-column: 1;
-        anchor-name: --circle-anchor;
-    }
-
-    igx-avatar:nth-of-type(2) {
-        grid-column: 2;
-        anchor-name: --square-anchor;
-    }
-
-    igx-avatar:nth-of-type(3) {
-        grid-column: 3;
-        anchor-name: --rounded-anchor;
-    }
-
-    span:nth-of-type(1) {
-        grid-column: 1;
-    }
+// :where() keeps the sample's own rules at zero specificity
+:where(igx-avatar) {
+    grid-row: 1;
+}
 
-    span:nth-of-type(2) {
-        grid-column: 2;
-    }
+:where(span) {
+    grid-row: 2;
+    text-align: center;
+    color: var(--ig-gray-600);
 
-    span:nth-of-type(3) {
-        grid-column: 3;
-    }
+    @include type-style("body-1") {
+        margin: 0;
+    };
+}
 
-    igx-badge {
-        --ig-size: var(--ig-size-small);
+:where(igx-badge) {
+    --ig-size: var(--ig-size-small);
 
-        position: absolute;
-        inset-block-start: anchor(85.5%);
-        inset-inline-start: anchor(85.5%);
-        translate: -50% -50%;
-    }
+    position: absolute;
+    inset-block-start: anchor(85.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
+}
 
-    igx-badge:nth-of-type(1) {
-        position-anchor: --circle-anchor;
-    }
+// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
+@each $avatar in $avatars {
+    $i: list.index($avatars, $avatar);
 
-    igx-badge:nth-of-type(2) {
-        position-anchor: --square-anchor;
+    igx-avatar:nth-of-type(#{$i}) {
+        anchor-name: --#{$avatar};
     }
 
-    igx-badge:nth-of-type(3) {
-        position-anchor: --rounded-anchor;
+    igx-badge:nth-of-type(#{$i}) {
+        position-anchor: --#{$avatar};
     }
 }
-
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
index eb0196e66..c90c29010 100644
--- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
@@ -1,82 +1,52 @@
+@use "sass:list";
 @use "igniteui-theming/sass/typography" as *;
 
+$avatars: large, medium, small;
+
 :host {
     display: grid;
     grid-auto-flow: column;
     grid-template-rows: auto auto;
-    justify-items: center;
-    align-items: center;
     place-content: center;
+    place-items: center;
     column-gap: rem(48px);
     row-gap: rem(8px);
-    flex-wrap: wrap;
-    max-width: fit-content;
-    margin: 0 auto;
     height: 100vh;
     padding: rem(32px);
+}
 
-    igx-avatar {
-        grid-row: 1;
-    }
-
-    span {
-        grid-row: 2;
-        text-align: center;
-        color: var(--ig-gray-600);
-        font-size: var(--ig-detail-1-font-size);
-        font-weight: var(--ig-detail-1-font-weight);
-        font-style: var(--ig-detail-1-font-style);
-        line-height: var(--ig-detail-1-line-height);
-        letter-spacing: var(--ig-detail-1-letter-spacing);
-        text-transform: var(--ig-detail-1-text-transform);
-    }
-
-    igx-avatar:nth-of-type(1) {
-        grid-column: 1;
-        anchor-name: --circle-anchor;
-    }
-
-    igx-avatar:nth-of-type(2) {
-        grid-column: 2;
-        anchor-name: --square-anchor;
-    }
-
-    igx-avatar:nth-of-type(3) {
-        grid-column: 3;
-        anchor-name: --rounded-anchor;
-    }
-
-    span:nth-of-type(1) {
-        grid-column: 1;
-    }
-
-    span:nth-of-type(2) {
-        grid-column: 2;
-    }
+// :where() keeps the sample's own rules at zero specificity
+:where(igx-avatar) {
+    grid-row: 1;
+}
 
-    span:nth-of-type(3) {
-        grid-column: 3;
-    }
+:where(span) {
+    grid-row: 2;
+    text-align: center;
+    color: var(--ig-gray-600);
 
-    igx-badge {
-        --ig-size: var(--ig-size-small);
+    @include type-style("body-1") {
+        margin: 0;
+    };
+}
 
-        position: absolute;
-        inset-block-start: anchor(85.5%);
-        inset-inline-start: anchor(85.5%);
-        translate: -50% -50%;
-    }
+:where(igx-badge) {
+    position: absolute;
+    inset-block-start: anchor(85.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
+}
 
-    igx-badge:nth-of-type(1) {
-        position-anchor: --circle-anchor;
-    }
+// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
+@each $avatar in $avatars {
+    $i: list.index($avatars, $avatar);
 
-    igx-badge:nth-of-type(2) {
-        position-anchor: --square-anchor;
+    igx-avatar:nth-of-type(#{$i}) {
+        anchor-name: --#{$avatar};
     }
 
-    igx-badge:nth-of-type(3) {
-        position-anchor: --rounded-anchor;
+    igx-badge:nth-of-type(#{$i}) {
+        --ig-size: var(--ig-size-#{$avatar});
+        position-anchor: --#{$avatar};
     }
 }
-
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
index 8001ff67f..4fb4529f0 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -1,22 +1,10 @@
+@use "igniteui-theming/sass/typography" as *;
+
 :host {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
-
-    igx-badge {
-        --ig-size: var(--ig-size-small);
-    }
-
-    igx-avatar {
-        --background: var(--ig-gray-300);
-        --color: var(--ig-gray-300-contrast);
-    }
-
-    igx-avatar.avatar-muted {
-        --background: var(--ig-gray-800);
-        --color: var(--ig-gray-800-contrast);
-    }
 }
 
 .chat-list {
@@ -27,10 +15,26 @@
     max-width: rem(328px);
 }
 
+// :where() drops this to zero specificity, so .avatar-muted below overrides it
+// without needing a longer selector to outrank it.
+:where(igx-avatar) {
+    --background: var(--ig-gray-300);
+    --color: var(--ig-gray-300-contrast);
+}
+
+.avatar-muted {
+    --background: var(--ig-gray-800);
+    --color: var(--ig-gray-800-contrast);
+}
+
 .avatar-with-badge {
     position: relative;
 }
 
+:where(igx-badge) {
+    --ig-size: var(--ig-size-small);
+}
+
 .avatar-status {
     position: absolute;
     inset-inline-end: rem(-4px);
diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
index 58ea36566..a4c56b17f 100644
--- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
+++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
@@ -1,79 +1,53 @@
+@use "sass:list";
 @use "igniteui-theming/sass/typography" as *;
 
+$avatars: circle, square, rounded;
+
 :host {
     display: grid;
     grid-auto-flow: column;
     grid-template-rows: auto auto;
-    justify-items: center;
     place-content: center;
+    place-items: center;
     column-gap: rem(48px);
     row-gap: rem(8px);
-    flex-wrap: wrap;
-    max-width: fit-content;
-    margin: 0 auto;
     height: 100vh;
     padding: rem(32px);
 }
 
-igx-avatar {
+// :where() keeps the sample's own rules at zero
+:where(igx-avatar) {
     grid-row: 1;
 }
 
-span {
+:where(span) {
     grid-row: 2;
     text-align: center;
     color: var(--ig-gray-600);
-    font-size: var(--ig-detail-1-font-size);
-    font-weight: var(--ig-detail-1-font-weight);
-    font-style: var(--ig-detail-1-font-style);
-    line-height: var(--ig-detail-1-line-height);
-    letter-spacing: var(--ig-detail-1-letter-spacing);
-    text-transform: var(--ig-detail-1-text-transform);
-}
-
-igx-avatar:nth-of-type(1) {
-    grid-column: 1;
-    anchor-name: --circle-anchor;
-}
 
-igx-avatar:nth-of-type(2) {
-    grid-column: 2;
-    anchor-name: --square-anchor;
+    @include type-style("body-1") {
+        margin: 0;
+    };
 }
 
-igx-avatar:nth-of-type(3) {
-    grid-column: 3;
-    anchor-name: --rounded-anchor;
-}
-
-span:nth-of-type(1) {
-    grid-column: 1;
-}
+:where(igx-badge) {
+    --ig-size: var(--ig-size-small);
 
-span:nth-of-type(2) {
-    grid-column: 2;
-}
-
-span:nth-of-type(3) {
-    grid-column: 3;
-}
-
-igx-badge {
-    --ig-size: 1;
     position: absolute;
     inset-block-start: anchor(85.5%);
     inset-inline-start: anchor(85.5%);
     translate: -50% -50%;
 }
 
-igx-badge:nth-of-type(1) {
-    position-anchor: --circle-anchor;
-}
+// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
+@each $avatar in $avatars {
+    $i: list.index($avatars, $avatar);
 
-igx-badge:nth-of-type(2) {
-    position-anchor: --square-anchor;
-}
+    igx-avatar:nth-of-type(#{$i}) {
+        anchor-name: --#{$avatar};
+    }
 
-igx-badge:nth-of-type(3) {
-    position-anchor: --rounded-anchor;
+    igx-badge:nth-of-type(#{$i}) {
+        position-anchor: --#{$avatar};
+    }
 }

From a31f76b1d68026c3ff93cb96e6ca1fe97b001b60 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 20 Aug 2026 15:56:26 +0300
Subject: [PATCH 3/4] refactor(avatar): adjust layout gap and simplify styling
 for avatar components

---
 .../avatar-overview/avatar-overview.component.scss    |  2 +-
 .../avatar-styling/avatar-styling.component.scss      | 11 ++---------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
index 6f1aecb3f..6ee88140a 100644
--- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
+++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
@@ -5,7 +5,7 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    gap: rem(32px);
+    gap: rem(100px);
     height: 100vh;
     padding: rem(32px);
 }
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
index 4fb4529f0..5b7b55532 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -15,23 +15,16 @@
     max-width: rem(328px);
 }
 
-// :where() drops this to zero specificity, so .avatar-muted below overrides it
-// without needing a longer selector to outrank it.
-:where(igx-avatar) {
+igx-avatar {
     --background: var(--ig-gray-300);
     --color: var(--ig-gray-300-contrast);
 }
 
-.avatar-muted {
-    --background: var(--ig-gray-800);
-    --color: var(--ig-gray-800-contrast);
-}
-
 .avatar-with-badge {
     position: relative;
 }
 
-:where(igx-badge) {
+igx-badge {
     --ig-size: var(--ig-size-small);
 }
 

From 7d4f551a25c566276230f033b031b6c58658e0b7 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 20 Aug 2026 16:44:22 +0300
Subject: [PATCH 4/4] refactor(avatar): simplify and clean up styling across
 avatar components and samples

---
 .../avatar-shape/avatar-shape.component.scss     |  7 +++----
 .../avatar-size/avatar-size.component.scss       | 11 +++++------
 .../avatar-styling/avatar-styling.component.html |  8 +++-----
 .../avatar-styling/avatar-styling.component.scss | 16 ++++++++--------
 .../avatar-tailwind-styling.component.html       |  2 +-
 5 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
index 07248577e..a6a47666f 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
@@ -15,12 +15,11 @@ $avatars: circle, square, rounded;
     padding: rem(32px);
 }
 
-// :where() keeps the sample's own rules at zero specificity
-:where(igx-avatar) {
+igx-avatar {
     grid-row: 1;
 }
 
-:where(span) {
+span {
     grid-row: 2;
     text-align: center;
     color: var(--ig-gray-600);
@@ -30,7 +29,7 @@ $avatars: circle, square, rounded;
     };
 }
 
-:where(igx-badge) {
+igx-badge {
     --ig-size: var(--ig-size-small);
 
     position: absolute;
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
index c90c29010..79f4204bb 100644
--- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
@@ -1,8 +1,6 @@
 @use "sass:list";
 @use "igniteui-theming/sass/typography" as *;
 
-$avatars: large, medium, small;
-
 :host {
     display: grid;
     grid-auto-flow: column;
@@ -15,12 +13,11 @@ $avatars: large, medium, small;
     padding: rem(32px);
 }
 
-// :where() keeps the sample's own rules at zero specificity
-:where(igx-avatar) {
+igx-avatar {
     grid-row: 1;
 }
 
-:where(span) {
+span {
     grid-row: 2;
     text-align: center;
     color: var(--ig-gray-600);
@@ -30,13 +27,15 @@ $avatars: large, medium, small;
     };
 }
 
-:where(igx-badge) {
+igx-badge {
     position: absolute;
     inset-block-start: anchor(85.5%);
     inset-inline-start: anchor(85.5%);
     translate: -50% -50%;
 }
 
+$avatars: large, medium, small;
+
 // The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
 @each $avatar in $avatars {
     $i: list.index($avatars, $avatar);
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
index e7e7ef090..758148130 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
@@ -4,7 +4,6 @@
     <igx-list-item>
         <div igxListThumbnail class="avatar-with-badge">
             <igx-avatar
-                class="profile-avatar"
                 shape="circle"
                 src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
                 alt="A profile photo of Nick Evans.">
@@ -20,7 +19,7 @@
 
     <igx-list-item>
         <div igxListThumbnail class="avatar-with-badge">
-            <igx-avatar class="avatar-muted profile-avatar" shape="circle" initials="JF" alt="James Ford initials."></igx-avatar>
+            <igx-avatar class="avatar-muted" shape="circle" initials="JF" alt="James Ford initials."></igx-avatar>
             <igx-badge class="avatar-status avatar-muted-badge" outlined shape="rounded">
                 <igx-icon name="x" collection="material"></igx-icon>
             </igx-badge>
@@ -33,7 +32,6 @@
     <igx-list-item>
         <div igxListThumbnail class="avatar-with-badge">
             <igx-avatar
-                class="profile-avatar"
                 shape="circle"
                 src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
                 alt="A profile photo of Kate Porter.">
@@ -50,7 +48,7 @@
     <igx-list-item [isHeader]="true">Meetings</igx-list-item>
 
     <igx-list-item>
-        <igx-avatar igxListThumbnail class="profile-avatar" shape="circle" alt="Calendar icon.">
+        <igx-avatar igxListThumbnail shape="circle" alt="Calendar icon.">
             <igx-icon name="calendar" collection="material"></igx-icon>
         </igx-avatar>
         <p igxListLineTitle>Weekly Meeting</p>
@@ -59,7 +57,7 @@
     </igx-list-item>
 
     <igx-list-item>
-        <igx-avatar igxListThumbnail class="profile-avatar" shape="circle" alt="Group icon.">
+        <igx-avatar igxListThumbnail shape="circle" alt="Group icon.">
             <igx-icon name="group" collection="material"></igx-icon>
         </igx-avatar>
         <p igxListLineTitle>Design Discussion</p>
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
index 5b7b55532..e4e2886f9 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -7,17 +7,17 @@
     height: 100vh;
 }
 
-.chat-list {
-    --border-width: #{rem(1px)};
-    --border-color: var(--ig-gray-300);
-    --header-text-color: var(--ig-gray-900);
+igx-list {
+    --ig-list-border-width: #{rem(1px)};
+    --ig-list-border-color: var(--ig-gray-300);
+    --ig-list-header-text-color: var(--ig-gray-900);
 
     max-width: rem(328px);
 }
 
 igx-avatar {
-    --background: var(--ig-gray-300);
-    --color: var(--ig-gray-300-contrast);
+    --ig-avatar-background: var(--ig-gray-300);
+    --ig-avatar-color: var(--ig-gray-300-contrast);
 }
 
 .avatar-with-badge {
@@ -35,6 +35,6 @@ igx-badge {
 }
 
 .avatar-muted-badge {
-    --background-color: var(--ig-gray-300);
-    --icon-color: var(--ig-gray-300-contrast);
+    --ig-badge-background-color: var(--ig-gray-300);
+    --ig-badge-icon-color: var(--ig-gray-300-contrast);
 }
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index 4b6e8be4d..d4fff12c1 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -75,7 +75,7 @@
                     <span class="stats-subtitle">{{ stat.label }}</span>
                 </div>
                 @if (!isLast) {
-                    <igx-divider class="h-12" vertical></igx-divider>
+                    <igx-divider vertical></igx-divider>
                 }
             }
         </div>