https://writedocs-documentation.pages.dev/assets/js/35e3d979.75e6a9b3.js

1"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([["9247"],{65579:function(e,n,i){i.r(n),i.d(n,{frontMatter:()=>a,default:()=>h,contentTitle:()=>c,assets:()=>d,toc:()=>l,metadata:()=>t});var t=JSON.parse('{"id":"Documentation/Creating Content/components/card-groups","title":"Card Lists","description":"Cards description","source":"@site/docs/Documentation/Creating Content/components/card-groups.mdx","sourceDirName":"Documentation/Creating Content/components","slug":"/create-content/components/card-groups","permalink":"/create-content/components/card-groups","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"card-groups","title":"Card Lists","slug":"/create-content/components/card-groups","description":"Cards description"},"sidebar":"Documentation","previous":{"title":"Callouts","permalink":"/create-content/components/callouts"},"next":{"title":"Cards","permalink":"/create-content/components/cards"}}'),o=i(74132),r=i(21494),s=i(10267);let a={id:"card-groups",title:"Card Lists",slug:"/create-content/components/card-groups",description:"Cards description"},c=void 0,d={},l=[{value:"Example Usage",id:"example-usage",level:2}];function p(e){let n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["Display cards side by side in a grid layout. The ",(0,o.jsx)("code",{children:"<CardList>"})," component allows you to organize multiple ",(0,o.jsx)("code",{children:"<Card>"})," components together, commonly used to align multiple cards within the same column."]}),"\n",(0,o.jsxs)(n.p,{children:["You can add a ",(0,o.jsx)(n.code,{children:"cols"})," property to the CardList component to define the number of columns on the card grid. You can add up to 5 columns."]}),"\n",(0,o.jsx)(s.UW,{type:"tip",children:(0,o.jsxs)(n.p,{children:["You can mix both ",(0,o.jsx)(n.a,{href:"/cards",children:(0,o.jsx)(n.code,{children:"<Cards>"})})," and ",(0,o.jsx)(n.a,{href:"/api-cards",children:(0,o.jsx)(n.code,{children:"<APICards>"})})," inside a ",(0,o.jsx)(n.code,{children:"<CardList>"})," component."]})}),"\n",(0,o.jsx)(n.h2,{id:"example-usage",children:"Example Usage"}),"\n",(0,o.jsxs)(s.CS,{cols:4,children:[(0,o.jsx)(s.Zb,{title:"Duotone Card",icon:"Book",description:"This card shows a book icon with duotone weight.",iconType:"duotone"}),(0,o.jsx)(s.Zb,{title:"Thin Card",icon:"airplane",description:"This card shows an airplane icon with thin weight.",iconType:"thin"}),(0,o.jsx)(s.Zb,{title:"Regular Card",icon:"alarm",description:"This card shows an alarm icon with regular weight.",iconType:"regular"}),(0,o.jsx)(s.Zb,{title:"Filled Card",icon:"club",description:"This card shows a club icon with filled weight.",iconType:"fill"})]}),"\n",(0,o.jsx)(s.cf,{title:"Code for Card Groups",children:(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:'<CardList cols={4}>\n  <Card \n    title="Duotone Card"\n    icon="Book"\n    description="This card shows a book icon with duotone weight."\n    iconType=\'duotone\'\n  />\n\n  <Card \n    title="Thin Card" \n    icon="airplane"\n    description="This card shows an airplane icon with thin weight."\n    iconType=\'thin\'\n  />\n\n  <Card \n    title="Regular Card" \n    icon="alarm"\n    description="This card shows an alarm icon with regular weight."\n    iconType=\'regular\'\n  />\n\n  <Card \n    title="Filled Card" \n    icon="club"\n    description="This card shows a club icon with filled weight."\n    iconType=\'fill\'\n  />\n</CardList>\n'})})})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}}}]);