Skip to content

# Vue Card - Flowbite ​

#### Get started with a large variety of Tailwind CSS card examples for your web project ​

TIP

Original reference: 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 ​

##### Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

vue

    <template>
        <fwb-card href="#">
          <div class="p-5">
            <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>
          </div>
        </fwb-card>
    </template>

    <script setup>
    import { FwbCard } from 'flowbite-vue'
    </script>

    <template>
        <fwb-card href="#">
          <div class="p-5">
            <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>
          </div>
        </fwb-card>
    </template>

    <script setup>
    import { FwbCard } from 'flowbite-vue'
    </script>

## Prop - image ​

##### Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

vue

    <template>
        <fwb-card
          img-alt="Desk"
          img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
          variant="image"
        >
          <div class="p-5">
            <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>
          </div>
        </fwb-card>
    </template>

    <script setup>
    import { FwbCard } from 'flowbite-vue'
    </script>

    <template>
        <fwb-card
          img-alt="Desk"
          img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
          variant="image"
        >
          <div class="p-5">
            <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>
          </div>
        </fwb-card>
    </template>

    <script setup>
    import { FwbCard } from 'flowbite-vue'
    </script>

## Prop - horizontal ​

##### Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

vue

    <template>
        <fwb-card
          img-alt="Desk"
          img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
          variant="horizontal"
        >
          <div class="p-5">
            <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>
          </div>
        </fwb-card>
    </template>

    <script setup>
    import { FwbCard } from 'flowbite-vue'
    </script>

    <template>
        <fwb-card
          img-alt="Desk"
          img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
          variant="horizontal"
        >
          <div class="p-5">
            <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>
          </div>
        </fwb-card>
    </template>

    <script setup>
    import { FwbCard } from 'flowbite-vue'
    </script>