fix: update flipcard template

.changeset/spicy-keys-sort.md

@@ -0,0 +1,7 @@
+---
+'@solid-design-system/components': patch
+'@solid-design-system/docs': patch
+---
+
+Fixed gradient issue on flipcard.
+Implemented an improved flipcard template version.

packages/components/src/components/flipcard/flipcard.ts

@@ -139,8 +139,8 @@ export default class SdFlipcard extends SolidElement {
                     : 'bg-gradient-to-t  from-white/75 to-white/60',
                 'gradient-dark':
                   this.placement === 'bottom'
-                    ? 'bg-gradient-to-b from-primary-800/75 to-primary-800/60'
-                    : 'bg-gradient-to-t  from-primary-800/75 to-primary-800/60'
+                    ? 'bg-gradient-to-t from-primary-800/75 to-primary-800/60'
+                    : 'bg-gradient-to-b  from-primary-800/75 to-primary-800/60'
               }[this.frontVariant]
             )}
           >
@@ -156,12 +156,12 @@ export default class SdFlipcard extends SolidElement {
                 'primary-100': 'mb-auto',
                 'gradient-light':
                   this.placement === 'top'
-                    ? 'bg-gradient-to-b from-white/60 to-40% mb-auto'
-                    : 'bg-gradient-to-t from-white/60 to-40% mt-auto',
+                    ? 'bg-gradient-to-b from-white/60 to-white/0 mb-auto'
+                    : 'bg-gradient-to-t from-white/60 to-white/0 mt-auto',
                 'gradient-dark':
                   this.placement === 'bottom'
-                    ? 'bg-gradient-to-t from-primary-800/60 to-40% mt-auto'
-                    : 'bg-gradient-to-b from-primary-800/60 to-40% mb-auto'
+                    ? 'bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto'
+                    : 'bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto'
               }[this.frontVariant]
             )}
           ></div>
@@ -230,8 +230,8 @@ export default class SdFlipcard extends SolidElement {
                     : 'bg-gradient-to-t  from-white/75 to-white/60',
                 'gradient-dark':
                   this.placement === 'bottom'
-                    ? 'bg-gradient-to-b from-primary-800/75 to-primary-800/60'
-                    : 'bg-gradient-to-t  from-primary-800/75 to-primary-800/60'
+                    ? 'bg-gradient-to-t from-primary-800/75 to-primary-800/60'
+                    : 'bg-gradient-to-b  from-primary-800/75 to-primary-800/60'
               }[this.backVariant]
             )}
           >
@@ -247,12 +247,12 @@ export default class SdFlipcard extends SolidElement {
                 'primary-100': 'mb-auto',
                 'gradient-light':
                   this.placement === 'top'
-                    ? 'bg-gradient-to-b from-white/60 to-40% mb-auto'
-                    : 'bg-gradient-to-t from-white/60 to-40% mt-auto',
+                    ? 'bg-gradient-to-b from-white/60 to-white/0 mb-auto'
+                    : 'bg-gradient-to-t from-white/60 to-white/0 mt-auto',
                 'gradient-dark':
                   this.placement === 'bottom'
-                    ? 'bg-gradient-to-t from-primary-800/60 to-40% mt-auto'
-                    : 'bg-gradient-to-b from-primary-800/60 to-40% mb-auto'
+                    ? 'bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto'
+                    : 'bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto'
               }[this.backVariant]
             )}
           ></div>

packages/docs/src/stories/templates/flipcard.stories.ts

@@ -11,7 +11,7 @@ export default {
     chromatic: { disableSnapshot: true },
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2724-2988&t=JCsisVFNkWSlhSSN-4'
+      url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=9619-1000&t=4hJLzQoS5miOfXHR-0'
     }
   }
 };
@@ -23,29 +23,49 @@ export default {
 export const Default = {
   render: () => html`
     <sd-flipcard
-      activation="click hover"
       flip-direction="horizontal"
       front-variant="gradient-dark"
-      placement="bottom"
-      back-variant="primary"
+      back-variant="primary-100"
+      placement="top"
+      class="mb-12"
     >
       <h5 slot="front" class="sd-headline sd-headline--inverted sd-headline--size-lg p-5">
         We are invested in over USD 6 Billion of Assets under Management
       </h5>
-      <div slot="back" class="w-full sd-prose sd-prose--inverted p-5">
-        <h3 class="sd-headline sd-headline--size-lg sd-headline--inverted">Our quality portfolio</h3>
+      <div slot="back" class="w-full sd-prose p-5">
+        <h3 class="sd-headline sd-headline--size-lg">Our quality portfolio</h3>
         <p class="sd-paragraph">
           Together with our local partners we manage a real estate portfolio of approx. USD 6 billion, which represents
           about 15% of the total global portfolio and spans over more than 35 properties. In the US, we have properties
           in New York, San Francisco, Washington D.C., Chicago and other major US cities. In Latin America we are
           currently invested in office buildings in Mexico-City.
         </p>
+        <sd-link href="javascript:void(0)" class="block">Link</sd-link>
       </div>
       <img
         slot="media-front"
         class="object-cover h-full w-full"
         src="./placeholders/images/skyline.jpg"
-        alt="City skyline of Frankfurt by night in christmas time."
+        alt="A vibrant city skyline at dusk, symbolizing economic growth and investment opportunities in urban hubs."
+      />
+    </sd-flipcard>
+    <sd-flipcard flip-direction="horizontal" front-variant="gradient-light" back-variant="primary" placement="bottom">
+      <h2 slot="front" class="sd-headline sd-headline--size-4xl p-5">We promote diversity</h2>
+      <div slot="back" class="w-full p-5">
+        <h3 class="sd-headline sd-headline--size-lg sd-headline--inverted">
+          We provide room for creative solutions and ensure that we are equipped for the future. 
+        </h3>
+        <p class="sd-paragraph sd-paragraph--inverted mt-2">
+          Our approach is based around interacting with each other, our customers and our partners on an equal footing.
+          Our actions are defined by values such as respect, professionalism and collaboration. In the true spirit of
+          the cooperative principles, we channel a wide range of strengths in order to be stronger together.
+        </p>
+      </div>
+      <img
+        slot="media-front"
+        class="object-cover h-full w-full"
+        src="./placeholders/images/coffeeshop.jpg"
+        alt="Colleagues in a casual office meeting, smiling and interacting, symbolizing collaboration and the value of office spaces."
       />
     </sd-flipcard>
   `