diff --git a/packages/cxl-ui/scss/global/cxl-certificate-header.scss b/packages/cxl-ui/scss/global/cxl-certificate-header.scss index 7db7b1a3b..3987ca412 100644 --- a/packages/cxl-ui/scss/global/cxl-certificate-header.scss +++ b/packages/cxl-ui/scss/global/cxl-certificate-header.scss @@ -1,5 +1,19 @@ +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; + cxl-certificate-header { position: relative; display: block; z-index: 1; + + &[theme~="completed"] { + [slot="credential"] { + cxl-credential, img { + display: none; + + @media #{mq.$medium} { + display: block; + } + } + } + } } diff --git a/packages/cxl-ui/src/components/cxl-certificate-header.js b/packages/cxl-ui/src/components/cxl-certificate-header.js index ffdc74c6e..644a0c15e 100644 --- a/packages/cxl-ui/src/components/cxl-certificate-header.js +++ b/packages/cxl-ui/src/components/cxl-certificate-header.js @@ -33,10 +33,10 @@ export class CXLCertificateHeaderElement extends LitElement { return nothing; } - return html`

+ return html`

- Training completed -

`; + Certificate earned + `; } // eslint-disable-next-line class-methods-use-this