diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
index 36b6377d8..18dc7f976 100644
--- a/packages/cxl-ui/scss/cxl-base-card.scss
+++ b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -156,7 +156,7 @@ header {
     }
 
     .name {
-      @include mixins.ellipsis-for-lines(3);
+      @include mixins.ellipsis-for-lines(2);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       font-style: normal;
diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
index 38c4390f7..07d07436b 100644
--- a/packages/cxl-ui/scss/cxl-course-card.scss
+++ b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -4,7 +4,7 @@
 @use "~@conversionxl/cxl-ui/scss/mixins";
 
 :host {
-  height: 345px;
+  height: 280px;
 }
 
 :host(:hover) {
@@ -32,7 +32,7 @@ header {
   line-height: var(--lumo-line-height-s);
 
   .content {
-    @include mixins.ellipsis-for-lines(5);
+    @include mixins.ellipsis-for-lines(3);
     min-height: calc(var(--lumo-line-height-s) * 3); // three standard line-heights
 
     ::slotted(p) {
diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
index 1a2fe49c1..c972931ef 100644
--- a/packages/cxl-ui/src/components/cxl-course-card.js
+++ b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -27,7 +27,9 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
   }
 
   _renderHeaderName() {
-    return html`<div class="name"><a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a></div>`;
+    return html`<div class="name" title=${this.name}>
+      <a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a>
+    </div>`;
   }
 
   render() {