import{t as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as u,Z as _,o as p,b as e,w as o,r as m,L as b,l,I as f,a as c,c as F,H as t,Q as r}from"./chunks/framework.3f630664.js";const E=u({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(a){const s=a,n={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},y=_(),d=h("w-full",n[s.tag],s.color,s.customSize,y.class),g=s.tag;return(i,R)=>(p(),e(f(l(g)),b(i.$attrs,{class:l(d)}),{default:o(()=>[m(i.$slots,"default")]),_:3},16,["class"]))}}),v={__name:"FwbHExampleLevel1",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h1"},{default:o(()=>[c(" Heading 1 ")]),_:1}))}},w={__name:"FwbHExampleLevel2",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h2"},{default:o(()=>[c(" Heading 2 ")]),_:1}))}},A={__name:"FwbHExampleLevel3",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h3"},{default:o(()=>[c(" Heading 3 ")]),_:1}))}},H={__name:"FwbHExampleLevel4",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h4"},{default:o(()=>[c(" Heading 4 ")]),_:1}))}},C={__name:"FwbHExampleLevel5",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h5"},{default:o(()=>[c(" Heading 5 ")]),_:1}))}},D={__name:"FwbHExampleLevel6",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h6"},{default:o(()=>[c(" Heading 6 ")]),_:1}))}},x={__name:"FwbHExampleColor",setup(a){return(s,n)=>(p(),e(l(E),{color:"text-green-400"},{default:o(()=>[c(" Green heading ")]),_:1}))}},q={__name:"FwbHExampleCustom",setup(a){return(s,n)=>(p(),e(l(E),{class:"underline italic !text-xl"},{default:o(()=>[c(" Custom heading ")]),_:1}))}},T=r(`

Vue 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 ​

Heading one (H1) ​

Use the tag="h1" as the most important text element to indicate the title of your web page.

vue
<template>
  <fwb-heading tag="h1">Heading 1</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading tag="h1">Heading 1</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,5),k=r(`

Heading two (H2) ​

The H2 tag can be used as subtitles of the page’s sections.

vue
<template>
  <fwb-heading tag="h2">Heading 2</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading tag="h2">Heading 2</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),B=r(`

Heading three (H3) ​

Use the H3 tags inside sections that already have a H2 available.

vue
<template>
  <fwb-heading tag="h3">Heading 3</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading tag="h3">Heading 3</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),S=r(`

Heading four (H4) ​

The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.

vue
<template>
  <fwb-heading tag="h4">Heading 4</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading tag="h4">Heading 4</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),P=r(`

Heading five (H5) ​

The H5 tag is most often used in longer articles with other heading already available or in sidebars.

vue
<template>
  <fwb-heading tag="h5">Heading 5</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading tag="h5">Heading 5</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),V=r(`

Heading six (H6) ​

Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.

vue
<template>
  <fwb-heading tag="h6">Heading 6</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading tag="h6">Heading 6</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),I=r(`

Color ​

Use the color prop to set the text color.

vue
<template>
  <fwb-heading color="text-green-400">Green eading</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading color="text-green-400">Green eading</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),N=r(`

Custom classes ​

Use the class attribute to apply the tailwind classes.

vue
<template>
  <fwb-heading class="!text-xl italic underline">Custom heading</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
<template>
  <fwb-heading class="!text-xl italic underline">Custom heading</fwb-heading>
</template>

<script setup>
import { FwbHeading } from 'flowbite-vue'
</script>
`,3),z=JSON.parse('{"title":"Vue Heading - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/heading.md","filePath":"components/heading.md"}'),$={name:"components/heading.md"},G=Object.assign($,{setup(a){return(s,n)=>(p(),F("div",null,[T,t(v),k,t(w),B,t(A),S,t(H),P,t(C),V,t(D),I,t(x),N,t(q)]))}});export{z as __pageData,G as default};