Merge pull request #6053 from NishantSinghhhhh/Design/Component_card

Added ellipsis in card
layer5io · Nov 4, 2024 · b78a103 · b78a103
2 parents 360f670 + 8de89d2
commit b78a103
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
@@ -645,13 +645,15 @@ const SistentWrapper = styled.div`
 
   .product_cards .card {
     width: 400px;
+    height: 280px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     border-radius: 20px;
     background-color: ${(props) => props.theme.grey212121ToGreyF0F0F0};
     padding: 2rem;
   }
+
   .logo {
     max-height: 3rem;
   }
@@ -675,14 +677,20 @@ const SistentWrapper = styled.div`
     color: ${props => props.theme.text};
   }
 
-  .card .text {
-    padding-top: 1rem;
-    padding-bottom: 2rem;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    color: ${(props) => props.theme.whiteToBlack};
-  }
+.card .text {
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  color: ${(props) => props.theme.whiteToBlack};
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: calc(1.5rem * 4);
+}
 
   .card {
     box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo};