update Cards with new styles and buttons

src/components/text/TextCard.vue

@@ -1,21 +1,24 @@
 <template>
   <text-card-base v-bind="$attrs">
     <template v-slot:header-extra="{ text }">
-      <b-nav class="ml-auto flex-nowrap" pills>
-        <template v-if="children">
-          <b-nav-item
-            v-for="child in text.children" :key="child.id"
-            @click="onChildOpen($event, text.id, child.id)"
-            :active="children.includes(child.id)"
-          >
-            {{ child.id }}
-          </b-nav-item>
-        </template>
+      <nav class="nav-list ml-auto">
+        <ul>
+          <template v-if="children">
+            <li v-for="child in text.children" :key="child.id">
+              <dot-button
+                @click="onChildOpen($event, text.id, child.id)"
+                :active="children.includes(child.id)" :variant="child.variant"
+              >
+                {{ child.families[0].name }}
+              </dot-button>
+            </li>
+          </template>
 
-        <b-nav-item>
-          <b-button-close @click="onSelfClose($event, text.id)" />
-        </b-nav-item>
-      </b-nav>
+          <li>
+            <b-button-close size="sm" @click="onSelfClose($event, text.id)" />
+          </li>
+        </ul>
+      </nav>
     </template>
 
     <template v-slot:footer-extra="{ text, toCommaList }">