diff --git a/css/mistica-common.css b/css/mistica-common.css
index 9c834e5c8f..8b96455846 100644
--- a/css/mistica-common.css
+++ b/css/mistica-common.css
@@ -34,8 +34,8 @@
 
     --vcolor-accordionChevronClosed: var(--mistica-color-inverse);
     --vcolor-accordionChevronOpen: var(--mistica-color-inverse);
-    --vcolor-accordionHover: var(--mistica-color-backgroundContainerBrandHover);
-    --vcolor-accordionActive: var(--mistica-color-backgroundContainerBrandPressed);
+    --vcolor-backgroundContainerHover: var(--mistica-color-backgroundContainerBrandHover);
+    --vcolor-backgroundConteinerPressed: var(--mistica-color-backgroundContainerBrandPressed);
 
     --vcolor-divider: var(--mistica-color-dividerInverse);
 
@@ -51,6 +51,8 @@
     --vcolor-switch-trackBackground: transparent;
     --vcolor-switch-handleChecked: var(--mistica-color-controlKnobInverse);
     --vcolor-switch-handleHover: var(--mistica-color-inverse);
+
+    --vcolor-rowChevron: var(--mistica-color-inverse);
 }
 
 [data-mistica-skin] > *,
@@ -58,7 +60,9 @@
 .mistica-boxed > *,
 .mistica-card > *,
 .mistica-snap-card > *,
-.mistica-display-card > * {
+.mistica-display-card > *,
+.mistica-boxed > *,
+.mistica-boxed-row > * {
     --mistica-boxed-border: 1px solid var(--mistica-color-border);
     --vcolor-textPrimary: var(--mistica-color-textPrimary);
     --vcolor-textSecondary: var(--mistica-color-textSecondary);
@@ -92,8 +96,8 @@
 
     --vcolor-accordionChevronClosed: var(--mistica-color-neutralMedium);
     --vcolor-accordionChevronOpen: var(--mistica-color-neutralHigh);
-    --vcolor-accordionHover: var(--mistica-color-backgroundContainerHover);
-    --vcolor-accordionActive: var(--mistica-color-backgroundContainerPressed);
+    --vcolor-backgroundContainerHover: var(--mistica-color-backgroundContainerHover);
+    --vcolor-backgroundConteinerPressed: var(--mistica-color-backgroundContainerPressed);
 
     --vcolor-divider: var(--mistica-color-divider);
 
@@ -109,6 +113,8 @@
     --vcolor-switch-trackBackground: var(--mistica-color-backgroundAlternative);
     --vcolor-switch-handleChecked: var(--mistica-color-inverse);
     --vcolor-switch-handleHover: var(--mistica-color-neutralHigh);
+
+    --vcolor-rowChevron: var(--mistica-color-neutralMedium);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -993,21 +999,24 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     display: none;
 }
 
-.mistica-accordion-item__summary-body {
+.mistica-accordion-item__summary-body,
+.mistica-row__body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 2px;
 }
 
-.mistica-accordion-item__summary-title {
+.mistica-accordion-item__summary-title,
+.mistica-row__title {
     font-size: var(--mistica-font-size-3);
     line-height: var(--mistica-line-height-3);
     font-weight: var(--mistica-font-weight-3);
     color: var(--vcolor-textPrimary);
 }
 
-.mistica-accordion-item__summary-subtitle {
+.mistica-accordion-item__summary-subtitle,
+.mistica-row__subtitle {
     font-size: var(--mistica-font-size-2);
     line-height: var(--mistica-line-height-2);
     font-weight: var(--mistica-font-weight-2);
@@ -1027,12 +1036,12 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
 
 @media (pointer: fine) {
     .mistica-accordion-item__summary:hover {
-        background-color: var(--vcolor-accordionHover);
+        background-color: var(--vcolor-backgroundContainerHover);
     }
 }
 
 .mistica-accordion-item__summary:active {
-    background-color: var(--vcolor-accordionActive);
+    background-color: var(--vcolor-backgroundConteinerPressed);
 }
 
 .mistica-accordion-item::details-content {
@@ -1054,6 +1063,120 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     height: auto;
 }
 
+/* Lists */
+
+.mistica-list,
+.mistica-boxed-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.mistica-boxed-list {
+    gap: 16px;
+}
+
+.mistica-row__asset {
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    align-self: flex-start;
+}
+
+.mistica-row,
+.mistica-boxed-row {
+    min-height: 72px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    transition: background-color 0.1s ease-in-out;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mistica-row {
+    position: relative;
+    margin: 0 -16px;
+}
+
+.mistica-row:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: calc(100% - 32px);
+    height: 1px;
+    background-color: var(--vcolor-divider);
+}
+
+.mistica-row:last-child:after {
+    display: none;
+}
+
+.mistica-boxed-row {
+    border: var(--mistica-boxed-border);
+    border-radius: var(--mistica-border-radius-container);
+    background: var(--mistica-color-backgroundContainer);
+    overflow: hidden;
+}
+
+.mistica-row > a,
+.mistica-boxed-row > a {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    text-decoration: none;
+    margin: -16px;
+    padding: 16px;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+}
+
+@media (pointer: fine) {
+    .mistica-row > a:hover,
+    .mistica-boxed-row > a:hover {
+        background-color: var(--vcolor-backgroundContainerHover);
+    }
+}
+
+.mistica-row > a:active,
+.mistica-boxed-row > a:active {
+    background-color: var(--vcolor-backgroundConteinerPressed);
+}
+
+.mistica-row__body {
+    flex: 1;
+}
+
+.mistica-row__body > [class^='mistica-tag'] {
+    margin-bottom: 2px;
+}
+
+.mistica-row__description {
+    font-size: var(--mistica-font-size-2);
+    line-height: var(--mistica-line-height-2);
+    font-weight: 400;
+    color: var(--vcolor-textSecondary);
+}
+
+.mistica-row__right {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.mistica-row__chevron {
+    width: 16px;
+    height: 16px;
+    color: var(--vcolor-rowChevron);
+    align-self: center;
+}
+
 /* Grid Layout */
 
 .mistica-grid-layout {
diff --git a/examples/css/index.html b/examples/css/index.html
index 8eb50b62f4..fac06912e5 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -185,6 +185,127 @@ <h4 class="mistica-text-title1">Disabled</h4>
                     ><input disabled checked type="checkbox" class="mistica-checkbox" />some label</label
                 >
 
+                <h3 class="mistica-text-title2">Lists</h3>
+                <h4 class="mistica-text-title1">RowList</h4>
+                <ul class="mistica-list">
+                    <li class="mistica-row">
+                        <div
+                            class="mistica-row__asset"
+                            style="background: var(--mistica-color-tagBackgroundActive)"
+                        >
+                            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"
+                                ></path>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"
+                                ></path>
+                            </svg>
+                        </div>
+                        <div class="mistica-row__body">
+                            <div class="mistica-row__title">Title 1</div>
+                            <div class="mistica-row__subtitle">Subtitle 1</div>
+                        </div>
+                    </li>
+                    <li class="mistica-row">
+                        <a href="#">
+                            <div class="mistica-row__body">
+                                <div class="mistica-row__title">Title 2</div>
+                                <div class="mistica-row__subtitle">Subtitle 2</div>
+                                <div class="mistica-row__description">Description 2</div>
+                            </div>
+                            <svg viewBox="0 0 20 20" class="mistica-row__chevron" aria-hidden>
+                                <path
+                                    fill="currentColor"
+                                    d="M18.81 12c0-.39-.16-.76-.44-1.02l-7.01-6.6c-.56-.53-1.45-.5-1.98.06s-.5 1.45.06 1.98L15.37 12l-5.93 5.58c-.56.53-.59 1.42-.06 1.98s1.42.59 1.98.06l7.01-6.6c.28-.26.44-.63.44-1.02"
+                                />
+                            </svg>
+                        </a>
+                    </li>
+                    <li class="mistica-row">
+                        <a href="#">
+                            <div class="mistica-row__body">
+                                <div class="mistica-tag-promo">Headline</div>
+                                <div class="mistica-row__title">Title 3</div>
+                                <div class="mistica-row__subtitle">Subtitle 3</div>
+                                <div class="mistica-row__description">Description 3</div>
+                                <div class="placeholder" style="height: 80px"></div>
+                            </div>
+                            <div class="mistica-row__right">
+                                <div class="placeholder" style="width: 40px; height: 40px"></div>
+                                <svg viewBox="0 0 20 20" class="mistica-row__chevron" aria-hidden>
+                                    <path
+                                        fill="currentColor"
+                                        d="M18.81 12c0-.39-.16-.76-.44-1.02l-7.01-6.6c-.56-.53-1.45-.5-1.98.06s-.5 1.45.06 1.98L15.37 12l-5.93 5.58c-.56.53-.59 1.42-.06 1.98s1.42.59 1.98.06l7.01-6.6c.28-.26.44-.63.44-1.02"
+                                    />
+                                </svg>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+
+                <h4 class="mistica-text-title1">BoxedRowList</h4>
+                <ul class="mistica-boxed-list">
+                    <li class="mistica-boxed-row">
+                        <div
+                            class="mistica-row__asset"
+                            style="background: var(--mistica-color-tagBackgroundActive)"
+                        >
+                            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"
+                                ></path>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"
+                                ></path>
+                            </svg>
+                        </div>
+                        <div class="mistica-row__body">
+                            <div class="mistica-row__title">Title 1</div>
+                            <div class="mistica-row__subtitle">Subtitle 1</div>
+                        </div>
+                    </li>
+                    <li class="mistica-boxed-row">
+                        <a href="#">
+                            <div class="mistica-row__body">
+                                <div class="mistica-row__title">Title 2</div>
+                                <div class="mistica-row__subtitle">Subtitle 2</div>
+                                <div class="mistica-row__description">Description 2</div>
+                            </div>
+                            <svg viewBox="0 0 20 20" class="mistica-row__chevron" aria-hidden>
+                                <path
+                                    fill="currentColor"
+                                    d="M18.81 12c0-.39-.16-.76-.44-1.02l-7.01-6.6c-.56-.53-1.45-.5-1.98.06s-.5 1.45.06 1.98L15.37 12l-5.93 5.58c-.56.53-.59 1.42-.06 1.98s1.42.59 1.98.06l7.01-6.6c.28-.26.44-.63.44-1.02"
+                                />
+                            </svg>
+                        </a>
+                    </li>
+                    <li class="mistica-boxed-row">
+                        <a href="#">
+                            <div class="mistica-row__body">
+                                <div class="mistica-tag-promo">Headline</div>
+                                <div class="mistica-row__title">Title 3</div>
+                                <div class="mistica-row__subtitle">Subtitle 3</div>
+                                <div class="mistica-row__description">Description 3</div>
+                                <div class="placeholder" style="height: 80px"></div>
+                            </div>
+                            <div class="mistica-row__right">
+                                <div class="placeholder" style="width: 40px; height: 40px"></div>
+                                <svg viewBox="0 0 20 20" class="mistica-row__chevron" aria-hidden>
+                                    <path
+                                        fill="currentColor"
+                                        d="M18.81 12c0-.39-.16-.76-.44-1.02l-7.01-6.6c-.56-.53-1.45-.5-1.98.06s-.5 1.45.06 1.98L15.37 12l-5.93 5.58c-.56.53-.59 1.42-.06 1.98s1.42.59 1.98.06l7.01-6.6c.28-.26.44-.63.44-1.02"
+                                    />
+                                </svg>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+
                 <h3 class="mistica-text-title2">Table</h3>
                 <h4 class="mistica-text-title1">Column headings</h4>
                 <table class="mistica-table mistica-table-mobile-collapsed">
@@ -767,73 +888,21 @@ <h3 class="mistica-text-title2">Grid Layout</h3>
                 <h4 class="mistica-text-title1">6 + 6</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-grid-col-6">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-6">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                 </section>
                 <h4 class="mistica-text-title1">5 + 4</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-grid-col-1"></div>
                     <div class="mistica-grid-col-5">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-1"></div>
                     <div class="mistica-grid-col-4">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-1"></div>
                 </section>
@@ -841,118 +910,33 @@ <h4 class="mistica-text-title1">4 + 6</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-grid-col-1"></div>
                     <div class="mistica-grid-col-4">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-6">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-1"></div>
                 </section>
                 <h4 class="mistica-text-title1">8 + 4</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-grid-col-8">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-4">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                 </section>
                 <h4 class="mistica-text-title1">3 + 9</h4>
                 <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-grid-col-3">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                     <div class="mistica-grid-col-9">
-                        <div
-                            style="
-                                height: 120px;
-                                width: auto;
-                                box-sizing: border-box;
-                                background: rgba(11, 39, 57, 0.08);
-                                border: 2px solid rgba(11, 39, 57, 0.3);
-                                position: relative;
-                            "
-                        >
-                            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-                                <use href="#mistica-grid-svg"></use>
-                            </svg>
-                        </div>
+                        <div class="placeholder" style="height: 120px; width: auto"></div>
                     </div>
                 </section>
             </div>
         </div>
         <script type="module" src="/main.js"></script>
     </body>
-
-    <svg style="display: none">
-        <symbol id="mistica-grid-svg">
-            <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
-            <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
-        </symbol>
-    </svg>
 </html>
diff --git a/examples/css/style.css b/examples/css/style.css
index 803f0459a2..73dcc69243 100644
--- a/examples/css/style.css
+++ b/examples/css/style.css
@@ -84,3 +84,32 @@ select {
     flex-direction: column;
     gap: 16px;
 }
+
+.placeholder {
+    box-sizing: border-box;
+    background: rgba(from var(--mistica-color-neutralHigh) r g b / 0.08);
+    border: 2px solid rgba(from var(--mistica-color-neutralHigh) r g b / 0.3);
+    position: relative;
+}
+
+.placeholder::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(-2px 0, 0 -2px, calc(100% + 2px) 100%, 100% calc(100% + 2px));
+    background-color: rgba(from var(--mistica-color-neutralHigh) r g b / 0.1);
+}
+
+.placeholder::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip-path: polygon(calc(100% + 2px) 0, 100% -2px, -2px 100%, 0 calc(100% + 2px));
+    background-color: rgba(from var(--mistica-color-neutralHigh) r g b / 0.1);
+}