import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as E,d as h,$ as m,o as p,b as f,w as r,c as e,n as i,l as t,e as b,k as a,r as F,I as _,H as o,Q as c}from"./chunks/framework.3f630664.js";function v(s){const n=E(()=>s.variant.value==="default"?"block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700":s.variant.value==="image"?"max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700":s.variant.value==="horizontal"?"flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700":""),l=E(()=>s.variant.value==="horizontal"?"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg":"");return{cardClasses:n,horizontalImageClasses:l}}const w=["alt","src"],y=h({__name:"FwbCard",props:{href:{type:String,default:""},imgAlt:{type:String,default:""},imgSrc:{type:String,default:""},variant:{type:String,default:"default"}},setup(s){const n=s,{cardClasses:l,horizontalImageClasses:g}=v(m(n)),d=E(()=>n.href?"a":"div");return(u,j)=>(p(),f(_(d.value),{class:i(t(l)),href:s.href},{default:r(()=>[s.imgSrc?(p(),e("img",{key:0,alt:s.imgAlt,class:i([t(g),"rounded-t-lg"]),src:s.imgSrc},null,10,w)):b("",!0),a("div",null,[F(u.$slots,"default")])]),_:3},8,["class","href"]))}}),q={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},x=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),C={__name:"FwbCardExample",setup(s){return(n,l)=>(p(),e("div",q,[o(t(y),{href:"#"},{default:r(()=>[x]),_:1})]))}},k={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},A=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),D={__name:"FwbCardExampleImage",setup(s){return(n,l)=>(p(),e("div",k,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-1.jpg",variant:"image"},{default:r(()=>[A]),_:1})]))}},B={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},T=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),S={__name:"FwbCardExampleHorizontal",setup(s){return(n,l)=>(p(),e("div",B,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-4.jpg",variant:"horizontal"},{default:r(()=>[T]),_:1})]))}},P=c('<h1 id="vue-card-flowbite" tabindex="-1">Vue Card - Flowbite <a class="header-anchor" href="#vue-card-flowbite" aria-label="Permalink to &quot;Vue Card - Flowbite&quot;">​</a></h1><h4 id="get-started-with-a-large-variety-of-tailwind-css-card-examples-for-your-web-project" tabindex="-1">Get started with a large variety of Tailwind CSS card examples for your web project <a class="header-anchor" href="#get-started-with-a-large-variety-of-tailwind-css-card-examples-for-your-web-project" aria-label="Permalink to &quot;Get started with a large variety of Tailwind CSS card examples for your web project&quot;">​</a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/components/card/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/card/</a></p></div><p>Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.</p><h2 id="prop-default" tabindex="-1">Prop - default <a class="header-anchor" href="#prop-default" aria-label="Permalink to &quot;Prop - default&quot;">​</a></h2>',6),N=c(`<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-card</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-5&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#85E89D;">fwb-card</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;"> { FwbCard } </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-card</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;p-5&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">h5</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">h5</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#22863A;">fwb-card</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;"> { FwbCard } </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><h2 id="prop-image" tabindex="-1">Prop - image <a class="header-anchor" href="#prop-image" aria-label="Permalink to &quot;Prop - image&quot;">​</a></h2>`,2),V=c(`<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-card</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">img-alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">img-src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/docs/images/blog/image-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">variant</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;image&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-5&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#85E89D;">fwb-card</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;"> { FwbCard } </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-card</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">img-alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">img-src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/docs/images/blog/image-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">variant</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;image&quot;</span></span>
<span class="line"><span style="color:#24292E;">    &gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;p-5&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">h5</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">h5</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#22863A;">fwb-card</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;"> { FwbCard } </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><h2 id="prop-horizontal" tabindex="-1">Prop - horizontal <a class="header-anchor" href="#prop-horizontal" aria-label="Permalink to &quot;Prop - horizontal&quot;">​</a></h2>`,2),z=c(`<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-card</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">img-alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">img-src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/docs/images/blog/image-4.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">variant</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;horizontal&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;p-5&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#85E89D;">fwb-card</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;"> { FwbCard } </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-card</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">img-alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">img-src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/docs/images/blog/image-4.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">variant</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;horizontal&quot;</span></span>
<span class="line"><span style="color:#24292E;">    &gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;p-5&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">h5</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">h5</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#22863A;">fwb-card</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;"> { FwbCard } </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>`,1),R=JSON.parse('{"title":"Vue Card - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/card.md","filePath":"components/card.md"}'),I={name:"components/card.md"},O=Object.assign(I,{setup(s){return(n,l)=>(p(),e("div",null,[P,o(C),N,o(D),V,o(S),z]))}});export{R as __pageData,O as default};
