Qwik card - Flowbite

Get started with the card component to show content in a box such as titles, descriptions, and images based on multiple styles and sizes built with Qwik

The card component can be used to show a wide variety of content such as previews of blog posts, user profiles, pricing plans, and more. Choose from one of the many examples built with Qwik and the utility classes from Tailwind CSS.

To start using the card component you will need to import it from flowbite-qwik :

import { Card } from "flowbite-qwik"

Default card#

Use this example to show a simple card component with a title and description and apply the href tag to the <Card> component to set a hyperlink to the card.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card href="#" class="max-w-sm">
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <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>
  )
})

Card with CTA button#

By also importing the <Button> component you can add it inside the card to show a call-to-action button.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button, Card, Heading } from 'flowbite-qwik'
import { IconArrowRightOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <Card class="max-w-sm">
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <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>
      <Button suffix={IconArrowRightOutline}>Read more</Button>
    </Card>
  )
})

Card with image#

Add an image to the card by using the imgSrc prop and set the imgAlt prop to add an alt text to the image.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card
      class="max-w-sm"
      imgAlt="Meaningful alt text for an image that is not purely decorative"
      imgSrc="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/mqvec5i4xq0lmxr7yh4k.jpg"
    >
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <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>
  )
})

Card with custom image#

Specify your own image component for the card by using the imgAs prop

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card
      class="max-w-sm"
      imgAs={
        <img
          width="920"
          height="613"
          src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/mqvec5i4xq0lmxr7yh4k.jpg"
          alt="image 1"
        />
      }
    >
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <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>
  )
})

Card horizontal#

Use the horizontal prop to show the card in a horizontal layout.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card
      class="max-w-sm"
      imgSrc="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/js3joe8z5dubh8cjqvcq.jpg"
      horizontal
    >
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <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>
  )
})

Use this example to show a user card with a profile picture, name, job title, buttons and a dropdown menu.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button, Card, Dropdown, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card class="max-w-sm">
      <div class="flex justify-end px-4 pt-4">
        <Dropdown inline label="">
          <Dropdown.Item>
            <a
              href="#"
              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Edit
            </a>
          </Dropdown.Item>
          <Dropdown.Item>
            <a
              href="#"
              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Export Data
            </a>
          </Dropdown.Item>
          <Dropdown.Item>
            <a
              href="#"
              class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
            >
              Delete
            </a>
          </Dropdown.Item>
        </Dropdown>
      </div>
      <div class="flex flex-col items-center pb-10">
        <img
          alt="Bonnie image"
          height="96"
          src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
          width="96"
          class="mb-3 rounded-full shadow-lg"
        />
        <Heading tag="h5" class="mb-">
          Bonnie Green
        </Heading>
        <span class="text-sm text-gray-500 dark:text-gray-400">Visual Designer</span>
        <div class="mt-4 flex space-x-3 lg:mt-6">
          <Button href="#">Add friend</Button>
          <Button href="#" color="light">
            Message
          </Button>
        </div>
      </div>
    </Card>
  )
})

Card with form#

You can also add form elements inside the card component such as for sign up or login forms.

Edit on GitHub

tsx

import { component$, useSignal } from '@builder.io/qwik'
import { Button, Card, Checkbox, Input } from 'flowbite-qwik'

export default component$(() => {
  const email = useSignal('')
  const password = useSignal('')
  const remember = useSignal(false)

  return (
    <Card class="max-w-sm">
      <form class="flex flex-col gap-4">
        <div>
          <div class="mb-2 block">
            <label for="email1">Your email"</label>
          </div>
          <Input bind:value={email} id="email1" type="email" placeholder="name@flowbite.com" required />
        </div>
        <div>
          <div class="mb-2 block">
            <label for="password1"> Your password</label>
          </div>
          <Input bind:value={password} id="password1" type="password" required />
        </div>
        <div class="flex items-center gap-2">
          <Checkbox bind:checked={remember} />
          <label form="remember">Remember me</label>
        </div>
        <Button type="submit">Submit</Button>
      </form>
    </Card>
  )
})

E-commerce card#

Use this example to show a product card with an image (product preview), title, price, rating stars and buttons built for E-commerce websites.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button, Card, Heading, Link } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card class="max-w-sm" imgAlt="Apple Watch Series 7 in colors pink, silver, and black" imgSrc="/apple-watch.png">
      <Link href="#">
        <Heading tag="h5">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</Heading>
      </Link>
      <div class="mb-5 mt-2.5 flex items-center">
        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        <span class="ml-3 mr-2 rounded bg-cyan-100 px-2.5 py-0.5 text-xs font-semibold text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800">5.0</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
        <Button href="#">Add to cart</Button>
      </div>
    </Card>
  )
})

Card with list#

Use this component to display a card with a list of items such as your latest customers or latest orders that include an image, descriptive text and a link to view more.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Heading, Link } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card class="max-w-sm">
      <div class="mb-4 flex items-center justify-between">
        <Heading tag="h5">Latest Customers</Heading>
        <Link href="#" class="text-sm">
          View all
        </Link>
      </div>
      <div class="flow-root">
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 sm:py-4">
            <div class="flex items-center space-x-4">
              <div class="shrink-0">
                <img
                  alt="Neil image"
                  height="32"
                  src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/on9fjbionkpt1fqhtbov.jpg"
                  width="32"
                  class="rounded-full"
                />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
                <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@windster.com</p>
              </div>
              <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
            </div>
          </li>
          <li class="py-3 sm:py-4">
            <div class="flex items-center space-x-4">
              <div class="shrink-0">
                <img
                  alt="Bonnie image"
                  height="32"
                  src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
                  width="32"
                  class="rounded-full"
                />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
                <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@windster.com</p>
              </div>
              <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
            </div>
          </li>
          <li class="py-3 sm:py-4">
            <div class="flex items-center space-x-4">
              <div class="shrink-0">
                <img
                  alt="Michael image"
                  height="32"
                  src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/g5dmxlpqgtkar6bb55b6.jpg"
                  width="32"
                  class="rounded-full"
                />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
                <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@windster.com</p>
              </div>
              <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
            </div>
          </li>
          <li class="py-3 sm:py-4">
            <div class="flex items-center space-x-4">
              <div class="shrink-0">
                <img
                  alt="Lana image"
                  height="32"
                  src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
                  width="32"
                  class="rounded-full"
                />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
                <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@windster.com</p>
              </div>
              <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
            </div>
          </li>
          <li class="pb-0 pt-3 sm:pt-4">
            <div class="flex items-center space-x-4">
              <div class="shrink-0">
                <img
                  alt="Thomas image"
                  height="32"
                  src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
                  width="32"
                  class="rounded-full"
                />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-white">Thomes Lean</p>
                <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@windster.com</p>
              </div>
              <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
            </div>
          </li>
        </ul>
      </div>
    </Card>
  )
})

Pricing card#

Use the pricing card component to show the pricing of your product or service.

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Button, Card, Heading, useFlowbiteThemable } from 'flowbite-qwik'
import { IconCheckCircleSolid } from 'flowbite-qwik-icons'

export default component$(() => {
  const { textClasses } = useFlowbiteThemable()

  return (
    <Card class="max-w-sm">
      <Heading tag="h5" class="mb-4">
        Standard plan
      </Heading>
      <div class="flex items-baseline text-gray-900 dark:text-white">
        <span class="text-3xl font-semibold">$</span>
        <span class="text-5xl font-extrabold tracking-tight">49</span>
        <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="my-7 space-y-5">
        <li class="flex space-x-3">
          <IconCheckCircleSolid class={['h-5 w-5', textClasses.value]} />
          <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">2 team members</span>
        </li>
        <li class="flex space-x-3">
          <IconCheckCircleSolid class={['h-5 w-5', textClasses.value]} />
          <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">20GB Cloud storage</span>
        </li>
        <li class="flex space-x-3">
          <IconCheckCircleSolid class={['h-5 w-5', textClasses.value]} />
          <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">Integration help</span>
        </li>
        <li class="flex space-x-3 line-through decoration-gray-500">
          <IconCheckCircleSolid class={['h-5 w-5', 'text-gray-400 dark:text-gray-500']} />
          <span class="text-base font-normal leading-tight text-gray-500">Sketch Files</span>
        </li>
        <li class="flex space-x-3 line-through decoration-gray-500">
          <IconCheckCircleSolid class={['h-5 w-5', 'text-gray-400 dark:text-gray-500']} />
          <span class="text-base font-normal leading-tight text-gray-500">API Access</span>
        </li>
        <li class="flex space-x-3 line-through decoration-gray-500">
          <IconCheckCircleSolid class={['h-5 w-5', 'text-gray-400 dark:text-gray-500']} />
          <span class="text-base font-normal leading-tight text-gray-500">Complete documentation</span>
        </li>
        <li class="flex space-x-3 line-through decoration-gray-500">
          <IconCheckCircleSolid class={['h-5 w-5', 'text-gray-400 dark:text-gray-500']} />
          <span class="text-base font-normal leading-tight text-gray-500">24×7 phone & email support</span>
        </li>
      </ul>
      <Button>Choose plan</Button>
    </Card>
  )
})

Custom theme#

Use the theme prop to customize styles of the component : root/image/content

Edit on GitHub

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Card
      class="max-w-sm"
      imgAlt="Meaningful alt text for an image that is not purely decorative"
      imgSrc="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/mqvec5i4xq0lmxr7yh4k.jpg"
      theme={{ root: 'bg-red-100 dark:bg-orange-800', image: 'opacity-30 dark:opacity-80', content: 'p-2' }}
    >
      <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
      <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>
  )
})