jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create card component with docs

Browse Source
This commit is contained in:
AhnafAhamed
2022-09-19 07:15:37 +05:30
parent da2e9ca726
commit b2b908bf0c
9 changed files with 136 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/card/examples/CardDefaultExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Card :href="'#'">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</Card>
</div>
</template>
<script setup>
import { Card } from '../../../../src/index'
</script>

8
docs/components/card/examples/CardExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<div class="vp-raw flex flex-col">
<Card></Card>
</div>
</template>
<script setup>
import { Card } from '../../../../src/index'
</script>

11
docs/components/card/examples/CardHorizontalExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Card :href="'#'" :variant="'horizontal'" :imgSrc="'https://flowbite.com/docs/images/blog/image-4.jpg'" :imgAlt="'Desk'">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</Card>
</div>
</template>
<script setup>
import { Card } from '../../../../src/index'
</script>

11
docs/components/card/examples/CardImageExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Card :href="'#'" :variant="'image'" :imgSrc="'https://flowbite.com/docs/images/blog/image-1.jpg'" :imgAlt="'Desk'">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</Card>
</div>
</template>
<script setup>
import { Card } from '../../../../src/index'
</script>