More realistict cards sample and add more content variety

MisRob · Sep 18, 2024 · 9bfb21f · 9bfb21f
1 parent abede1c
commit 9bfb21f
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 14 deletions.
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
@@ -240,14 +240,75 @@
         <DocsAnchorTarget anchor="#layout" />
       </h3>
 
-      <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>
+      <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, the following card layouts can be achieved to organize diverse kinds of content:</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>
diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
@@ -231,7 +231,7 @@
 
       <p>Cards displayed in <code>KCardGrid</code> stretch vertically to fit their content, making a grid row height match its tallest card.</p>
 
-      <p><em>Setting height on cards is discouraged. Instead, manage card height by setting height on its sections, using text truncation, or other ways to limit content.</em> Such techniques ensure content tolerance, prevent excessive card heights, and keep vertical alignment of card sections consistent on a grid row. This is especially important when dealing with unknown lenghts or amounts of content displayed in cards. Consider:</p>
+      <p><em>Setting height on cards is discouraged. Instead, manage height bottom-up, for example by setting height on card sections, using text truncation, or other ways to limit its inner content.</em> Such approaches ensure content tolerance, prevent from unexpected overflows or excessive height, and keep vertical alignment of card sections consistent on a grid row. This is especially important when dealing with unknown lenghts or amounts of content displayed in cards. Consider:</p>
 
       <DocsShow language="html">
         <KCardGrid layout="1-2-3">