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 20d12f746..aa7221f6d 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
@@ -46,8 +46,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
style=${styleMap({ backgroundColor: this.background })}>
- ${this.href ? this.#renderLink() : this.#renderButton()}
-
+ ${this.#renderContent()}
`;
@@ -83,6 +82,16 @@ export class UUICardBlockTypeElement extends UUICardElement {
`;
}
+ #renderContent() {
+ if (this.readonly) {
+ return html`
+ ${this.name}${this.description}
+
`;
+ } else {
+ return html` ${this.href ? this.#renderLink() : this.#renderButton()} `;
+ }
+ }
+
static styles = [
...UUICardElement.styles,
css`
@@ -135,6 +144,10 @@ export class UUICardBlockTypeElement extends UUICardElement {
color: var(--uui-color-contrast-disabled);
}
+ :host([readonly]) #open-part {
+ pointer-events: none;
+ }
+
#open-part:hover strong {
text-decoration: underline;
}