fix(carousel): fixing exemples in snippets carousel

takenet · Sep 3, 2024 · 9f5e459 · 9f5e459
1 parent 231aba8
commit 9f5e459
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 138 deletions.
diff --git a/src/components/carousel/carousel.tsx b/src/components/carousel/carousel.tsx
@@ -296,20 +296,21 @@ export class BdsCarousel {
             </div>
           )}
         </div>
-        {this.autoplay && this.loading ? (
-          <bds-skeleton
-            class={{ carousel_loading_bar: true, carousel_loading_bar_fullwidth: this.arrows != 'outside' }}
-            height="8px"
-            width="100%"
-            shape="square"
-          />
-        ) : (
-          <bds-loading-bar
-            class={{ carousel_loading_bar: true, carousel_loading_bar_fullwidth: this.arrows != 'outside' }}
-            percent={(this.seconds * 100) / this.secondsLimit}
-            size="small"
-          />
-        )}
+        {this.autoplay &&
+          (this.loading ? (
+            <bds-skeleton
+              class={{ carousel_loading_bar: true, carousel_loading_bar_fullwidth: this.arrows != 'outside' }}
+              height="8px"
+              width="100%"
+              shape="square"
+            />
+          ) : (
+            <bds-loading-bar
+              class={{ carousel_loading_bar: true, carousel_loading_bar_fullwidth: this.arrows != 'outside' }}
+              percent={(this.seconds * 100) / this.secondsLimit}
+              size="small"
+            />
+          ))}
         {this.bullets && (
           <div class={{ carousel_bullets: true }}>
             {this.loading ? (

diff --git a/src/snippets/carousel.stories.jsx b/src/snippets/carousel.stories.jsx
@@ -279,55 +279,50 @@ export const CarouselWithCardMobile = () => {
   );
 };
 
+const imageContent = {
+  display: 'flex',
+  borderRadius: '8px',
+  overflow: 'hidden',
+};
+
 export const CarouselImage = () => {
   return (
     <bds-carousel
       arrows="inside"
       autoplay
       autoplay-hover-pause
       autoplay-timeout="5000"
+      auto-height
       infinite-loop
       slide-per-page={1}
       gap="2"
     >
       <bds-carousel-item>
-        <bds-paper
+        <bds-image
+          style={imageContent}
+          alt="Example of a image"
           width="100%"
-          height="480px"
-          clickable
-          style={{
-            background: `url(https://s3-alpha-sig.figma.com/img/d916/234b/b1da2bb6e26f425a983576939e819913?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dthCtfClrJ8opl8-0sRNaftPy5Jmzt~-MXJRflXoCFjSwPas1k786WxKy94RpUqhd56xf-opk-5HZP0lu2Yfzd7nsrs47Ix-pSoefYmNQAtGTNKmhyIgWp4fyuaUSr05HLt4FHj54T6E4bOolfXR7ZZ-MJ32m1QyUWR6QAb7bErwfwJ~FXDYOnhbUxWtR~b~taNDITC53BCzNh97jV6ipJPFu9KeaYIEbWus041MmbRYGbC3rfNVwQaMhNTuMucPHEMTqtXUDdcYf3Khtfm4raU~Q5qisUxwDqgKggV8lxYbjtHp6PQ0E-4UgmrqdwFsPzaVuJ8XnL8TfUrKDWPmGA__)`,
-            backgroundPsition: `center`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `cover`,
-          }}
-        ></bds-paper>
+          object-fit="cover"
+          src="https://picsum.photos/1920/1080"
+        />
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper
+        <bds-image
+          style={imageContent}
+          alt="Example of a image"
           width="100%"
-          height="480px"
-          clickable
-          style={{
-            background: `url(https://s3-alpha-sig.figma.com/img/dd2a/a3fb/a988fee910c1797dd18a77bf69159f55?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=PCdW3lBAOZwyYM0kfnNrfb7fsRpThnN85tGDDM7JXc6AFcgzikGZZ80nDuFDNg503BwPGlOA3r83h3AxQ6mMnQfKXLCq3iGtSxs1XjYDt68J40mb00iLCVzRimTAC6rIPeV0iT-kqJ1cUW5nKNhAMY-gYXil0Wo0qujSI55Qr7P3Mwi8G1hXh~uWS0w0vojOg4sVFMP2dC607vjDI~hvOwRuNyDApwJA5zr7K7BgGulAFZ7rl6wzE7i5hmDeN~Rhf18XQJy8AhsB3RYGzpsevQ4H~T3QNsalPgeOhgKajMpAqA4dzX2k~mmUKSY1LTBbpYT4FRIt3PQUmEKU86BPxw__)`,
-            backgroundPsition: `center`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `cover`,
-          }}
-        ></bds-paper>
+          object-fit="cover"
+          src="https://picsum.photos/1920/1080"
+        />
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper
+        <bds-image
+          style={imageContent}
+          alt="Example of a image"
           width="100%"
-          height="480px"
-          clickable
-          style={{
-            background: `url(https://s3-alpha-sig.figma.com/img/ac74/3f4e/1df87d6b8ae4bb2972a7964be26d437a?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=NEBY62fA~kPtbJ8xsUGZ8IQGBeorOG0219SqhO1rTsMLOhSc98iCWITHylkws4N2YgKaO6ubU5k~vpPgy3dBjbYL3iQfqq2QMGLsv4zjVtmVExtwdMcW64b6QFvFQovy0bqj5C1M92qobfCnAdzgjbESPmh8Ao8Z6Ozc2NCAlq4jnn9l~zcLTtwIHDx6rJ6njh1u6rEAicNbYWbcaFJYop2oyQhipBQRkyIAndkybpe~K-W6tAeiOx6Z877ikC~vI-fiJKPU81JyfYG1DaNun3kMc-0l5VaPz~~lPWt-gTh53KyCRPc0K-yU2inQvVMhaPwt5~JK-DHMHbAvj9Vlhg__)`,
-            backgroundPsition: `center`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `cover`,
-          }}
-        ></bds-paper>
+          object-fit="cover"
+          src="https://picsum.photos/1920/1080"
+        />
       </bds-carousel-item>
     </bds-carousel>
   );
@@ -341,48 +336,37 @@ export const CarouselImageMobile = () => {
         autoplay
         autoplay-hover-pause
         autoplay-timeout="5000"
+        auto-height
         infinite-loop
         slide-per-page={1}
         gap="2"
       >
         <bds-carousel-item>
-          <bds-paper
+          <bds-image
+            style={imageContent}
+            alt="Example of a image"
             width="100%"
-            height="240px"
-            clickable
-            style={{
-              background: `url(https://s3-alpha-sig.figma.com/img/d916/234b/b1da2bb6e26f425a983576939e819913?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dthCtfClrJ8opl8-0sRNaftPy5Jmzt~-MXJRflXoCFjSwPas1k786WxKy94RpUqhd56xf-opk-5HZP0lu2Yfzd7nsrs47Ix-pSoefYmNQAtGTNKmhyIgWp4fyuaUSr05HLt4FHj54T6E4bOolfXR7ZZ-MJ32m1QyUWR6QAb7bErwfwJ~FXDYOnhbUxWtR~b~taNDITC53BCzNh97jV6ipJPFu9KeaYIEbWus041MmbRYGbC3rfNVwQaMhNTuMucPHEMTqtXUDdcYf3Khtfm4raU~Q5qisUxwDqgKggV8lxYbjtHp6PQ0E-4UgmrqdwFsPzaVuJ8XnL8TfUrKDWPmGA__)`,
-              backgroundPsition: `center`,
-              backgroundRepeat: `no-repeat`,
-              backgroundSize: `cover`,
-            }}
-          ></bds-paper>
+            object-fit="cover"
+            src="https://picsum.photos/1920/1080"
+          />
         </bds-carousel-item>
         <bds-carousel-item>
-          <bds-paper
+          <bds-image
+            style={imageContent}
+            alt="Example of a image"
             width="100%"
-            height="240px"
-            clickable
-            style={{
-              background: `url(https://s3-alpha-sig.figma.com/img/dd2a/a3fb/a988fee910c1797dd18a77bf69159f55?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=PCdW3lBAOZwyYM0kfnNrfb7fsRpThnN85tGDDM7JXc6AFcgzikGZZ80nDuFDNg503BwPGlOA3r83h3AxQ6mMnQfKXLCq3iGtSxs1XjYDt68J40mb00iLCVzRimTAC6rIPeV0iT-kqJ1cUW5nKNhAMY-gYXil0Wo0qujSI55Qr7P3Mwi8G1hXh~uWS0w0vojOg4sVFMP2dC607vjDI~hvOwRuNyDApwJA5zr7K7BgGulAFZ7rl6wzE7i5hmDeN~Rhf18XQJy8AhsB3RYGzpsevQ4H~T3QNsalPgeOhgKajMpAqA4dzX2k~mmUKSY1LTBbpYT4FRIt3PQUmEKU86BPxw__)`,
-              backgroundPsition: `center`,
-              backgroundRepeat: `no-repeat`,
-              backgroundSize: `cover`,
-            }}
-          ></bds-paper>
+            object-fit="cover"
+            src="https://picsum.photos/1920/1080"
+          />
         </bds-carousel-item>
         <bds-carousel-item>
-          <bds-paper
+          <bds-image
+            style={imageContent}
+            alt="Example of a image"
             width="100%"
-            height="240px"
-            clickable
-            style={{
-              background: `url(https://s3-alpha-sig.figma.com/img/ac74/3f4e/1df87d6b8ae4bb2972a7964be26d437a?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=NEBY62fA~kPtbJ8xsUGZ8IQGBeorOG0219SqhO1rTsMLOhSc98iCWITHylkws4N2YgKaO6ubU5k~vpPgy3dBjbYL3iQfqq2QMGLsv4zjVtmVExtwdMcW64b6QFvFQovy0bqj5C1M92qobfCnAdzgjbESPmh8Ao8Z6Ozc2NCAlq4jnn9l~zcLTtwIHDx6rJ6njh1u6rEAicNbYWbcaFJYop2oyQhipBQRkyIAndkybpe~K-W6tAeiOx6Z877ikC~vI-fiJKPU81JyfYG1DaNun3kMc-0l5VaPz~~lPWt-gTh53KyCRPc0K-yU2inQvVMhaPwt5~JK-DHMHbAvj9Vlhg__)`,
-              backgroundPsition: `center`,
-              backgroundRepeat: `no-repeat`,
-              backgroundSize: `cover`,
-            }}
-          ></bds-paper>
+            object-fit="cover"
+            src="https://picsum.photos/1920/1080"
+          />
         </bds-carousel-item>
       </bds-carousel>
     </bds-grid>
@@ -391,9 +375,9 @@ export const CarouselImageMobile = () => {
 
 export const CarouselImageDesciption = () => {
   return (
-    <bds-carousel bullets slide-per-page={2} gap="2">
+    <bds-carousel auto-height bullets slide-per-page={2} gap="2">
       <bds-carousel-item>
-        <bds-paper width="100%" height="290px" clickable style={{ backgroundColor: '#CF0180' }}>
+        <bds-paper width="100%" height="290px" clickable style={{ backgroundColor: 'var(--color-extended-pink)' }}>
           <bds-theme-provider theme="dark" style={{ height: '100%', display: 'block' }}>
             <bds-grid direction="column" padding="3" gap="2" justify-content="center" style={{ height: '100%' }}>
               <bds-typo variant="fs-20" bold="bold" margin={false}>
@@ -405,20 +389,17 @@ export const CarouselImageDesciption = () => {
         </bds-paper>
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper
+        <bds-image
+          style={imageContent}
+          alt="Example of a image"
           width="100%"
           height="290px"
-          clickable
-          style={{
-            background: `url(https://s3-alpha-sig.figma.com/img/d916/234b/b1da2bb6e26f425a983576939e819913?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dthCtfClrJ8opl8-0sRNaftPy5Jmzt~-MXJRflXoCFjSwPas1k786WxKy94RpUqhd56xf-opk-5HZP0lu2Yfzd7nsrs47Ix-pSoefYmNQAtGTNKmhyIgWp4fyuaUSr05HLt4FHj54T6E4bOolfXR7ZZ-MJ32m1QyUWR6QAb7bErwfwJ~FXDYOnhbUxWtR~b~taNDITC53BCzNh97jV6ipJPFu9KeaYIEbWus041MmbRYGbC3rfNVwQaMhNTuMucPHEMTqtXUDdcYf3Khtfm4raU~Q5qisUxwDqgKggV8lxYbjtHp6PQ0E-4UgmrqdwFsPzaVuJ8XnL8TfUrKDWPmGA__)`,
-            backgroundPsition: `center`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `cover`,
-          }}
-        ></bds-paper>
+          object-fit="cover"
+          src="https://picsum.photos/573/290"
+        />
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper width="100%" height="290px" clickable style={{ backgroundColor: '#5500FF' }}>
+        <bds-paper width="100%" height="290px" clickable style={{ backgroundColor: 'var(--color-extended-green)' }}>
           <bds-theme-provider theme="dark" style={{ height: '100%', display: 'block' }}>
             <bds-grid direction="column" padding="3" gap="2" justify-content="center" style={{ height: '100%' }}>
               <bds-typo variant="fs-20" bold="bold" margin={false}>
@@ -430,20 +411,17 @@ export const CarouselImageDesciption = () => {
         </bds-paper>
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper
+        <bds-image
+          style={imageContent}
+          alt="Example of a image"
           width="100%"
           height="290px"
-          clickable
-          style={{
-            background: `url(https://s3-alpha-sig.figma.com/img/dd2a/a3fb/a988fee910c1797dd18a77bf69159f55?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=PCdW3lBAOZwyYM0kfnNrfb7fsRpThnN85tGDDM7JXc6AFcgzikGZZ80nDuFDNg503BwPGlOA3r83h3AxQ6mMnQfKXLCq3iGtSxs1XjYDt68J40mb00iLCVzRimTAC6rIPeV0iT-kqJ1cUW5nKNhAMY-gYXil0Wo0qujSI55Qr7P3Mwi8G1hXh~uWS0w0vojOg4sVFMP2dC607vjDI~hvOwRuNyDApwJA5zr7K7BgGulAFZ7rl6wzE7i5hmDeN~Rhf18XQJy8AhsB3RYGzpsevQ4H~T3QNsalPgeOhgKajMpAqA4dzX2k~mmUKSY1LTBbpYT4FRIt3PQUmEKU86BPxw__)`,
-            backgroundPsition: `center`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `cover`,
-          }}
-        ></bds-paper>
+          object-fit="cover"
+          src="https://picsum.photos/573/290"
+        />
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper width="100%" height="290px" clickable style={{ backgroundColor: '#238662' }}>
+        <bds-paper width="100%" height="290px" clickable style={{ backgroundColor: 'var(--color-extended-blue)' }}>
           <bds-theme-provider theme="dark" style={{ height: '100%', display: 'block' }}>
             <bds-grid direction="column" padding="3" gap="2" justify-content="center" style={{ height: '100%' }}>
               <bds-typo variant="fs-20" bold="bold" margin={false}>
@@ -455,17 +433,14 @@ export const CarouselImageDesciption = () => {
         </bds-paper>
       </bds-carousel-item>
       <bds-carousel-item>
-        <bds-paper
+        <bds-image
+          style={imageContent}
+          alt="Example of a image"
           width="100%"
           height="290px"
-          clickable
-          style={{
-            background: `url(https://s3-alpha-sig.figma.com/img/ac74/3f4e/1df87d6b8ae4bb2972a7964be26d437a?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=NEBY62fA~kPtbJ8xsUGZ8IQGBeorOG0219SqhO1rTsMLOhSc98iCWITHylkws4N2YgKaO6ubU5k~vpPgy3dBjbYL3iQfqq2QMGLsv4zjVtmVExtwdMcW64b6QFvFQovy0bqj5C1M92qobfCnAdzgjbESPmh8Ao8Z6Ozc2NCAlq4jnn9l~zcLTtwIHDx6rJ6njh1u6rEAicNbYWbcaFJYop2oyQhipBQRkyIAndkybpe~K-W6tAeiOx6Z877ikC~vI-fiJKPU81JyfYG1DaNun3kMc-0l5VaPz~~lPWt-gTh53KyCRPc0K-yU2inQvVMhaPwt5~JK-DHMHbAvj9Vlhg__)`,
-            backgroundPsition: `center`,
-            backgroundRepeat: `no-repeat`,
-            backgroundSize: `cover`,
-          }}
-        ></bds-paper>
+          object-fit="cover"
+          src="https://picsum.photos/573/290"
+        />
       </bds-carousel-item>
     </bds-carousel>
   );
@@ -477,7 +452,7 @@ export const CarouselImageDesciptionMobile = () => {
       <bds-carousel arrows="none" gap="2">
         <bds-carousel-item>
           <bds-grid direction="column" gap="2">
-            <bds-paper width="100%" clickable style={{ backgroundColor: '#CF0180' }}>
+            <bds-paper width="100%" clickable style={{ backgroundColor: 'var(--color-extended-pink)' }}>
               <bds-theme-provider theme="dark" style={{ height: '100%', display: 'block' }}>
                 <bds-grid direction="column" padding="3" gap="2" justify-content="center" style={{ height: '100%' }}>
                   <bds-typo variant="fs-20" bold="bold" margin={false}>
@@ -487,22 +462,19 @@ export const CarouselImageDesciptionMobile = () => {
                 </bds-grid>
               </bds-theme-provider>
             </bds-paper>
-            <bds-paper
+            <bds-image
+              style={imageContent}
+              alt="Example of a image"
               width="100%"
-              height="240px"
-              clickable
-              style={{
-                background: `url(https://s3-alpha-sig.figma.com/img/d916/234b/b1da2bb6e26f425a983576939e819913?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dthCtfClrJ8opl8-0sRNaftPy5Jmzt~-MXJRflXoCFjSwPas1k786WxKy94RpUqhd56xf-opk-5HZP0lu2Yfzd7nsrs47Ix-pSoefYmNQAtGTNKmhyIgWp4fyuaUSr05HLt4FHj54T6E4bOolfXR7ZZ-MJ32m1QyUWR6QAb7bErwfwJ~FXDYOnhbUxWtR~b~taNDITC53BCzNh97jV6ipJPFu9KeaYIEbWus041MmbRYGbC3rfNVwQaMhNTuMucPHEMTqtXUDdcYf3Khtfm4raU~Q5qisUxwDqgKggV8lxYbjtHp6PQ0E-4UgmrqdwFsPzaVuJ8XnL8TfUrKDWPmGA__)`,
-                backgroundPsition: `center`,
-                backgroundRepeat: `no-repeat`,
-                backgroundSize: `cover`,
-              }}
-            ></bds-paper>
+              height="180px"
+              object-fit="cover"
+              src="https://picsum.photos/573/180"
+            />
           </bds-grid>
         </bds-carousel-item>
         <bds-carousel-item>
           <bds-grid direction="column" gap="2">
-            <bds-paper width="100%" clickable style={{ backgroundColor: '#5500FF' }}>
+            <bds-paper width="100%" clickable style={{ backgroundColor: 'var(--color-extended-green)' }}>
               <bds-theme-provider theme="dark" style={{ height: '100%', display: 'block' }}>
                 <bds-grid direction="column" padding="3" gap="2" justify-content="center" style={{ height: '100%' }}>
                   <bds-typo variant="fs-20" bold="bold" margin={false}>
@@ -512,22 +484,19 @@ export const CarouselImageDesciptionMobile = () => {
                 </bds-grid>
               </bds-theme-provider>
             </bds-paper>
-            <bds-paper
+            <bds-image
+              style={imageContent}
+              alt="Example of a image"
               width="100%"
-              height="240px"
-              clickable
-              style={{
-                background: `url(https://s3-alpha-sig.figma.com/img/dd2a/a3fb/a988fee910c1797dd18a77bf69159f55?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=PCdW3lBAOZwyYM0kfnNrfb7fsRpThnN85tGDDM7JXc6AFcgzikGZZ80nDuFDNg503BwPGlOA3r83h3AxQ6mMnQfKXLCq3iGtSxs1XjYDt68J40mb00iLCVzRimTAC6rIPeV0iT-kqJ1cUW5nKNhAMY-gYXil0Wo0qujSI55Qr7P3Mwi8G1hXh~uWS0w0vojOg4sVFMP2dC607vjDI~hvOwRuNyDApwJA5zr7K7BgGulAFZ7rl6wzE7i5hmDeN~Rhf18XQJy8AhsB3RYGzpsevQ4H~T3QNsalPgeOhgKajMpAqA4dzX2k~mmUKSY1LTBbpYT4FRIt3PQUmEKU86BPxw__)`,
-                backgroundPsition: `center`,
-                backgroundRepeat: `no-repeat`,
-                backgroundSize: `cover`,
-              }}
-            ></bds-paper>
+              height="180px"
+              object-fit="cover"
+              src="https://picsum.photos/573/180"
+            />
           </bds-grid>
         </bds-carousel-item>
         <bds-carousel-item>
           <bds-grid direction="column" gap="2">
-            <bds-paper width="100%" clickable style={{ backgroundColor: '#238662' }}>
+            <bds-paper width="100%" clickable style={{ backgroundColor: 'var(--color-extended-blue)' }}>
               <bds-theme-provider theme="dark" style={{ height: '100%', display: 'block' }}>
                 <bds-grid direction="column" padding="3" gap="2" justify-content="center" style={{ height: '100%' }}>
                   <bds-typo variant="fs-20" bold="bold" margin={false}>
@@ -537,17 +506,14 @@ export const CarouselImageDesciptionMobile = () => {
                 </bds-grid>
               </bds-theme-provider>
             </bds-paper>
-            <bds-paper
+            <bds-image
+              style={imageContent}
+              alt="Example of a image"
               width="100%"
-              height="240px"
-              clickable
-              style={{
-                background: `url(https://s3-alpha-sig.figma.com/img/ac74/3f4e/1df87d6b8ae4bb2972a7964be26d437a?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=NEBY62fA~kPtbJ8xsUGZ8IQGBeorOG0219SqhO1rTsMLOhSc98iCWITHylkws4N2YgKaO6ubU5k~vpPgy3dBjbYL3iQfqq2QMGLsv4zjVtmVExtwdMcW64b6QFvFQovy0bqj5C1M92qobfCnAdzgjbESPmh8Ao8Z6Ozc2NCAlq4jnn9l~zcLTtwIHDx6rJ6njh1u6rEAicNbYWbcaFJYop2oyQhipBQRkyIAndkybpe~K-W6tAeiOx6Z877ikC~vI-fiJKPU81JyfYG1DaNun3kMc-0l5VaPz~~lPWt-gTh53KyCRPc0K-yU2inQvVMhaPwt5~JK-DHMHbAvj9Vlhg__)`,
-                backgroundPsition: `center`,
-                backgroundRepeat: `no-repeat`,
-                backgroundSize: `cover`,
-              }}
-            ></bds-paper>
+              height="180px"
+              object-fit="cover"
+              src="https://picsum.photos/573/180"
+            />
           </bds-grid>
         </bds-carousel-item>
       </bds-carousel>