@berqnet/theme 0.0.0-stage → 2.4.291

package/dist/runtime/components/development/example.alert.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Alert</h1>
+    <p>Displays important alert messages.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
+          <el-text tag="mark">type</el-text>, whose default value is <el-text tag="mark">info</el-text>.
+        </p>
+        <div class="flex gap-4 items-start flex-col">
+          <el-alert :title="`default`" />
+          <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" show-icon />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Description </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
+          <el-text tag="mark">type</el-text>, whose default value is <el-text tag="mark">info</el-text>. And you can add a description to the alert width
+          <el-text tag="mark">description</el-text> attribute. Also you can use <el-text tag="mark">#default</el-text> slot to add a description to the alert.
+        </p>
+        <div class="flex gap-4 items-start flex-col">
+          <el-alert :title="`default`" description="This is a description." />
+          <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" description="This is a description." show-icon />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const colors = ref(['primary', 'success', 'warning', 'info', 'error']);
+
+  const snippets = ref({
+    basic: `<el-alert title="Title Text Goes Here" type="danger" description="This is a description." show-icon :closable="false" />`,
+  });
+</script>

package/dist/runtime/components/development/example.avatar.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Avatar</h1>
+    <p>Avatars can be used to represent people or objects. It supports images, Icons, or characters.</p>
+
+    <el-card>
+      <template #header> With Image </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add <el-text tag="mark">src</el-text> attribute for display an image</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.image" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Text </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Insert text into tag brackets</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size">SK</el-avatar>
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.text" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Isax </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add <el-text tag="mark">class="isax-*"</el-text> attribute for display to isax icon</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size" class="isax-notification" />
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.isax" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Element Icon </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add <el-text tag="mark">icon</el-text> attribute for display an icon</p>
+        <div class="flex gap-7.5">
+          <div v-for="(size, index) of sizes" :key="size" class="flex flex-col gap-2 border rounded-md p-2 w-28 items-center">
+            <h5 class="font-normal text-neutral-7 grow">{{ String(size).toUpperCase() }}</h5>
+            <el-avatar :size="size" :icon="ElIconBell" />
+            <small class="text-neutral-4 flex items-end grow p-mini">{{ infos[index] }}px</small>
+          </div>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.icon" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Bell as ElIconBell } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+  import { reactive, toRefs } from 'vue';
+
+  const state = reactive({
+    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+    squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+    sizes: [50, 'default', 'large', 'medium', 'small', 'mini'] as const,
+    infos: [50, '32', '56', '44', '32', '16'] as const,
+  });
+
+  const { sizes, infos } = toRefs(state);
+
+  const snippets = ref({
+    isax: `<el-avatar class="isax-notification" />`,
+    icon: `<el-avatar :icon="ElIconEdit" />`,
+    text: `<el-avatar>SK</el-avatar>`,
+    image: `<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />`,
+  });
+</script>

package/dist/runtime/components/development/example.badge.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Badge</h1>
+    <p>A number or status mark on buttons and icons.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <div class="flex flex-col gap-4">
+        <p>Displays the amount of new messages. Add <el-text tag="mark">type</el-text> to colorize it. The amount is defined with value which accepts Number or String.</p>
+        <div class="flex gap-7.5">
+          <el-badge v-for="color of colors" :key="color" :value="12" :type="color">
+            <el-button size="small">{{ color }}</el-button>
+          </el-badge>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Max Value </template>
+      <div class="flex flex-col gap-4">
+        <p>
+          You can customize the <el-text tag="mark">max</el-text> value. The max value is defined by property max which is a Number. Note that it only works when value is also a
+          Number.
+        </p>
+        <div class="flex gap-7.5">
+          <el-badge :value="200" :max="99" class="item">
+            <el-button>comments</el-button>
+          </el-badge>
+          <el-badge :value="100" :max="10" class="item">
+            <el-button>replies</el-button>
+          </el-badge>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.max" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Red Dot </template>
+      <div class="flex flex-col gap-4">
+        <p>Use a red dot to mark content that needs to be noticed. Use the attribute <el-text tag="mark">is-dot</el-text>. It is a Boolean.</p>
+        <div class="flex gap-7.5">
+          <el-badge is-dot class="item">query</el-badge>
+          <el-badge is-dot class="item">
+            <el-button class="share-button" :icon="ElIconShare" type="primary" />
+          </el-badge>
+        </div>
+      </div>
+
+      <template #footer> <html-encode :tag="snippets.dot" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Offset </template>
+      <div class="flex flex-col gap-3">
+        <p>
+          Set <el-text tag="mark">offset</el-text> of the badge dot, the format is <el-text tag="mark">[left, top]</el-text>, which represents the offset of the status dot from the
+          left and top of the default position.
+        </p>
+        <div class="flex gap-4">
+          <el-badge class="item" :value="1" :offset="[10, 5]">
+            <el-button> offset</el-button>
+          </el-badge>
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.offset" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Share as ElIconShare } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const colors = ref(['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger']);
+
+  const snippets = ref({
+    basic: `
+      <el-badge :value="12" type="primary">
+        <el-button>comments</el-button>
+      </el-badge>
+    `,
+    max: `
+      <el-badge :value="200" :max="99" class="item">
+        <el-button>comments</el-button>
+      </el-badge>
+    `,
+    dot: `<el-badge is-dot class="item">query</el-badge>`,
+    offset: `
+      <el-badge class="item" :value="1" :offset="[10, 5]">
+        <el-button> offset</el-button>
+      </el-badge>
+    `,
+  });
+</script>

package/dist/runtime/components/development/example.breadcrumb.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Breadcrumb</h1>
+    <p>Display prompt information for mouse hover.</p>
+
+    <el-card>
+      <template #header> Basic usage </template>
+      <section class="flex flex-col gap-7.5">
+        <p>Add the <el-text tag="mark">berqnet-breadcrumb</el-text> component to the desired place. It will automatically grab the path and convert it into a breadcrumb.</p>
+        <berqnet-breadcrumb :paths="sample_path" />
+      </section>
+      <template #footer>
+        <div class="flex flex-col gap-7.5">
+          <html-encode :tag="snippets.basic" />
+          <div class="flex flex-col gap-3">
+            <h3>Usage On Tabbed Page Example:</h3>
+            <p class="p-medium">
+              This code will automatically redirect to the first tab, and the page will have a query parameter like
+              <span class="comment">http://localhost:3000/about?tab=alert</span>. Additionally, if another tab's name is manually provided in the URL, that tab will be selected by
+              default.
+            </p>
+            <html-encode :tag="snippets.composable" />
+          </div>
+        </div>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const sample_path = ref([
+    { regex: /^\/about$/, label: 'header.about-label.text' },
+    { regex: /^\/theme\/([A-Za-z0-9\-_]+)$/, label: 'header.number.text' },
+  ]);
+
+  const snippets = ref({
+    basic: `<berqnet-breadcrumb :paths="[ { regex: /^\/about$/, label: 'header.about.text' } ]" />`,
+    composable: `
+    <template>
+      <el-tabs v-model="activeTab" @tab-click="tabChanged">
+        <el-tab-pane label="Alert" name="alert" lazy><example-alert /></el-tab-pane>
+        <el-tab-pane label="Avatar" name="avatar" lazy><example-avatar /></el-tab-pane>
+      </el-tabs>
+    </template>
+
+    <script setup lang="ts">
+      const { activeTab, tabChanged, setActiveTab, setupBreadcrumbs } = useBreadcrumb();
+      const tabs = ['avatar', 'alert'];
+
+      onMounted(() => {
+        setupBreadcrumbs(tabs);
+      });
+    <\/script>
+    `,
+  });
+</script>

package/dist/runtime/components/development/example.button.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Buttons</h1>
+    <p>Element Plus Button is a customizable and versatile UI component designed for creating interactive and visually appealing buttons in web applications.</p>
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default size is Large. Button component provides {{ sizes.length }} additional sizes for you to choose among different scenarios. Use attribute size to set additional
+          sizes <el-text tag="mark">{{ sizes.join(', ') }}</el-text>
+        </p>
+        <div class="flex gap-4">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size">{{ capitalize(size) }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button size=&quot;small&quot;&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Rounded </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          A rounded button in Element Plus features slightly curved corners, providing a softer and more modern appearance to your UI elements. To apply it add
+          <el-text tag="mark">round</el-text> to button
+        </p>
+        <div class="flex gap-4">
+          <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" round>{{ capitalize(size) }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button round&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Colors </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The type prop in Element Plus Button allows you to select from predefined styles such as
+          <el-text tag="mark">'primary', 'secondary', 'neutral', 'success', 'warning', 'info', and 'danger'</el-text> to visually distinguish buttons based on their purpose and
+          importance within your application.
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(color, index) of colors" :key="color + index" :type="color">{{ color }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :type=&quot;success&quot;&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Outline / Plain </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The plain prop in Element Plus Button creates a button with a transparent background, offering a subtle and minimalistic look. Add
+          <el-text tag="mark">plain</el-text> to the button to make it outlined."
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(color, index) of colors" :key="color + index" :type="color" plain>{{ color }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button plain&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Ghost / Text </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The plain prop in Element Plus Button creates a button with a transparent background, offering a subtle and minimalistic look. Add <el-text tag="mark">text</el-text>
+          to the button to make it ghost."
+        </p>
+        <div class="flex gap-4 flex-wrap">
+          <el-button v-for="(color, index) of colors" :key="color + index" :type="color" text>{{ color }}</el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button text&gt;success&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header>Disabled</template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          The <code><el-text tag="mark">disabled</el-text></code> attribute determines if the button is disabled. Use disabled attribute to determine whether a button is disabled.
+          It accepts a Boolean value.
+        </p>
+        <div class="flex flex-col gap-4">
+          <el-radio-group v-model="active_color" size="mini">
+            <el-radio-button v-for="color of colors" :key="color" :value="color">{{ color }}</el-radio-button>
+          </el-radio-group>
+          <div class="flex gap-4 flex-wrap">
+            <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled :type="active_color">{{ capitalize(size) }}</el-button>
+          </div>
+          <div class="flex gap-4 flex-wrap">
+            <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled plain :type="active_color">{{ capitalize(size) }}</el-button>
+          </div>
+          <div class="flex gap-4 flex-wrap">
+            <el-button v-for="(size, index) of sizes" :key="size + index" :size="size" disabled text :type="active_color">{{ capitalize(size) }}</el-button>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :size=&quot;small&quot;&gt;small&lt;/el-button&gt;</el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Icon Button </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Use <el-text tag="mark">icons</el-text> to add more meaning to Button. You can use icon alone to save some space, or use it with text. Use the icon attribute to add icon.
+          You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an
+          <span class="font-medium">&lt;i &gt;</span> tag. Custom icons can be used as well.
+        </p>
+        <div class="flex gap-4">
+          <el-button :icon="ElIconEdit" />
+          <el-button :icon="ElIconShare" />
+          <el-button round :icon="ElIconShare" />
+          <el-button round plain :icon="ElIconShare" />
+          <el-button :icon="ElIconDelete" size="small" type="danger" />
+          <el-button :icon="ElIconDelete" size="mini" type="danger" />
+          <el-button class="isax-add" size="mini" type="danger" />
+          <el-button class="isax-add" size="small" type="danger" />
+          <el-button class="isax-add" size="medium" type="danger" />
+          <el-button class="isax-add" size="large" type="danger" />
+          <el-button :icon="ElIconSearch">Search</el-button>
+          <el-button>
+            Upload<el-icon class="el-icon--right"><ElIconUpload /></el-icon>
+          </el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button :icon=&quot;ElIconShare&quot; /&gt;</el-tag>
+          <el-tag type="neutral"> &lt;el-button&gt;Upload&lt;el-icon class=&quot;el-icon--right&quot;&gt;&lt;ElIconUpload /&gt;&lt;/el-icon&gt;&lt;/el-button&gt; </el-tag>
+        </code>
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Button Group </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Displayed as a button group, can be used to group a series of similar operations. Use tag <el-text tag="mark">&lt;el-button-group&gt;</el-text> to group your buttons.
+        </p>
+        <div class="flex flex-col gap-7.5">
+          <el-radio-group v-model="active_color" size="mini">
+            <el-radio-button v-for="color of colors" :key="color" :value="color">{{ color }}</el-radio-button>
+          </el-radio-group>
+          <el-button-group>
+            <el-button disabled :type="active_color" :icon="ElIconArrowLeft">Previous Page</el-button>
+            <el-button disabled :type="active_color" :icon="ElIconArrowLeft">Center Page</el-button>
+            <el-button disabled :type="active_color" :icon="ElIconArrowLeft">Center Page</el-button>
+            <el-button disabled :type="active_color">
+              Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+            </el-button>
+          </el-button-group>
+          <el-button-group>
+            <el-button :type="active_color" :icon="ElIconArrowLeft">Previous Page</el-button>
+            <el-button :type="active_color" :icon="ElIconArrowLeft">Center Page</el-button>
+            <el-button :type="active_color" :icon="ElIconArrowLeft">Center Page</el-button>
+            <el-button :type="active_color">
+              Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+            </el-button>
+          </el-button-group>
+        </div>
+      </div>
+
+      <template #footer>
+        <html-encode :tag="snippets.group" />
+      </template>
+    </el-card>
+
+    <el-card>
+      <template #header> Tag </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>You can custom element <el-text tag="mark">tag</el-text>, For example button, div, a, router-link, nuxt-link.</p>
+        <div class="flex gap-4">
+          <el-button type="" tag="div" role="button" tabindex="0">div</el-button>
+          <el-button type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank" rel="noopener noreferrer"> a </el-button>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <el-tag type="neutral">&lt;el-button tag=&quot;div&quot; role=&quot;button&quot; tabindex=&quot;0&quot;&gt;div&lt;/el-button&gt;</el-tag>
+          <el-tag type="neutral">
+            &lt;el-button type=&quot;primary&quot; tag=&quot;a&quot; href=&quot;https://github.com/element-plus/element-plus&quot; target=&quot;_blank&quot; rel=&quot;noopener
+            noreferrer&quot; &gt; a &lt;/el-button&gt;
+          </el-tag>
+        </code>
+      </template>
+    </el-card>
+    <div class="page-footer">
+      <el-button>Cancel</el-button>
+      <el-button>Submit</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    ArrowLeft as ElIconArrowLeft,
+    ArrowRight as ElIconArrowRight,
+    Delete as ElIconDelete,
+    Edit as ElIconEdit,
+    Search as ElIconSearch,
+    Share as ElIconShare,
+    Upload as ElIconUpload,
+  } from '@element-plus/icons-vue';
+  import { ref } from 'vue';
+
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
+  const colors = ['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger'];
+
+  const snippets = {
+    group: `
+    <el-button-group>
+      <el-button type="primary" :icon="ElIconArrowLeft">Previous Page</el-button>
+      <el-button type="primary">
+        Next Page<el-icon class="el-icon--right"><ElIconArrowRight /></el-icon>
+      </el-button>
+    </el-button-group>`,
+  };
+
+  const active_color = ref('default');
+
+  const capitalize = (value: string): string => {
+    const text = String(value);
+
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
+</script>

package/dist/runtime/components/development/example.card.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col gap-8 mb-16">
+    <h1 class="">Card - (Needs Acceptance)</h1>
+    <p>Integrate information in a card container.</p>
+
+    <el-card>
+      <template #header>
+        <h2>Basic usage</h2>
+      </template>
+      <section class="flex flex-col gap-7.5">
+        <p>
+          Card includes, content and operations. Card is made up of <el-text tag="mark">header</el-text>, <el-text tag="mark">body</el-text> and
+          <el-text tag="mark">footer</el-text>. header and footer are optional, and its content distribution depends on a named slot.
+        </p>
+        <el-card style="max-width: 480px">
+          <template #header>
+            <div class="card-header">
+              <span>Card name</span>
+            </div>
+          </template>
+          <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+          <template #footer>Footer content</template>
+        </el-card>
+      </section>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <h2>Shadow</h2>
+      </template>
+      <section class="flex flex-col gap-7.5">
+        <p>
+          You can define when to show the card shadows The shadow attribute determines when the card shadows are displayed. It can be <el-text tag="mark">always</el-text>,
+          <el-text tag="mark">hover</el-text> or <el-text tag="mark">never</el-text>.
+        </p>
+        <div class="flex gap-7.5">
+          <el-card style="width: 480px" shadow="always">Always</el-card>
+          <el-card style="width: 480px" shadow="hover">Hover</el-card>
+          <el-card style="width: 480px" shadow="never">Never</el-card>
+        </div>
+      </section>
+      <template #footer> <html-encode :tag="snippets.shadow" /> </template>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const snippets = ref({
+    basic: `
+      <el-card style="max-width: 480px">
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+          </div>
+        </template>
+        <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+        <template #footer>Footer content</template>
+      </el-card>`,
+    shadow: `
+      <el-card style="width: 480px" shadow="always">Always</el-card>
+      <el-card style="width: 480px" shadow="hover">Hover</el-card>
+      <el-card style="width: 480px" shadow="never">Never</el-card>
+    `,
+  });
+</script>