jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
main
flowbite-vue/docs/.vitepress/dist/assets/components_card.md.8594cbd9.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

108 lines
27 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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};
Reference in New Issue View Git Blame Copy Permalink