diff --git a/kolibri/core/assets/src/views/ElapsedTime.vue b/kolibri/core/assets/src/views/ElapsedTime.vue
index 1809d81351f..2aa63446af8 100644
--- a/kolibri/core/assets/src/views/ElapsedTime.vue
+++ b/kolibri/core/assets/src/views/ElapsedTime.vue
@@ -1,9 +1,8 @@
 <template>
 
-  <span v-if="date">
-    {{ $formatRelative(ceilingDate, { now: now }) }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="date ? $formatRelative(ceilingDate, { now: now }) : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/assets/src/views/TimeDuration.vue b/kolibri/core/assets/src/views/TimeDuration.vue
index dd5e4249dc9..bf11b7fdf73 100644
--- a/kolibri/core/assets/src/views/TimeDuration.vue
+++ b/kolibri/core/assets/src/views/TimeDuration.vue
@@ -1,7 +1,8 @@
 <template>
 
-  <span v-if="seconds">{{ formattedTime }}</span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="seconds ? formattedTime : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue
index 50946859021..e338517f406 100644
--- a/kolibri/core/assets/src/views/UserTable/index.vue
+++ b/kolibri/core/assets/src/views/UserTable/index.vue
@@ -165,10 +165,9 @@
             </td>
             <template v-if="showDemographicInfo">
               <td class="id-col">
-                <span v-if="user.id_number">
-                  {{ user.id_number }}
-                </span>
-                <KEmptyPlaceholder v-else />
+                <KOptionalText
+                  :text="user.id_number ? user.id_number : ''"
+                />
               </td>
               <td>
                 <GenderDisplayText :gender="user.gender" />
diff --git a/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue b/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue
index 90cadb016cc..f362f58d80a 100644
--- a/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue
+++ b/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <span v-if="isSpecified && birthYear">
-    {{ $formatDate(birthYear, { year: 'numeric' }) }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="
+      (isSpecified && birthYear) ? $formatDate(birthYear, { year: 'numeric' }) : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue b/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue
index 94089e83adf..3a6280f034b 100644
--- a/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue
+++ b/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <span v-if="isSpecified && displayText">
-    {{ displayText }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="
+      (isSpecified && displayText) ? displayText : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 2b3e15489fb..353d5a59966 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue b/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
index b9a1d08def1..cc46cbccc88 100644
--- a/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
@@ -49,10 +49,11 @@
           {{ coachString('descriptionLabel') }}
         </KGridItem>
         <KGridItem :layout12="layout12Value">
-          <template v-if="lesson.description">
-            {{ lesson.description }}
-          </template>
-          <KEmptyPlaceholder v-else />
+          <KOptionalText>
+            <template v-if="lesson.description">
+              {{ lesson.description }}
+            </template>
+          </KOptionalText>
         </KGridItem>
       </div>
     </KGrid>
diff --git a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap
index 30cefaa0896..8d5642c84ff 100644
--- a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap
+++ b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap
@@ -31,11 +31,13 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups
         </td>
         <!---->
         <!---->
-        <td><span>92 seconds</span></td>
+        <td><span>
+    92 seconds
+  </span></td>
         <!---->
         <td><span>
-  yesterday
-</span></td>
+    yesterday
+  </span></td>
       </tr>
       <tr>
         <td><span class="labeled-icon-wrapper"><span class="icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #212121; top: 2px;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></span> <span class="label" style="margin-left: 1.975em; max-width: calc(100% - 1.975em);"><span dir="auto" class="debug-warning"><a dir="auto" class="KRouterLink-noKey-0_1jjc9c8 link"><!----> <span class="link-text">learner2</span>
@@ -49,11 +51,13 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups
         </td>
         <!---->
         <!---->
-        <td><span>17 seconds</span></td>
+        <td><span>
+    17 seconds
+  </span></td>
         <!---->
         <td><span>
-  3 hours ago
-</span></td>
+    3 hours ago
+  </span></td>
       </tr>
     </transition-group-stub>
   </table>
diff --git a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap
index 367195861cd..e1bb74c170a 100644
--- a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap
+++ b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap
@@ -18,7 +18,9 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -62,7 +64,9 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -92,7 +96,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>3 minutes</span></td>
+    <td><span>
+    3 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -157,7 +163,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>3 minutes</span></td>
+    <td><span>
+    3 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -170,7 +178,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
diff --git a/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue b/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
index 53a1325d1fc..5cafccc8dd2 100644
--- a/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
+++ b/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
@@ -24,7 +24,6 @@
         />
       </div>
     </form>
-
     <transition mode="out-in">
       <p
         v-if="!searchHasBeenMade"
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 8d727464c27..ab36140000e 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -62,10 +62,9 @@
               </td>
               <td>
                 <span :ref="`coachNames${classroom.id}`">
-                  <template v-if="coachNames(classroom).length">
-                    {{ formattedCoachNames(classroom) }}
-                  </template>
-                  <KEmptyPlaceholder v-else />
+                  <KOptionalText
+                    :text="coachNames(classroom).length ? formattedCoachNames(classroom) : ''"
+                  />
                 </span>
                 <KTooltip
                   v-if="formattedCoachNamesTooltip(classroom)"
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 95673921c52..d7acf693c3d 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -23,7 +23,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index 794fb492c5a..ecdd72b0836 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7390,9 +7390,9 @@ kolibri-constants@0.1.42:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8":
+"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e":
   version "1.3.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8"
+  resolved "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e"
   dependencies:
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "^3.0.21"