Qwik heading - Flowbite

The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts

Get started with the heading component to define titles and subtitles on a web page and also improve the on-page SEO metrics of your website by targeting high-traffic keywords on Google. At least one unique H1 tag should be available for each page on your website with the next tags starting from H2 to H6 for each section. Choose from a collection of custom heading components based on multiple styles and layouts built with the utility classes from Tailwind CSS.

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

import { Heading } from "flowbite-qwik"

Default heading#

Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.

Edit on GitHub

tsx

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

export default component$(() => {
  return (
    <div class="text-center">
      <Heading class="mb-4">We invest in the world’s potential</Heading>
      <p class="mb-6 text-lg font-normal text-gray-500 dark:text-gray-400 sm:px-16 lg:text-xl xl:px-48">
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </p>

      <Button href="#" suffix={IconArrowRightOutline}>
        Learn more
      </Button>
    </div>
  )
})

Second-level heading#

Use this example of a second-level H2 heading as the main subtitle for each section of your web page.

Edit on GitHub

tsx

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

export default component$(() => {
  return (
    <>
      <Heading tag="h2">Payments tool for companies</Heading>
      <p class="my-4 text-lg text-gray-500">
        Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS
        and designed in Figma.
      </p>
      <p class="mb-4 text-lg font-normal 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.
      </p>
      <Link href="#" iconRight={IconAngleRightOutline}>
        Read more
      </Link>
    </>
  )
})

Highlighted heading#

Use this example to highlight a certain portion of the heading text with a different color.

Edit on GitHub

tsx

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

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

  return (
    <>
      <Heading tag="h1" class="mb-4">
        Get back to growth with <span class={textClasses.value}>the world's #1</span> CRM.
      </Heading>
      <p class="text-lg font-normal text-gray-500 dark:text-gray-400 lg:text-xl">
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </p>
    </>
  )
})

Heading mark#

This example can be used to mark one part of the heading text with a solid background for highlighting.

Edit on GitHub

tsx

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

export default component$(() => {
  return (
    <>
      <Heading tag="h1" class="mb-4">
        Regain <mark class="rounded bg-blue-600 px-2 text-white dark:bg-blue-500">control</mark> over your days
      </Heading>
      <p class="text-lg font-normal text-gray-500 dark:text-gray-400 lg:text-xl">
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </p>
    </>
  )
})

Heading underline#

Get started with this example to underline an important part of the heading component using the offset feature from Tailwind CSS.

Edit on GitHub

tsx

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

export default component$(() => {
  return (
    <>
      <Heading tag="h1" class="mb-4">
        We invest in the <span class="underline-offset-3 underline decoration-blue-400 decoration-8 dark:decoration-blue-600">world’s potential</span>
      </Heading>
      <p class="text-lg font-normal text-gray-500 dark:text-gray-400 lg:text-xl">
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </p>
    </>
  )
})

Sizes#

The heading component has six levels of importance starting from H1 which has to be unique on the page and has the greatest weight of importance all the way to H6.

Edit on GitHub

tsx

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

export default component$(() => {
  const selected = useSignal<HeadingTag>('h1')
  const sizes = [
    { value: 'h1', name: 'Heading one (H1 - default)' },
    { value: 'h2', name: 'Heading two (H2)' },
    { value: 'h3', name: 'Heading three (H3)' },
    { value: 'h4', name: 'Heading four (H4)' },
    { value: 'h5', name: 'Heading five (H5)' },
    { value: 'h6', name: 'Heading fix (H6)' },
  ]

  return (
    <>
      <Select bind:value={selected} options={sizes} label="Select a size" />

      <Heading tag={selected.value} class="mt-4">
        We invest in the world’s potential
      </Heading>
    </>
  )
})