https://seamlessui.vercel.app/_next/static/chunks/pages/docs/desig…ContentCardDesignSystem-139ece983789f1e6.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[562],{4552:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/design_System/ContentCardDesignSystem",function(){return n(39029)}])},50469:function(e,s,n){"use strict";var t=n(11527),o=n(71056);let i=()=>{let{frontMatter:e,title:s}=(0,o.ZR)();return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/logo.png"}),(0,t.jsx)("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/logo.png"}),(0,t.jsx)("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/logo.png"}),(0,t.jsx)("link",{rel:"manifest",href:"/logo.png"}),(0,t.jsx)("link",{rel:"mask-icon",href:"/logo.png",color:"#000000"}),(0,t.jsx)("meta",{name:"msapplication-TileColor",content:"#ffffff"}),(0,t.jsx)("meta",{name:"theme-color",content:"#ffffff"}),(0,t.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,t.jsx)("meta",{httpEquiv:"Content-Language",content:"en"}),(0,t.jsx)("meta",{name:"description",content:(null==e?void 0:e.description)||"The next gen UI made with simple HTML and Tailwind CSS. It's compatible with simple HTML, CSS static website or a React, Vue, Angular or Next.js Complex app. Zero JS and no-plugins installed."}),(0,t.jsx)("meta",{name:"og:description",content:e.description||"The next gen UI made with simple HTML and Tailwind CSS. It's compatible with simple HTML, CSS static website or a React, Vue, Angular or Next.js Complex app. Zero JS and no-plugins installed."}),(0,t.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,t.jsx)("meta",{name:"twitter:site",content:"@by_clueless"}),(0,t.jsx)("meta",{name:"twitter:image",content:e.image||"https://user-images.githubusercontent.com/98400348/236500880-7e777463-23a6-4b09-81e0-e83b7b843652.png"}),(0,t.jsx)("meta",{name:"og:title",content:s?s+" – Seamless UI":"Seamless UI"}),(0,t.jsx)("meta",{name:"og:image",content:e.image||"https://user-images.githubusercontent.com/98400348/236500880-7e777463-23a6-4b09-81e0-e83b7b843652.png"}),(0,t.jsx)("meta",{name:"apple-mobile-web-app-title",content:"Seamless UI"}),(0,t.jsx)("link",{rel:"stylesheet",href:"https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css",media:"print",onLoad:"this.media='all'"})]})};s.Z={project:{link:"https://github.com/Clueless-Community/seamless-ui"},editLink:{text:"Edit this page on GitHub"},docsRepositoryBase:"https://github.com/Clueless-Community/seamless-ui/tree/website-dev/",feedback:{content:"Question? Give us feedback →",labels:"feedback"},useNextSeoProps:()=>({titleTemplate:"%s – SeamLess UI"}),toc:{float:!0},head:(0,t.jsx)(i,{}),logo:()=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("img",{src:"/logo.svg",width:"50px",loading:"lazy"}),(0,t.jsx)("span",{className:"mx-2 font-extrabold hidden md:inline select-none",children:"SeamLess UI"}),(0,t.jsx)("span",{className:"text-gray-600 font-normal hidden lg:!inline whitespace-no-wrap",children:"Your UI Library"})]}),primaryHue:{dark:120,light:120},footer:{text:()=>(0,t.jsxs)("a",{href:"https://clueless.link",target:"_blank",rel:"noopener",className:"inline-flex items-center no-underline text-current font-semibold",children:[(0,t.jsx)("span",{className:"mr-1",children:"Powered by"}),(0,t.jsx)("span",{children:"ClueLess"})]})}}},39029:function(e,s,n){"use strict";n.r(s),n.d(s,{default:function(){return a.ZP}});var t,o=n(11527),i=n(55750),r=n(50469);n(5807);var l=n(26736);n(85518);var a=n(71056);let c={filePath:"pages/docs/design_System/ContentCardDesignSystem.mdx",route:"/docs/design_System/ContentCardDesignSystem",frontMatter:{},pageMap:[{kind:"Meta",data:{index:{title:"Introduction",type:"page",hidden:!0,display:"hidden"},docs:{title:"Docs",type:"page"},blog:{title:"Blog",type:"page"}}},{kind:"Folder",name:"blog",route:"/blog",children:[{kind:"MdxPage",name:"index",route:"/blog"},{kind:"Meta",data:{index:"Index"}}]},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{introduction:"\uD83D\uDCA1 Introduction","getting-started":"\uD83D\uDE80 Getting Started",components:"\uD83D\uDCBB | Components",design_

1System:"\uD83C\uDFA8 | Design Systems"}},{kind:"Folder",name:"components",route:"/docs/components",children:[{kind:"MdxPage",name:"accordion",route:"/docs/components/accordion"},{kind:"MdxPage",name:"alerts",route:"/docs/components/alerts"},{kind:"MdxPage",name:"avatar",route:"/docs/components/avatar"},{kind:"MdxPage",name:"badges",route:"/docs/components/badges"},{kind:"MdxPage",name:"breadcrumb",route:"/docs/components/breadcrumb"},{kind:"MdxPage",name:"buttons",route:"/docs/components/buttons"},{kind:"MdxPage",name:"content_Cards",route:"/docs/components/content_Cards"},{kind:"MdxPage",name:"feature_Cards",route:"/docs/components/feature_Cards"},{kind:"MdxPage",name:"form",route:"/docs/components/form"},{kind:"MdxPage",name:"pricing_Cards",route:"/docs/components/pricing_Cards"},{kind:"MdxPage",name:"product_Cards",route:"/docs/components/product_Cards"},{kind:"MdxPage",name:"profile_Card",route:"/docs/components/profile_Card"},{kind:"MdxPage",name:"store_Buttons",route:"/docs/components/store_Buttons"},{kind:"MdxPage",name:"testimonials",route:"/docs/components/testimonials"},{kind:"Meta",data:{accordion:"Accordion",alerts:"Alerts",avatar:"Avatar",badges:"Badges",breadcrumb:"Breadcrumb",buttons:"Buttons",content_Cards:"Content Cards",feature_Cards:"Feature Cards",form:"Form",pricing_Cards:"Pricing Cards",product_Cards:"Product Cards",profile_Card:"Profile Card",store_Buttons:"Store Buttons",testimonials:"Testimonials"}}]},{kind:"Folder",name:"design_System",route:"/docs/design_System",children:[{kind:"MdxPage",name:"AccordionDesignSystem",route:"/docs/design_System/AccordionDesignSystem"},{kind:"MdxPage",name:"AlertsDesignSystem",route:"/docs/design_System/AlertsDesignSystem"},{kind:"MdxPage",name:"AvatarDesignSystem",route:"/docs/design_System/AvatarDesignSystem"},{kind:"MdxPage",name:"BadgesDesignSystem",route:"/docs/design_System/BadgesDesignSystem"},{kind:"MdxPage",name:"BreadcrumbDesignSystem",route:"/docs/design_System/BreadcrumbDesignSystem"},{kind:"MdxPage",name:"ButtonDesignSystem",route:"/docs/design_System/ButtonDesignSystem"},{kind:"MdxPage",name:"ContentCardDesignSystem",route:"/docs/design_System/ContentCardDesignSystem"},{kind:"MdxPage",name:"FeatureCardDesignSystem",route:"/docs/design_System/FeatureCardDesignSystem"},{kind:"MdxPage",name:"PricingCardsDesignsystem",route:"/docs/design_System/PricingCardsDesignsystem"},{kind:"MdxPage",name:"ProductCardsDesignSystem",route:"/docs/design_System/ProductCardsDesignSystem"},{kind:"MdxPage",name:"StoreButtonDesignSystem",route:"/docs/design_System/StoreButtonDesignSystem"},{kind:"MdxPage",name:"TestimonialDesignSystem",route:"/docs/design_System/TestimonialDesignSystem"},{kind:"Meta",data:{AccordionDesignSystem:"Accordion",AlertsDesignSystem:"Alerts",AvatarDesignSystem:"Avatar",BadgesDesignSystem:"Badges",BreadcrumbDesignSystem:"Breadrumb",ButtonDesignSystem:"Button",FeatureCardDesignSystem:"Feature Card",ContentCardDesignSystem:"Content Card",ProductCardsDesignSystem:"Product Card",PricingCardsDesignsystem:"Pricing Card",StoreButtonDesignSystem:"Store Button",TestimonialDesignSystem:"Testimonial"}}]},{kind:"MdxPage",name:"getting-started",route:"/docs/getting-started"},{kind:"MdxPage",name:"introduction",route:"/docs/introduction"}]}],headings:[{type:"heading",depth:1,children:[{type:"text",value:"\uD83D\uDCD2 Content Card Design System ⭐",position:{start:{line:1,column:3,offset:2},end:{line:1,column:34,offset:33}}}],position:{start:{line:1,column:1,offset:0},end:{line:1,column:34,offset:33}},value:"\uD83D\uDCD2 Content Card Design System ⭐"},{type:"heading",depth:2,children:[{type:"text",value:"General convention to follow :",position:{start:{line:8,column:4,offset:641},end:{line:8,column:34,offset:671}}}],position:{start:{line:8,column:1,offset:638},end:{line:8,column:34,offset:671}},value:"General convention to follow :"},{type:"heading",depth:3,children:[{type:"strong",children:[{type:"text",value:"Border-radius",position:{start:{line:10,column:7,offset:679},end:{line:10,column:20,offset:692}}}

1],position:{start:{line:10,column:5,offset:677},end:{line:10,column:22,offset:694}}},{type:"text",value:" :",position:{start:{line:10,column:22,offset:694},end:{line:10,column:24,offset:696}}}],position:{start:{line:10,column:1,offset:673},end:{line:10,column:24,offset:696}},value:"Border-radius :"},{type:"heading",depth:3,children:[{type:"text",value:"Hover Color",position:{start:{line:14,column:5,offset:748},end:{line:14,column:16,offset:759}}}],position:{start:{line:14,column:1,offset:744},end:{line:14,column:16,offset:759}},value:"Hover Color"},{type:"heading",depth:3,children:[{type:"strong",children:[{type:"text",value:"Overlay:",position:{start:{line:21,column:7,offset:1023},end:{line:21,column:15,offset:1031}}}],position:{start:{line:21,column:5,offset:1021},end:{line:21,column:17,offset:1033}}}],position:{start:{line:21,column:1,offset:1017},end:{line:21,column:17,offset:1033}},value:"Overlay:"},{type:"heading",depth:3,children:[{type:"strong",children:[{type:"text",value:"Paddings :",position:{start:{line:24,column:7,offset:1109},end:{line:24,column:17,offset:1119}}}],position:{start:{line:24,column:5,offset:1107},end:{line:24,column:19,offset:1121}}}],position:{start:{line:24,column:1,offset:1103},end:{line:24,column:19,offset:1121}},value:"Paddings :"},{type:"heading",depth:3,children:[{type:"text",value:"Font :",position:{start:{line:28,column:5,offset:1231},end:{line:28,column:11,offset:1237}}}],position:{start:{line:28,column:1,offset:1227},end:{line:28,column:11,offset:1237}},value:"Font :"},{type:"heading",depth:3,children:[{type:"text",value:"Color :",position:{start:{line:35,column:5,offset:1455},end:{line:35,column:12,offset:1462}}}],position:{start:{line:35,column:1,offset:1451},end:{line:35,column:12,offset:1462}},value:"Color :"},{type:"heading",depth:3,children:[{type:"text",value:"Width & heights :",position:{start:{line:42,column:5,offset:1656},end:{line:42,column:22,offset:1673}}}],position:{start:{line:42,column:1,offset:1652},end:{line:42,column:22,offset:1673}},value:"Width & heights :"},{type:"heading",depth:3,children:[{type:"text",value:"Anchor tag :",position:{start:{line:56,column:5,offset:2027},end:{line:56,column:17,offset:2039}}}],position:{start:{line:56,column:1,offset:2023},end:{line:56,column:17,offset:2039}},value:"Anchor tag :"},{type:"heading",depth:3,children:[{type:"text",value:"Buttons :",position:{start:{line:62,column:5,offset:2191},end:{line:62,column:14,offset:2200}}}],position:{start:{line:62,column:1,offset:2187},end:{line:62,column:14,offset:2200}},value:"Buttons :"},{type:"heading",depth:3,children:[{type:"text",value:"Icons :",position:{start:{line:66,column:5,offset:2385},end:{line:66,column:12,offset:2392}}}],position:{start:{line:66,column:1,offset:2381},end:{line:66,column:12,offset:2392}},value:"Icons :"},{type:"heading",depth:3,children:[{type:"text",value:"Images :",position:{start:{line:72,column:5,offset:2529},end:{line:72,column:13,offset:2537}}}],position:{start:{line:72,column:1,offset:2525},end:{line:72,column:13,offset:2537}},value:"Images :"},{type:"heading",depth:2,children:[{type:"text",value:"Example Code :",position:{start:{line:76,column:4,offset:2795},end:{line:76,column:18,offset:2809}}}],position:{start:{line:76,column:1,offset:2792},end:{line:76,column:18,offset:2809}},value:"Example Code :"},{type:"heading",depth:2,children:[{type:"text",value:"Having some problem ? \uD83D\uDE15",position:{start:{line:103,column:4,offset:4250},end:{line:103,column:28,offset:4274}}}],position:{start:{line:103,column:1,offset:4247},end:{line:103,column:28,offset:4274}},value:"Having some problem ? \uD83D\uDE15"}],flexsearch:{codeblocks:!1}};globalThis.__nextra_internal__={pageMap:c.pageMap,route:c.route};let d="\uD83D\uDCD2 Content Card Design System ⭐";function h(e){let s=Object.assign({h1:"h1",p:"p",img:"img",h2:"h2",h3:"h3",strong:"strong",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",ul:"ul",li:"li",hr:"hr",a:"a",div:"div",pre:"pre",span:"span"},(0,l.ah)(),e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.h1,{children:"\uD83D\uDCD2 Content Card Design System ⭐"}

1),"\n",(0,o.jsx)(s.p,{children:"Contact card component is very much similar with Product card but only difference make between them to stand out as two different component as the content cover by the product card totally different as it Content-card doesn't cover the price or related stuff rating is exceptional."}),"\n",(0,o.jsx)(s.p,{children:"So content card is one another componet that covers the picture and related content along with component. It can be used in every context like testominal, product card all are subset of it as you can refer."}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.img,{src:"https://user-images.githubusercontent.com/98400348/232878436-445d146d-6628-47f8-a237-084300222867.png",alt:"image"})}),"\n",(0,o.jsx)(s.h2,{id:"general-convention-to-follow-",children:"General convention to follow :"}),"\n",(0,o.jsxs)(s.h3,{id:"border-radius-",children:[(0,o.jsx)(s.strong,{children:"Border-radius"})," :"]}),"\n",(0,o.jsxs)(s.p,{children:["Border radius of each card is ",(0,o.jsx)(s.code,{children:"rounded-2xl"})]}),"\n",(0,o.jsx)(s.h3,{id:"hover-color",children:"Hover Color"}),"\n",(0,o.jsxs)(s.p,{children:["For one of different design of this same component the hover color of buttton is:- ",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(s.strong,{children:(0,o.jsx)(s.code,{children:"hover:bg-blue-700"})})," for Blue theme Button, ",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(s.strong,{children:(0,o.jsx)(s.code,{children:"hover:bg-slate-800"})})," for Dark theme Button, and  ",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(s.strong,{children:(0,o.jsx)(s.code,{children:"hover:bg-slate-200"})})," for White theme Button ",(0,o.jsx)("br",{})]}),"\n",(0,o.jsx)(s.h3,{id:"overlay",children:(0,o.jsx)(s.strong,{children:"Overlay:"})}),"\n",(0,o.jsxs)(s.p,{children:["-Image overlay color with opacity in same feature ",(0,o.jsx)(s.code,{children:"bg-gray-800/50"})]}),"\n",(0,o.jsx)(s.h3,{id:"paddings-",children:(0,o.jsx)(s.strong,{children:"Paddings :"})}),"\n",(0,o.jsxs)(s.p,{children:["The padding could be variable depending on the card sizes and UI requirements but normally it is ",(0,o.jsx)(s.code,{children:"p-6"})]}),"\n",(0,o.jsx)(s.h3,{id:"font-",children:"Font :"}),"\n",(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{}),(0,o.jsx)(s.th,{children:"heading"}),(0,o.jsx)(s.th,{children:"Normal text"}),(0,o.jsx)(s.th,{children:"sub text"}),(0,o.jsx)(s.th,{children:"badge type"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{children:"size"}),(0,o.jsx)(s.td,{children:"text-2xl"}),(0,o.jsx)(s.td,{children:"text-lg"}),(0,o.jsx)(s.td,{children:"text-sm"}),(0,o.jsx)(s.td,{children:"text-sm / text-md"})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{children:"font-weight"}),(0,o.jsx)(s.td,{children:"semi-bold"}),(0,o.jsx)(s.td,{children:"semibold / normal"}),(0,o.jsx)(s.td,{children:"normal"}),(0,o.jsx)(s.td,{children:"normal"})]})]})]}),"\n",(0,o.jsx)(s.h3,{id:"color-",children:"Color :"}),"\n",(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{}),(0,o.jsx)(s.th,{children:"Dark"}),(0,o.jsx)(s.th,{children:"Blue"}),(0,o.jsx)(s.th,{children:"White"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{children:"Backgroun

1d Color"}),(0,o.jsx)(s.td,{children:"bg-slate-900"}),(0,o.jsx)(s.td,{children:"bg-white"}),(0,o.jsx)(s.td,{children:"bg-white"})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{children:"text color"}),(0,o.jsx)(s.td,{children:"text-white"}),(0,o.jsx)(s.td,{children:"text-blue-600/text-slate-900"}),(0,o.jsx)(s.td,{children:"text-slate-900"})]})]})]}),"\n",(0,o.jsx)(s.h3,{id:"width--heights-",children:"Width & heights :"}),"\n",(0,o.jsx)(s.p,{children:"The width of the component totally depends on the design."}),"\n",(0,o.jsx)(s.p,{children:"But we usually use these 3 widths \uD83D\uDD3D"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"w-48"})," → for small components"]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"w-72"})," → for medium components"]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"w-96"})," → for big components"]}),"\n"]}),"\n",(0,o.jsxs)(s.p,{children:["The height of the components depends on the amount of content on it. We need to make it fluid. ",(0,o.jsx)(s.strong,{children:"Giving a fixed height is not recommended at all."})]}),"\n",(0,o.jsx)(s.hr,{}),"\n",(0,o.jsx)(s.h3,{id:"anchor-tag-",children:"Anchor tag :"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"color"})," : ",(0,o.jsx)(s.code,{children:"text-blue-600"})]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"underline"})," : On hover there is an underline → ",(0,o.jsx)(s.code,{children:"hover:underline"})]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"underline offset"})," : ",(0,o.jsx)(s.code,{children:"underline-offset-4"})]}),"\n"]}),"\n",(0,o.jsx)(s.h3,{id:"buttons-",children:"Buttons :"}),"\n",(0,o.jsxs)(s.p,{children:["We need to use the already built buttons for this. ",(0,o.jsx)(s.strong,{children:(0,o.jsx)(s.a,{href:"https://github.com/Clueless-Community/seamless-ui/tree/main/Buttons",children:"Buttons"})})," \uD83D\uDD17\xa0. But you can coustomise it accordingly."]}),"\n",(0,o.jsx)(s.h3,{id:"icons-",children:"Icons :"}),"\n",(0,o.jsxs)(s.p,{children:["Icons must be used from ",(0,o.jsx)(s.strong,{children:(0,o.jsx)(s.a,{href:"https://heroicons.com/",children:"Heroicons"})})," \uD83D\uDD87️"]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note :"})," You need to use a solid 24X24 SVG form heroicons."]}),"\n",(0,o.jsx)(s.h3,{id:"images-",children:"Images :"}),"\n",(0,o.jsxs)(s.p,{children:["You can use this image kink as an demo image : ",(0,o.jsx)(s.a,{href:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfRyndmlRtGCgq2lnd32z0OgTVIQnmLLsUzw&usqp=CAU",children:(0,o.jsx)(s.code,{children:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfRyndmlRtGCgq2lnd32z0OgTVIQnmLLsUzw&usqp=CAU"})})]}),"\n",(0,o.jsx)(s.h2,{id:"example-code-",children:"Example Code :"}),"\n",(0,o.jsxs)(s.p,{children:["This is the example code of the ",(0,o.jsx)(s.code,{children:"content-card-2-white.html"})]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{children:(0,o.jsxs)(s.code,{"data-language":"html","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'rounded-2xl  w-72 text-white bg-white rounded-t-3xl rounded-b-3xl'"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"rounded-t-3xl "'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://live.staticflickr.com/65535/52680953849_d3e9252ca7_z.jpg"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"img"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"' p-6'"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"' font-bold text-2xl text-black mt-2 leading-8'"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"> What is web3?</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"' text-sm mb-5 mt-1 	text-gray-600  leading-4'"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Slate helps you see how  many more days you need to work to reach. Slate helps you see how many"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      more days .</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bg-slate-900 px-4 py-1 mr-2 rounded-full text-white text-sm font-normal font-sans text-center text-bg-gray-200 hover:bg-black transition-all disabled:bg-gray-400"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Tags</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bg-slate-900 px-4 py-1 mr-2 rounded-full text-white text-sm font-normal font-sans text-center text-bg-gray-200 hover:bg-black transition-all disabled:bg-gray-400"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Google</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bg-slate-900 px-4 py-1 rounded-full text-white text-sm font-normal font-sans text-center text-bg-gray-200 hover:bg-black transition-all disabled:bg-gray-400"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Nvdia</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"a"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"target"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"_blank"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'" h-5 mt-3 mb-4 underline font-normal tracking-tight text-neutral-900"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Know more"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"img"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"class"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'" -mt-4 ml-20 w-2 h-3 opacity-90"'})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"alt"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://live.staticflickr.com/65535/52681660092_5916e32cfc_s.jpg"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    </"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  </"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"a"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})})}),"\n",(0,o.jsx)(s.hr,{}),"\n",(0,o.jsx)(s.h2,{id:"having-some-problem--",children:"Having some problem ? \uD83D\uDE15"}),"\n",(0,o.jsxs)(s.p,{children:["If you still have a problem understanding this please join our ",(0,o.jsx)(s.a,{href:"https://discord.gg/zrVMjGW8sB",children:"discord server"})," to get help."]})]})}function x(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,l.ah)(),e.components);return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}c.title="string"==typeof d&&d||"Content Card";let p=e=>(0,o.jsx)(i.mK.Provider,{value:e,children:(0,o.jsx)(x,{})});(t=globalThis).__nextra_pageContext__||(t.__nextra_pageContext__=Object.create(null)),globalThis.__nextra_pageContext__["/docs/design_System/ContentCardDesignSystem"]={Content:p,pageOpts:c,themeConfig:r.Z}}},function(e){e.O(0,[316,976,774,888,179],function(){return e(e.s=4552)}),_N_E=e.O()}]);