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

docs: updated Card component examples

Browse Source
This commit is contained in:
Ilya Artamonov
2022-09-22 12:25:24 +03:00
parent 5635e1fa0c
commit 3f26565010
2 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -40,6 +40,7 @@ function getComponents() {
{ text: 'Button', link: '/components/button/button.md' },
{ text: 'Badge', link: 'components/badge/badge.md' },
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
{ text: 'Card', link: 'components/card/card.md' },
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
{ text: 'Spinner', link: '/components/spinner/spinner.md' },
{ text: 'Tabs', link: '/components/tabs/tabs.md' },
@@ -47,7 +48,6 @@ function getComponents() {
{ text: 'Toast', link: 'components/toast/toast.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Card', link: 'components/card/card.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Modal', link: 'components/modal/modal.md' },

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

@@ -24,7 +24,12 @@ Use these responsive card components to show data entries and information to you
import { TheCard } from 'flowbite-vue'
</script>
<template>
<the-card href="#"/>
<the-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>
</the-card>
</template>
```
@@ -37,12 +42,12 @@ import { TheCard } from 'flowbite-vue'
import { TheCard } from 'flowbite-vue'
</script>
<template>
<the-card
variant="image"
href="#"
img-src="./images/blog/image-1.jpg"
img-alt="Image"
/>
<the-card variant="image" img-src="https://flowbite.com/docs/images/blog/image-1.jpg" img-alt="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>
</the-card>
</template>
```
@@ -55,11 +60,11 @@ import { TheCard } from 'flowbite-vue'
import { TheCard } from 'flowbite-vue'
</script>
<template>
<the-card
variant="horizontal"
href="#"
img-src="./images/blog/image-4.jpg"
img-alt="Image"
/>
<the-card href="#" variant="horizontal" img-src="https://flowbite.com/docs/images/blog/image-4.jpg" img-alt="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>
</the-card>
</template>
```