More realistict cards sample and add more content variety

MisRob · Sep 18, 2024 · 0d5f150 · 0d5f150
1 parent abede1c
commit 0d5f150
Showing 1 changed file with 102 additions and 12 deletions.
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
@@ -242,12 +242,73 @@
 
       <p><code>KCard</code> has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining <code>orientation</code>, <code>thumbnailDisplay</code> and <code>thumbnailAlign</code> props, diverse card layouts can be created:</p>
 
+      <DocsShow block>
+        <KCardGrid layout="1-2-3">
+          <DocsKCard
+            :headingLevel="4"
+            orientation="vertical"
+            thumbnailDisplay="large"
+            prependTitle="(1)"
+          >
+            <template #aboveTitle>
+              <KLabeledIcon icon="readSolid" label="Read" />
+            </template>
+            <template #footer>
+              <div class="pills">
+                <span
+                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                >
+                  Short Activity
+                </span>
+                <span
+                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                >
+                  Biology
+                </span>
+              </div>
+            </template>
+          </DocsKCard>
+          <DocsKCard
+            :headingLevel="4"
+            orientation="vertical"
+            thumbnailDisplay="large"
+            :thumbnailSrc="null"
+            prependTitle="(2)"
+          >
+            <template #aboveTitle>
+              <KLabeledIcon icon="readSolid" label="Read" />
+            </template>
+            <template #footer>
+              <div class="pills">
+                <span
+                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                >
+                  Short Activity
+                </span>
+              </div>
+            </template>
+          </DocsKCard>
+          <DocsKCard
+            :headingLevel="4"
+            orientation="vertical"
+            thumbnailDisplay="small"
+            prependTitle="(3)"
+            hideFooter
+          >
+            <template #aboveTitle>
+              <KLabeledIcon icon="readSolid" label="Read" />
+            </template>
+          </DocsKCard>
+        </KCardGrid>
+      </DocsShow>
+
       <DocsShow block>
         <KCardGrid layout="1-2-2">
           <DocsKCard
             :headingLevel="4"
             orientation="horizontal"
             thumbnailDisplay="large"
+            :thumbnailSrc="null"
             thumbnailAlign="left"
             prependTitle="(1)"
           />
@@ -261,27 +322,32 @@
           />
         </KCardGrid>
       </DocsShow>
+
       <DocsShow block>
         <KCardGrid layout="1-2-3">
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
-            thumbnailDisplay="large"
+            thumbnailDisplay="none"
             prependTitle="(1)"
           />
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
-            thumbnailDisplay="small"
+            thumbnailDisplay="none"
             prependTitle="(2)"
-            showMenuInFooter
-          />
+            showProgressInFooter
+          >
+            <template #footer>
+              <span></span>
+            </template>
+          </DocsKCard>
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
             thumbnailDisplay="none"
-            hideFooter
             prependTitle="(3)"
+            showMenuInFooter
           />
         </KCardGrid>
       </DocsShow>
@@ -291,31 +357,40 @@
         <KCardGrid ...>
           <KCard
             ...
-            orientation="horizontal"
+            orientation="vertical"
             thumbnailDisplay="large"
-            thumbnailAlign="left"
           />
           <KCard
             ...
-            orientation="horizontal"
+            orientation="vertical"
+            thumbnailDisplay="large"
+          />
+          <KCard
+            ...
+            orientation="vertical"
             thumbnailDisplay="small"
-            thumbnailAlign="right"
           />
         </KCardGrid>
 
         <KCardGrid ...>
           <KCard
             ...
-            orientation="vertical"
+            orientation="horizontal"
             thumbnailDisplay="large"
+            thumbnailAlign="left"
           />
           <KCard
             ...
-            orientation="vertical"
+            orientation="horizontal"
             thumbnailDisplay="small"
+            thumbnailAlign="right"
           />
+        </KCardGrid>
+
+        <KCardGrid ...>
           <KCard
             ...
+            v-for="i in 3"
             orientation="vertical"
             thumbnailDisplay="none"
           />
@@ -639,4 +714,19 @@
     },
   };
 
-</script>
+</script>
+
+
+<style lang="scss" scoped>
+
+  .pills {
+    margin-left: -6px;
+
+    span {
+      display: inline-block;
+      padding: 6px 8px;
+      margin: 6px;
+    }
+  }
+
+</style>