Auto cut cards title with css (#553)

* Update image object position * Auto cut cards grid title
hlxsites · Feb 8, 2024 · 3404586 · 3404586
1 parent fbcdbb4
commit 3404586
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -191,6 +191,18 @@ main .section.cards-container:has(.cards.info-points) h2 {
   margin-bottom: 2rem;
 }
 
+.cards.grid .cards-card-image img {
+  object-position: center;
+}
+
+.cards.grid .cards-card-body .title {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 main .cards.info-points .cards-card-body h4 {
   font-size: var(--heading-font-size-mxs);
   font-weight: var(--font-weight-bold);
@@ -378,6 +390,10 @@ main .cards-wrapper .light-background .cards-card-body h3 {
   .cards.grid > ul {
     flex-flow: column nowrap;
   }
+
+  .cards.grid .cards-card-image img {
+    object-position: 50% 0;
+  }
 }
 
 @media screen and (min-width: 62rem) {

diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -5,6 +5,7 @@ export default function decorate(block) {
   const isHero = block.classList.contains('hero-block');
   /* change to ul, li */
   const ul = document.createElement('ul');
+  const grid = block.classList.contains('grid');
   [...block.children].forEach((row) => {
     const li = document.createElement('li');
     li.innerHTML = row.innerHTML;
@@ -50,7 +51,9 @@ export default function decorate(block) {
     const title = li.querySelector('.title');
     if (title) {
       [title.textContent] = title.textContent.split('|');
-      title.textContent = cropString(title.textContent, 65);
+      if (!grid) {
+        title.textContent = cropString(title.textContent, 65);
+      }
     }
     ul.append(li);
   });