); `,children:(0,n.jsx)(e.figure,{raw:`import { Image } from '@marigold/components'; export default () => (

); `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Image"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Image"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" src"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"https://images.unsplash.com/photo-1603910234616-3b5f4a6be2b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" alt"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"event_image"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"image-with-fit-and-position",children:(0,n.jsx)(e.a,{href:"#image-with-fit-and-position",children:"Image with fit and position"})}),` `,(0,n.jsxs)(e.p,{children:["In this example, the ",(0,n.jsx)(e.code,{children:""})," gets the ",(0,n.jsx)(e.code,{children:""})," property and the ",(0,n.jsx)(e.code,{children:""})," property is set to bottom. You also need to wrap the ",(0,n.jsx)(e.code,{children:""})," in a ",(0,n.jsx)(e.code,{children:""})," component so that the fit and position properties can be used."]}),` `,(0,n.jsx)(r,{file:"./image-fit-position.demo.tsx",name:"image-fit-position",source:`import { Aspect, Image } from '@marigold/components'; export default () => ( event_image

); `,children:(0,n.jsx)(e.figure,{raw:`import { Aspect, Image } from '@marigold/components'; export default () => ( event_image

); `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#292D3E",color:"#babed8"},tabIndex:"0","data-language":"tsx","data-theme":"material-theme-palenight",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"material-theme-palenight",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Aspect"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:","}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" Image"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" '"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"@marigold/components"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF",fontStyle:"italic"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Aspect"}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" ratio"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"landscape"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"Image"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" fit"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"cover"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" position"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"bottom"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" src"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"https://images.unsplash.com/photo-1603910234616-3b5f4a6be2b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:" alt"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"event_image"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#BABED8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:";"})]})]})})})})]})}function m(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(h,{...l})}):h(l)}function i(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(B);})(); ;return Component;