Qwik blockquote - Flowbite

The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article

Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts. The main Blockquote component can be used together with thecite tag or attribute to also mention the source of the quote content.

To start using the component make sure that you have imported it from Flowbite Qwik:

import { Blockquote } from "flowbite-qwik"

Default blockquote

Use this example to quote an external source inside a <Blockquote> component.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Blockquote } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Blockquote>
      "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice
      for your next SaaS application."
    </Blockquote>
  )
})

Solid background

This example can be used as an alternative style to the default one by applying a solid background color.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Blockquote } from 'flowbite-qwik'

export default component$(() => {
  return (
    <>
      <p class="text-gray-500 dark:text-gray-400">
        Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By
        running a usability test, you’ll be able to see how users will interact with your design once it’s live.
      </p>
      <Blockquote class="my-4 border-l-4 border-gray-300 bg-gray-50 p-4 dark:border-gray-500 dark:bg-gray-800">
        "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect
        choice for your next SaaS application."
      </Blockquote>
      First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on
      Tailwind CSS that you can just copy-paste from the documentation.
    </>
  )
})

Blockquote icon

Use this example to show an icon above the blockquote text content.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Blockquote } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Blockquote>
      <svg
        class="mb-4 h-8 w-8 text-gray-400 dark:text-gray-600"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 18 14"
      >
        <path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z" />
      </svg>
      "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice
      for your next SaaS application."
    </Blockquote>
  )
})

Paragraph context

Use this example to show a <Blockquote> component between multiple paragraph elements.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Blockquote } from 'flowbite-qwik'

export default component$(() => {
  return (
    <>
      <p class="mb-3 text-gray-500 dark:text-gray-400">
        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software
        development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and
        changes.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6">
        <p class="mb-3 text-gray-500 dark:text-gray-400">
          Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software
          development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and
          changes.
        </p>
        <Blockquote class="mb-3">
          <p class="text-xl font-semibold italic text-gray-900 dark:text-white">
            " Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect
            choice for your next SaaS application. "
          </p>
        </Blockquote>
      </div>
      <p class="mb-3 text-gray-500 dark:text-gray-400">
        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate
        toil, and deploy changes with ease, with a complete audit trail for every change.
      </p>
    </>
  )
})

User testimonial

This example can be used for user testimonials by mentioning the author and occupation of the author.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar, Blockquote } from 'flowbite-qwik'

export default component$(() => {
  return (
    <figure class="mx-auto max-w-(--breakpoint-md) text-center">
      <svg
        class="mx-auto mb-3 h-10 w-10 text-gray-400 dark:text-gray-600"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 18 14"
      >
        <path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z" />
      </svg>
      <Blockquote>
        <p class="text-2xl font-medium italic text-gray-900 dark:text-white">
          "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect
          choice for your next SaaS application."
        </p>
      </Blockquote>
      <figcaption class="mt-6 flex items-center justify-center space-x-3">
        <Avatar
          rounded
          size="xs"
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          alt="profile picture"
        />
        <div class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
          <cite class="pr-3 font-medium text-gray-900 dark:text-white">Micheal Gough</cite>
          <cite class="pl-3 text-sm text-gray-500 dark:text-gray-400">CEO at Google</cite>
        </div>
      </figcaption>
    </figure>
  )
})

User Review

Use this example to show a user review with rating stars and the name and occupation of the author.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar, Blockquote, Rating } from 'flowbite-qwik'

export default component$(() => {
  return (
    <figure class="max-w-(--breakpoint-md)">
      <div class="mb-4 flex items-center">
        <Rating size="md" rating={4} />
      </div>
      <Blockquote>
        <p class="text-2xl font-semibold text-gray-900 dark:text-white">
          "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect
          choice for your next SaaS application."
        </p>
      </Blockquote>
      <figcaption class="mt-6 flex items-center space-x-3">
        <Avatar
          rounded
          size="xs"
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          alt="profile picture"
        />
        <div class="flex items-center divide-x-2 divide-gray-300 dark:divide-gray-700">
          <cite class="pr-3 font-medium text-gray-900 dark:text-white">Bonnie Green</cite>
          <cite class="pl-3 text-sm text-gray-500 dark:text-gray-400">CTO at Flowbite</cite>
        </div>
      </figcaption>
    </figure>
  )
})

Alignment

Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Blockquote, Select } from 'flowbite-qwik'

export default component$(() => {
  const selected = useSignal('text-left')
  const alignments = [
    { value: 'text-left', name: 'Left (default)' },
    { value: 'text-center', name: 'Center' },
    { value: 'text-right', name: 'Right' },
  ]

  return (
    <div class="flex flex-col gap-5">
      <Select bind:value={selected} options={alignments} label="Select an alignment" />

      <Blockquote class={selected.value}>
        "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect
        choice for your next SaaS application."
      </Blockquote>
    </div>
  )
})

Sizes

Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Blockquote, Select } from 'flowbite-qwik'

export default component$(() => {
  const selected = useSignal('text-left')
  const sizes = [
    { value: 'text-lg', name: 'Small (default)' },
    { value: 'text-xl', name: 'Medium' },
    { value: 'text-2xl', name: 'Large' },
  ]

  return (
    <div class="flex flex-col gap-5">
      <Select bind:value={selected} options={sizes} label="Select a size" />

      <Blockquote class={selected.value}>
        "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect
        choice for your next SaaS application."
      </Blockquote>
    </div>
  )
})