Qwik hr - Flowbite

Create a horizontal line using the `Hr` component to separate content such as paragraphs, blockquotes, and other elements

The Hr component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.

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

import { Hr } from "flowbite-qwik"

Default HR

Use this example to separate text content with a <hr /> horizontal line.

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

export default component$(() => {
  return (
    <>
      <p class="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>
      <Hr />
      <p class="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>
    </>
  )
})

Trimmed

Use this example to show a shorter version of the horizontal line.

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

export default component$(() => {
  return (
    <>
      <p class="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>
      <Hr.Trimmed />
      <p class="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>
    </>
  )
})

Icon HR

This example can be used to set a default icon in the middle of the HR element.

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

export default component$(() => {
  return (
    <>
      <p class="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>
      <Hr.Icon />
      <p class="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>
    </>
  )
})

Custom icon HR

This example can be used to set a custom icon in the middle of the HR element.

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

export default component$(() => {
  return (
    <>
      <p class="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>
      <Hr.Icon icon={IconAddressCardSolid} />
      <p class="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>
    </>
  )
})

HR with Text

Use this example to add a text in the middle of the HR component.

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

export default component$(() => {
  return (
    <>
      <p class="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>
      <Hr.Text text="or" />
      <p class="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>
    </>
  )
})

HR Shape

This example can be used to separate content with an HR tag as a shape instead of a line.

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

export default component$(() => {
  return (
    <>
      <p class="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>
      <Hr.Square />
      <p class="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>
    </>
  )
})