feat: support full height media

fix: no border for media card
adobecom · Nov 5, 2024 · 80370e6 · 80370e6
1 parent 57a87f6
commit 80370e6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/libs/blocks/editorial-card/editorial-card.css b/libs/blocks/editorial-card/editorial-card.css
@@ -145,6 +145,10 @@
   line-height: 0;
 }
 
+.editorial-card.no-foreground { 
+  border: none;
+}
+
 .editorial-card.no-foreground .media-area > div {
   height: 100%;
 }

diff --git a/test/blocks/editorial-card/mocks/body.html b/test/blocks/editorial-card/mocks/body.html
@@ -173,4 +173,58 @@ <h3>Healine</h3>
       </div>
     </div>
   </div>
+
+  <h2>Media Card/ No Foreground</h2>
+  <div class="section">
+    <div class="editorial-card click">
+      <div>
+        <div>
+          <h3 id="row---copy">1 Row - [copy]</h3>
+          <p>no-foreground</p>
+        </div>
+      </div>
+    </div>
+    <div class="editorial-card no-border l-rounded-corners-image">
+      <div>
+        <div><a href="./media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay">https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay</a></div>
+      </div>
+    </div>
+    <div class="editorial-card l-rounded-corners">
+      <div>
+        <div>transparent</div>
+      </div>
+      <div>
+        <div>
+          <video playsinline="" poster="./" muted="" data-hoverplay="" data-mouseevent="true">
+            <source src="./" type="video/mp4">
+          </video>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="editorial-card l-rounded-corners">
+      <div>
+        <div>#fafafa</div>
+      </div>
+      <div>
+        <div>
+          <picture>
+            <img loading="lazy" alt="" src="./" width="480" height="296">
+          </picture>
+        </div>
+      </div>
+
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>Four up, m spacing</div>
+      </div>
+      <div>
+        <div>background</div>
+        <div>#f7f7f7</div>
+      </div>
+    </div>
+  </div>
 </main>