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

56
docs/components/card/card.md
View File

@@ -1,15 +1,65 @@
<script setup>
import CardExample from './examples/CardExample.vue'
import CardDefaultExample from './examples/CardDefaultExample.vue'
import CardImageExample from './examples/CardImageExample.vue'
import CardHorizontalExample from './examples/CardHorizontalExample.vue'
</script>
# Card
#### Get started with a large variety of Tailwind CSS card examples for your web project
---
:::tip
Original reference: [https://flowbite.com/docs/components/card/](https://flowbite.com/docs/components/card/)
:::
Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
## Prop - default
<CardDefaultExample />
```vue
<script setup>
import { Card } from 'flowbite-vue'
</script>
<template>
<Card></Card>
<Card :href="'#'"/>
</template>
```
<CardExample />
## Prop - image
<CardImageExample />
```vue
<script setup>
import { Card } from 'flowbite-vue'
</script>
<template>
<Card
:variant="'image'"
:href="'#'"
:imgSrc="'./images/blog/image-1.jpg'"
:imgAlt="'Image'"
/>
</template>
```
## Prop - horizontal
<CardHorizontalExample />
```vue
<script setup>
import { Card } from 'flowbite-vue'
</script>
<template>
<Card
:variant="'horizontal'"
:href="'#'"
:imgSrc="'./images/blog/image-4.jpg'"
:imgAlt="'Image'"
/>
</template>
```

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>