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: 'Button', link: '/components/button/button.md' },
{ text: 'Badge', link: 'components/badge/badge.md' }, { text: 'Badge', link: 'components/badge/badge.md' },
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' }, { text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
{ text: 'Card', link: 'components/card/card.md' },
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' }, { text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
{ text: 'Spinner', link: '/components/spinner/spinner.md' }, { text: 'Spinner', link: '/components/spinner/spinner.md' },
{ text: 'Tabs', link: '/components/tabs/tabs.md' }, { text: 'Tabs', link: '/components/tabs/tabs.md' },
@@ -47,7 +48,6 @@ function getComponents() {
{ text: 'Toast', link: 'components/toast/toast.md' }, { text: 'Toast', link: 'components/toast/toast.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' }, { text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Card', link: 'components/card/card.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' }, { text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' }, { text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Modal', link: 'components/modal/modal.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' import { TheCard } from 'flowbite-vue'
</script> </script>
<template> <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> </template>
``` ```
@@ -37,12 +42,12 @@ import { TheCard } from 'flowbite-vue'
import { TheCard } from 'flowbite-vue' import { TheCard } from 'flowbite-vue'
</script> </script>
<template> <template>
<the-card <the-card variant="image" img-src="https://flowbite.com/docs/images/blog/image-1.jpg" img-alt="Desk">
variant="image" <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
href="#" <p class="font-normal text-gray-700 dark:text-gray-400">
img-src="./images/blog/image-1.jpg" Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
img-alt="Image" </p>
/> </the-card>
</template> </template>
``` ```
@@ -55,11 +60,11 @@ import { TheCard } from 'flowbite-vue'
import { TheCard } from 'flowbite-vue' import { TheCard } from 'flowbite-vue'
</script> </script>
<template> <template>
<the-card <the-card href="#" variant="horizontal" img-src="https://flowbite.com/docs/images/blog/image-4.jpg" img-alt="Desk">
variant="horizontal" <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
href="#" <p class="font-normal text-gray-700 dark:text-gray-400">
img-src="./images/blog/image-4.jpg" Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
img-alt="Image" </p>
/> </the-card>
</template> </template>
``` ```