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(`<h1 id="vue-heading-flowbite" tabindex="-1">Vue Heading - Flowbite <a class="header-anchor" href="#vue-heading-flowbite" aria-label="Permalink to &quot;Vue Heading - Flowbite&quot;">​</a></h1><h4 id="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" tabindex="-1">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 <a class="header-anchor" href="#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" aria-label="Permalink to &quot;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&quot;">​</a></h4><h2 id="heading-one-h1" tabindex="-1">Heading one (H1) <a class="header-anchor" href="#heading-one-h1" aria-label="Permalink to &quot;Heading one (H1)&quot;">​</a></h2><p>Use the <code>tag=&quot;h1&quot;</code> as the most important text element to indicate the title of your web page.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h1&quot;</span><span style="color:#E1E4E8;">&gt;Heading 1&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h1&quot;</span><span style="color:#24292E;">&gt;Heading 1&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),k=r(`<h2 id="heading-two-h2" tabindex="-1">Heading two (H2) <a class="header-anchor" href="#heading-two-h2" aria-label="Permalink to &quot;Heading two (H2)&quot;">​</a></h2><p>The H2 tag can be used as subtitles of the page’s sections.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h2&quot;</span><span style="color:#E1E4E8;">&gt;Heading 2&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h2&quot;</span><span style="color:#24292E;">&gt;Heading 2&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),B=r(`<h2 id="heading-three-h3" tabindex="-1">Heading three (H3) <a class="header-anchor" href="#heading-three-h3" aria-label="Permalink to &quot;Heading three (H3)&quot;">​</a></h2><p>Use the H3 tags inside sections that already have a H2 available.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h3&quot;</span><span style="color:#E1E4E8;">&gt;Heading 3&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h3&quot;</span><span style="color:#24292E;">&gt;Heading 3&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),S=r(`<h2 id="heading-four-h4" tabindex="-1">Heading four (H4) <a class="header-anchor" href="#heading-four-h4" aria-label="Permalink to &quot;Heading four (H4)&quot;">​</a></h2><p>The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h4&quot;</span><span style="color:#E1E4E8;">&gt;Heading 4&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h4&quot;</span><span style="color:#24292E;">&gt;Heading 4&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),P=r(`<h2 id="heading-five-h5" tabindex="-1">Heading five (H5) <a class="header-anchor" href="#heading-five-h5" aria-label="Permalink to &quot;Heading five (H5)&quot;">​</a></h2><p>The H5 tag is most often used in longer articles with other heading already available or in sidebars.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h5&quot;</span><span style="color:#E1E4E8;">&gt;Heading 5&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h5&quot;</span><span style="color:#24292E;">&gt;Heading 5&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),V=r(`<h2 id="heading-six-h6" tabindex="-1">Heading six (H6) <a class="header-anchor" href="#heading-six-h6" aria-label="Permalink to &quot;Heading six (H6)&quot;">​</a></h2><p>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.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h6&quot;</span><span style="color:#E1E4E8;">&gt;Heading 6&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h6&quot;</span><span style="color:#24292E;">&gt;Heading 6&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),I=r(`<h2 id="color" tabindex="-1">Color <a class="header-anchor" href="#color" aria-label="Permalink to &quot;Color&quot;">​</a></h2><p>Use the <code>color</code> prop to set the text color.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-green-400&quot;</span><span style="color:#E1E4E8;">&gt;Green eading&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-green-400&quot;</span><span style="color:#24292E;">&gt;Green eading&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),N=r(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use the <code>class</code> attribute to apply the tailwind classes.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;!text-xl italic underline&quot;</span><span style="color:#E1E4E8;">&gt;Custom heading&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;!text-xl italic underline&quot;</span><span style="color:#24292E;">&gt;Custom heading&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,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};
