text: "use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[9679],{3453:function(t,e,n){n.r(e),n.d(e,{frontMatter:function(){return r},contentTitle:function(){return u},metadata:function(){return d},toc:function(){return p},default:function(){return k}});var l=n(7462),o=n(3366),a=(n(7294),n(4137)),i=n(6086),s=["components"],r={},u="Image",d={unversionedId:"Components/Image",id:"Components/Image",isDocsHomePage:!1,title:"Image",description:"Use the Image component to display an image in your product. This renders the `` HTML element and extends the Box component.",source:"@site/docs/Components/Image.mdx",sourceDirName:"Components",slug:"/Components/Image",permalink:"/docs/Components/Image",editUrl:"https://github.com/headline-design/pipeline-ui/blob/main/design-site/docs/Components/Image.mdx",version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Pipeline Icons",permalink:"/docs/Components/Icon"},next:{title:"Input",permalink:"/docs/Components/Input"}},p=[{value:"Usage Example",id:"usage-example",children:[{value:"Props",id:"props",children:[]}]}],m={toc:p};function k(t){var e=t.components,n=(0,o.Z)(t,s);return(0,a.kt)("wrapper",(0,l.Z)({},m,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"image"},"Image"),(0,a.kt)("p",null,"Use the Image component to display an image in your product. This renders the ",(0,a.kt)("inlineCode",{parentName:"p"},"<img>")," HTML element and extends the Box component."),(0,a.kt)("h2",{id:"usage-example"},"Usage Example"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'<Image\n  alt="Algorand"\n  borderRadius={8}\n  height="auto"\n  src="https://www.algorand.com/assets/media-kit/logos/full/png/algorand_full_logo_black.png"\n/>\n')),(0,a.kt)("h3",{id:"props"},"Props"),(0,a.kt)(i.Z,{mdxType:"Table"},(0,a.kt)("thead",null,(0,a.kt)("tr",null,(0,a.kt)("th",null,"Prop"),(0,a.kt)("th",null,"Type"),(0,a.kt)("th",null,"Default"),(0,a.kt)("th",null,"Description"))),(0,a.kt)("tbody",null,(0,a.kt)("tr",null,(0,a.kt)("td",null,"alt"),(0,a.kt)("td",null,"string (optional)"),(0,a.kt)("td",null),(0,a.kt)("td",null,"Sets alt attribute on image for accessibility.")),(0,a.kt)("tr",null,(0,a.kt)("td",null,"height"),(0,a.kt)("td",null,"string (optional)"),(0,a.kt)("td",null,"'auto'"),(0,a.kt)("td",null)),(0,a.kt)("tr",null,(0,a.kt)("td",null,"maxWidth"),(0,a.kt)("td",null,"string (optional)"),(0,a.kt)("td",null,"'100%'"),(0,a.kt)("td",null)),(0,a.kt)("tr",null,(0,a.kt)("td",null,"src"),(0,a.kt)("td",null,"string (required)"),(0,a.kt)("td",null),(0,a.kt)("td",null,"Sets the src attribute of the img element.")),(0,a.kt)("tr",null,(0,a.kt)("td",null,"theme"),(0,a.kt)("td",null,"object (optional)"),(0,a.kt)("td",null),(0,a.kt)("td",null,"Sets theme.")))),(0,a.kt)("br",null),"Image uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.")}k.isMDXComponent=!0}}]);