Feature/sc 27901/card box component

static/css/s2.css

@@ -2784,8 +2784,46 @@ display: none;
 .sidebarDescription.lowlight{
   color: var(--light-grey);
 }
-
-.navBlockTitle .int-he, .navBlockDescription .int-he{
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  width: 95%;
+  border-top: 1px solid #EDEDEC;
+}
+.card {
+  flex: 1 1 50%;
+  position: relative;
+  padding-bottom: 12px;
+}
+.cardTitle {
+  text-align: start;
+  font-size: 24px;
+  padding: 15px 0 8px;
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  line-height: 1.3;
+  flex: 1;
+  font-weight: 400;
+}
+a.cardTitle:hover {
+  text-decoration: none;
+  color: var(--dark-grey);
+}
+.cardDescription {
+  font-size: 14px;
+  line-height: 18px;
+  color: #666;
+  margin-inline-end: 20px;
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+}
+.hebrew .cardDescription {
+  line-height: 24px;
+}
+.navBlockTitle .int-he, .navBlockDescription .int-he, .cardTitle .int-he, .cardDescription .int-he{
   font-size: 122%;
 }
 .interface-english .navBlockDescription.clamped .int-en,
@@ -13263,6 +13301,8 @@ span.ref-link-color-3 {color: blue}
   }
 }
 
+
+
 @media screen and (min-aspect-ratio: 2/1) {
   .image-in-text {
     max-height: calc(4/3 * 2/3 * 100vw);

static/js/shared/Card.jsx

@@ -0,0 +1,15 @@
+import {InterfaceText} from "../Misc";
+import React from "react";
+
+const Card = ({cardTitle, cardTitleHref, oncardTitleClick, cardText}) => {
+    return <div className="card">
+                <a href={cardTitleHref} className="cardTitle" onClick={oncardTitleClick}>
+                    <InterfaceText text={cardTitle}/>
+                </a>
+                <div className="cardDescription">
+                    <InterfaceText text={cardText}/>
+                </div>
+            </div>
+}
+
+export { Card }