Investigate card style overrides throughout the GH org

[brian-smith-tcril]

One thing I'm not a huge fan of (and likely need some historical context on) is the difference in margin between Paragon's Card.Header title and actions.

https://paragon-openedx.netlify.app/components/card/#actions

I assume the goal was to have them aligned at the bottom, but it's always felt like the title was "low" to me.

---

Here's how it would look if we changed them to match

[brian-smith-tcril]

I think it was added to account for cards with an ImageCap with a logo image.

[brian-smith-tcril]

Here's a diff that makes the top margins match and still accounts for the extra spacing needed for logos in ImageCap

diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx
index eb27d912b2..bda33e8f62 100644
--- a/src/Card/CardImageCap.jsx
+++ b/src/Card/CardImageCap.jsx
@@ -27,7 +27,7 @@ const CardImageCap = React.forwardRef(({
   const [showImageCap, setShowImageCap] = useState(false);
   const [showLogoCap, setShowLogoCap] = useState(false);
 
-  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}${showLogoCap ? ' with-logo' : ''}`;
 
   if (isLoading) {
     return (
diff --git a/src/Card/index.scss b/src/Card/index.scss
index 6107495867..ddc751350e 100644
--- a/src/Card/index.scss
+++ b/src/Card/index.scss
@@ -118,7 +118,7 @@ a.pgn__card {
     .pgn__card-header-content {
       display: flex;
       flex-direction: column;
-      margin-top: map.get($spacers, 4\.5);
+      margin-top: var(--pgn-spacing-spacer-base);
       overflow: auto;
       text-align: start;
       width: 100%;
@@ -334,8 +334,13 @@ a.pgn__card {
 
     &.vertical {
       max-height: var(--pgn-size-card-image-vertical-max-height);
+
+      &.with-logo {
+        margin-bottom: var(--pgn-spacing-spacer-base);
+      }
     }
 
     .pgn__card-image-cap-loader {
       .react-loading-skeleton {
         margin-bottom: calc(-1 * var(--pgn-spacing-card-loading-skeleton-spacer));

[brian-smith-tcril]

Doing a bit of searching to find places in the Open edX GH org where Card styles are being overridden

Org-wide search

MFE	Results
frontend-app-admin-portal	3 non-test files
frontend-app-learner-portal-enterprise	2 non-test files
frontend-app-authoring	12 non-test files
frontend-app-learner-dashboard	4 non-test files
frontend-app-enterprise-public-catalog	2 non-test files
frontend-app-learning	2 non-test files

Might be worth making per-repo issues.

[brian-smith-tcril]

I renamed this issue to be more generic after a conversation in the #wg-desgin channel

Brian Smith:
So I guess this kind of opens up a bigger can of worms than just the one little change:

• How are we using cards
• How are we overriding card styles
• How can we change cards to fit our uses

Marco Morales:
+1 to this, I think we probably want to map out things like Cards as list item objects, Cards with Images, Cards with Body sections, etc and see how these are used

Brian Smith:
Because ideally we won't have MFEs overriding cards styles, but instead have cards that work well out of the box, with reasonable configuration options to match our use cases

[brian-smith-tcril]

Made a draft PR based on frontend-app-authoring's use of cards on the "Courses" tab of Studio Home.

#3966