diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index fa86d8bd2..3ef68439f 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -96,8 +96,8 @@ export class UUICardBlockTypeElement extends UUICardElement {
#renderContent() {
return html`
- ${this.name}
- ${this.description}
+ ${this.name}
+ ${this.description}
`;
}
@@ -176,6 +176,15 @@ export class UUICardBlockTypeElement extends UUICardElement {
#open-part:hover #name {
text-decoration: underline;
}
+ #open-part #name,
+ #open-part small {
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ overflow-wrap: anywhere;
+ }
:host([image]:not([image=''])) #open-part {
transition: opacity 0.5s 0.5s;
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
index 98b7c6000..674ec4530 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
+++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
@@ -76,7 +76,9 @@ export class UUICardContentNodeElement extends UUICardElement {
? this._renderFallbackIcon()
: ''}
- ${this.name}
+
+ ${this.name}
+
${this.renderDetail()}
@@ -173,6 +175,15 @@ export class UUICardContentNodeElement extends UUICardElement {
padding: var(--uui-size-space-4) var(--uui-size-space-5);
}
+ #open-part #name {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ overflow-wrap: anywhere;
+ }
+
#content {
align-self: stretch;
display: flex;
diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
index 226b5e021..4f72c948c 100644
--- a/packages/uui-card-user/lib/uui-card-user.element.ts
+++ b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -76,7 +76,7 @@ export class UUICardUserElement extends UUICardElement {
name="avatar"
class="avatar"
@slotchange=${this._avatarSlotChanged}>
- ${this.name}
+ ${this.name}
`;
}
@@ -159,12 +159,19 @@ export class UUICardUserElement extends UUICardElement {
position: relative;
align-items: center;
margin: 0 0 3px 0;
+ height: 100%;
}
#content > span {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
vertical-align: center;
margin-top: 3px;
font-weight: 700;
+ overflow-wrap: anywhere;
}
.avatar {
diff --git a/storyhelpers/render-slots.ts b/storyhelpers/render-slots.ts
index 22fa459f2..4381dae50 100644
--- a/storyhelpers/render-slots.ts
+++ b/storyhelpers/render-slots.ts
@@ -34,7 +34,9 @@ function renderSlots(param: TemplateResult[] | Args) {
// Join slots with consistent formatting; no extra line breaks between them
const spacing = ' ';
- const stringSlots = validSlots.map(slot => slot.strings[0]);
+ const stringSlots = validSlots.map(slot =>
+ typeof slot === 'string' ? slot : slot.strings?.[0] ?? '',
+ );
const stringSlotsJoined = stringSlots.join('\n');
const stringSlotsJoinedWithSpacing = stringSlotsJoined
.split('\n')