text: "use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[2826],{7525:function(t,n,e){e.r(n),e.d(n,{frontMatter:function(){return d},contentTitle:function(){return i},metadata:function(){return s},toc:function(){return p},default:function(){return m}});var l=e(7462),o=e(3366),r=(e(7294),e(4137)),u=e(6086),a=["components"],d={},i="Card",s={unversionedId:"Components/Card",id:"Components/Card",isDocsHomePage:!1,title:"Card",description:"Card renders a responsive box-model layout component. Inherits props from Box component.",source:"@site/docs/Components/Card.mdx",sourceDirName:"Components",slug:"/Components/Card",permalink:"/docs/Components/Card",editUrl:"https://github.com/headline-design/pipeline-ui/blob/main/design-site/docs/Components/Card.mdx",version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Button",permalink:"/docs/Components/Button"},next:{title:"Checkbox",permalink:"/docs/Components/Checkbox"}},p=[{value:"Usage Example",id:"usage-example",children:[{value:"Props",id:"props",children:[]}]}],k={toc:p};function m(t){var n=t.components,e=(0,o.Z)(t,a);return(0,r.kt)("wrapper",(0,l.Z)({},k,e,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"card"},"Card"),(0,r.kt)("p",null,"Card renders a responsive box-model layout component. Inherits props from Box component."),(0,r.kt)("h2",{id:"usage-example"},"Usage Example"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"import {Card, Text, Icon, Button} from 'pipeline-ui'\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<Card bg={"grey"} width={"auto"} maxWidth={"420px"} mx={"auto"} px={[3, 3, 4]}>\n  <Text\n    caps\n    fontSize={0}\n    fontWeight={4}\n    mb={3}\n    display={"flex"}\n    alignItems={"center"}\n  >\n  <Icon name={"AccountBalanceWallet"} mr={2} />\n    Your balance:\n  </Text>\n  <Button>Check</Button>\n</Card>\n')),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)(u.Z,{mdxType:"Table"},(0,r.kt)("thead",null,(0,r.kt)("tr",null,(0,r.kt)("th",null,"Prop"),(0,r.kt)("th",null,"Type"),(0,r.kt)("th",null,"Default"),(0,r.kt)("th",null,"Description"))),(0,r.kt)("tbody",null,(0,r.kt)("tr",null,(0,r.kt)("td",null,"bg"),(0,r.kt)("td",null,"string (optional)"),(0,r.kt)("td",null,"'white'"),(0,r.kt)("td",null)),(0,r.kt)("tr",null,(0,r.kt)("td",null,"border"),(0,r.kt)("td",null,"integer (optional)"),(0,r.kt)("td",null,"1"),(0,r.kt)("td",null)),(0,r.kt)("tr",null,(0,r.kt)("td",null,"borderColor"),(0,r.kt)("td",null,"string (optional)"),(0,r.kt)("td",null,"'light-gray'"),(0,r.kt)("td",null)),(0,r.kt)("tr",null,(0,r.kt)("td",null,"boxShadow"),(0,r.kt)("td",null,"integer (optional)"),(0,r.kt)("td",null,"2"),(0,r.kt)("td",null)),(0,r.kt)("tr",null,(0,r.kt)("td",null,"p"),(0,r.kt)("td",null,"integer (optional)"),(0,r.kt)("td",null,"4"),(0,r.kt)("td",null)),(0,r.kt)("tr",null,(0,r.kt)("td",null,"position"),(0,r.kt)("td",null,"string (optional)"),(0,r.kt)("td",null,"'relative'"),(0,r.kt)("td",null)),(0,r.kt)("tr",null,(0,r.kt)("td",null,"theme"),(0,r.kt)("td",null,"object (optional)"),(0,r.kt)("td",null),(0,r.kt)("td",null)))),(0,r.kt)("br",null),"Box uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.")}m.isMDXComponent=!0}}]);