feat(mistica-css): card asset (#1351)

Co-authored-by: david.nieto <david.nieto@vdshop.es>

Author: DavidNietoGonzalez

css/mistica-common.css

@@ -691,6 +691,7 @@ button.mistica-small-naked-card:active > .mistica-card__media {
 
 .mistica-naked-card,
 .mistica-small-naked-card {
+    position: relative;
     padding-right: 16px;
 }
 
@@ -1090,3 +1091,36 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
         left: -9999px;
     }
 }
+
+.mistica-card__asset {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 40px;
+}
+
+.mistica-card__asset-floating {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    margin-left: 16px;
+    margin-top: 16px;
+}
+
+.mistica-card__asset-floating img,
+.mistica-card__asset img {
+    border-radius: inherit;
+    width: inherit;
+    height: inherit;
+}
+
+@media (min-width: 1024px) {
+    .mistica-card__asset-floating {
+        margin-left: 24px;
+        margin-top: 24px;
+    }
+}

examples/css/index.html

@@ -406,6 +406,12 @@ <h3 class="mistica-text-title2">Cards</h3>
                 <h4 class="mistica-text-title1">MediaCard / DataCard / SnapCard</h4>
                 <div class="cards-group">
                     <section class="mistica-card">
+                        <div class="mistica-card__asset-floating" style="border-radius: 50%; height:40px; width: 40px; background: var(--mistica-color-tagBackgroundActive)"> 
+                            <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
+                                <path 
+                                    fill="var(--mistica-color-tagTextActive)" 
+                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"></path><path fill="var(--mistica-color-tagTextActive)" d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"></path></svg>
+                        </div>
                         <img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
                         <div class="mistica-tag-promo">Headline</div>
                         <h2 class="mistica-card__pretitle">Pretitle</h2>
@@ -430,6 +436,9 @@ <h2 class="mistica-card__title">Title</h2>
                         </div>
                     </section>
                     <section class="mistica-card">
+                        <div class="mistica-card__asset" style="border-radius: 50%; height:40px; width: 40px;">
+                            <image src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg" />                      
+                        </div>
                         <div class="mistica-tag-promo">Headline</div>
                         <h2 class="mistica-card__pretitle">Pretitle</h2>
                         <h2 class="mistica-card__title">Title</h2>
@@ -453,6 +462,9 @@ <h2 class="mistica-card__title">Title</h2>
                         </div>
                     </section>
                     <section class="mistica-snap-card">
+                        <div class="mistica-card__asset">
+                            <image src="https://picsum.photos/250/100" />                      
+                        </div>
                         <h2 class="mistica-card__title">Title</h2>
                         <p class="mistica-card__subtitle">Subtitle</p>
                         <p class="mistica-card__description">Description</p>