diff --git a/sonar-project.properties b/sonar-project.properties
index 31a784be..118eeb74 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -17,3 +17,23 @@ sonar.test.inclusions=src/**/*.test.ts,src/**/*.test.tsx,src/**/__tests__/**/*.{
 
 # Coverage report
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+# Ignore "Refactor this code to not nest functions more than 4 levels deep." in test files,
+# because it's mostly raised when describe-functions are used.
+#
+# Rule: typescript:S2004
+# Name: "Refactor this code to not nest functions more than 4 levels deep."
+# URL: https://rules.sonarsource.com/typescript/RSPEC-2004/
+sonar.issue.ignore.multicriteria.e1.ruleKey=typescript:S2004
+sonar.issue.ignore.multicriteria.e1.resourceKey=**/*.test.tsx
+
+# Ignore "Using pseudorandom number generators (PRNGs) is security-sensitive" in stoyry book files.
+# because it is safe in a non-security related Storybook demo file.
+#
+# Rule: typescript:S2245
+# Name: "Using pseudorandom number generators (PRNGs) is security-sensitive"
+# URL:
+# - https://rules.sonarsource.com/typescript/RSPEC-2245/
+# - https://sonarcloud.io/organizations/city-of-helsinki/rules?open=typescript%3AS2245&rule_key=typescript%3AS2245
+sonar.issue.ignore.multicriteria.e2.ruleKey=typescript:S2245
+sonar.issue.ignore.multicriteria.e2.resourceKey=**/*.stories.tsx
diff --git a/src/common/utils/testImage.ts b/src/common/utils/testImage.ts
index ea3d21c6..4dcc7253 100644
--- a/src/common/utils/testImage.ts
+++ b/src/common/utils/testImage.ts
@@ -1,32 +1,44 @@
 /**
- * Test that loading image is successful
+ * Tests if an image at a given URL loads successfully,
+ * using AbortController for clean event listener management.
+ *
+ * @param {string} [url] - The URL of the image to test.
+ * @return {Promise<void>} - A promise that resolves if the image loads, and rejects otherwise.
  */
-
-/**
- * @param {url} url - url of the image to test.
- * @return {boolean} - Returns promise.
- */
-const testImage = (url?: string): Promise<unknown> => {
+const testImage = (url?: string): Promise<void> => {
   if (!url) {
     return Promise.reject(new Error('No image URL given'));
   }
 
-  // Define the promise
-  const imgPromise = new Promise<void>((resolve, reject) => {
-    // Create the image
-    const imgElement = new Image();
+  const imgElement = new Image();
+  // Create the controller instance
+  const controller = new AbortController();
+  const { signal } = controller;
 
-    // When image is loaded, resolve the promise
-    imgElement.addEventListener('load', () => resolve());
+  return new Promise<void>((resolve, reject) => {
+    // The { signal } option ensures these listeners are grouped for cleanup
+    imgElement.addEventListener(
+      'load',
+      () => {
+        controller.abort(); // Triggers removal of ALL listeners attached to this signal
+        resolve();
+      },
+      { signal },
+    );
 
-    // When there's an error during load, reject the promise
-    imgElement.addEventListener('error', () => reject());
+    imgElement.addEventListener(
+      'error',
+      () => {
+        controller.abort(); // Triggers removal of ALL listeners attached to this signal
+        // Reject with a standard Error object
+        reject(new Error(`Failed to load image from URL: ${url}`));
+      },
+      { signal },
+    );
 
-    // Assign URL
     imgElement.src = url;
   });
-
-  return imgPromise;
+  // Note: The controller is self-contained and cleaned up when the promise resolves/rejects
 };
 
 export default testImage;
diff --git a/src/core/card/Card.tsx b/src/core/card/Card.tsx
index 6b078476..f59715b2 100644
--- a/src/core/card/Card.tsx
+++ b/src/core/card/Card.tsx
@@ -3,7 +3,6 @@
 import { IconArrowRight } from 'hds-react';
 import type { MouseEventHandler } from 'react';
 import React, { useState } from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import classNames from 'classnames';
 
 import styles from './card.module.scss';
@@ -127,11 +126,139 @@ export type CardProps = {
   flex?: boolean;
 };
 
-export function Card({
+const warnOnSSR = () => {
+  // eslint-disable-next-line no-console
+  console.warn('Attempted to navigate in a non-browser environment.');
+};
+
+function CardTitle({
+  children,
+  direction,
+  withTitleIcon,
+  titleIcon,
+}: {
+  readonly children: React.ReactNode;
+  readonly direction?: CardProps['direction'];
+  readonly withTitleIcon: CardProps['withTitleIcon'];
+  readonly titleIcon: CardProps['titleIcon'];
+}) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.title, direction && styles[direction])}>
+      {children}
+      {withTitleIcon && titleIcon}
+    </div>
+  );
+}
+
+function CardSubTitle({
+  children,
+  backgroundColor,
+}: {
+  readonly children: React.ReactNode;
+  readonly backgroundColor?: CardProps['backgroundColor'];
+}): React.ReactElement | null {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        styles.subTitle,
+        backgroundColor &&
+          isWhiteText(backgroundColor) &&
+          colorStyles.whiteText,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function CardText({
+  children,
+  clampText,
+  direction,
+}: Pick<CardProps, 'clampText' | 'direction'> & {
+  children: React.ReactNode;
+}): React.ReactElement | null {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        styles.text,
+        clampText && styles.clamp,
+        direction && styles[direction],
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function CardLink({
+  url,
+  backgroundColor,
+  openLinkInNewTab,
+  ariaLabel,
+  linkArrowLabel,
+}: Pick<
+  CardProps,
+  | 'url'
+  | 'backgroundColor'
+  | 'openLinkInNewTab'
+  | 'ariaLabel'
+  | 'linkArrowLabel'
+>) {
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        styles.buttonWrapper,
+        backgroundColor
+          ? colorStyles[`background${getColor(backgroundColor)}`]
+          : colorStyles.backgroundDefault,
+        backgroundColor &&
+          isWhiteText(backgroundColor) &&
+          colorStyles.whiteLink,
+      )}
+    >
+      <Link
+        tabIndex={-1}
+        href={url}
+        openInNewTab={openLinkInNewTab}
+        iconLeft={<IconArrowRight aria-hidden="true" />}
+        showExternalIcon={false}
+        aria-label={ariaLabel}
+      >
+        {linkArrowLabel && (
+          <span className={styles.linkArrowLabel}>{linkArrowLabel}</span>
+        )}
+      </Link>
+    </div>
+  );
+}
+
+const getImagePosition = (alignment: CardProps['alignment']) => {
+  if (alignment === undefined) {
+    return 'image-left';
+  }
+  return alignment.indexOf('left') === -1 ? 'image-right' : 'image-left';
+};
+
+function CardInnerContent({
   id,
-  alignment,
   ariaLabel,
-  className,
   imageUrl,
   imageLabel,
   title,
@@ -151,60 +278,42 @@ export function Card({
   style,
   backgroundColor,
   primaryContent = 'text',
-  flex,
-}: CardProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const handleToggleActive: MouseEventHandler | undefined = () =>
-    setIsHovered((val) => !val);
-  const isDelimited = alignment?.startsWith('delimited');
-  const isCentered = alignment?.startsWith('center');
-
-  const getImagePosition = () => {
-    if (alignment === undefined) {
-      return 'image-left';
-    }
-    return alignment.indexOf('left') === -1 ? 'image-right' : 'image-left';
-  };
-
-  const imagePosition = getImagePosition();
-
-  const {
-    utils: { redirectToUrl, getIsHrefExternal },
-  } = useConfig();
-
-  const openInNewTab = (): void => {
-    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-    if (newWindow) newWindow.opener = null;
-  };
-
-  const handleClick = () => {
-    if (url) {
-      if (getIsHrefExternal(url)) {
-        openInNewTab();
-      } else {
-        redirectToUrl(url);
-      }
-    }
-  };
+  isHovered,
+  handleToggleActive,
+  isDelimited,
+  isCentered,
+  imagePosition,
+  handleClick,
+}: Omit<CardProps, 'className' | 'flex'> & {
+  isHovered: boolean;
+  handleToggleActive: MouseEventHandler;
+  isDelimited: boolean;
+  isCentered: boolean;
+  imagePosition: 'image-left' | 'image-right';
+  handleClick: () => void;
+}) {
+  const dynamicBackgroundClass = backgroundColor
+    ? colorStyles[`background${getColor(backgroundColor)}`]
+    : colorStyles.backgroundDefault;
 
-  const content = (
+  return (
     <div
-      className={classNames(
-        styles.cardWrapper,
-        withBorder && styles.withBorder,
-        withShadow && styles.withShadow,
-        direction && styles[direction],
-        primaryContent === 'image' && styles['primary-image'],
-        imagePosition && styles[imagePosition],
-        isHovered && styles.isHovered,
-
-        backgroundColor && styles.horizontalBorder,
-        backgroundColor &&
-          isWhiteText(backgroundColor) &&
-          colorStyles.whiteText,
-        isDelimited && styles.isDelimited,
-        isCentered && styles.isCentered,
-      )}
+      className={classNames(styles.cardWrapper, {
+        // Layout/Directional classes
+        [styles[direction]]: direction,
+        [styles['primary-image']]: primaryContent === 'image',
+        [styles[imagePosition]]: imagePosition,
+        [styles.isDelimited]: isDelimited,
+        [styles.isCentered]: isCentered,
+        // Style/State classes
+        [styles.withBorder]: withBorder,
+        [styles.withShadow]: withShadow,
+        [styles.isHovered]: isHovered,
+        // Color-related classes
+        [styles.horizontalBorder]: backgroundColor,
+        [colorStyles.whiteText]:
+          backgroundColor && isWhiteText(backgroundColor),
+      })}
       style={style}
       onMouseEnter={url ? handleToggleActive : undefined}
       onMouseLeave={url ? handleToggleActive : undefined}
@@ -231,87 +340,97 @@ export function Card({
         onClick={handleClick}
       >
         <div
-          className={classNames(
-            styles.content,
-            backgroundColor
-              ? colorStyles[`background${getColor(backgroundColor)}`]
-              : colorStyles.backgroundDefault,
-            backgroundColor &&
-              isWhiteText(backgroundColor) &&
-              colorStyles.whiteText,
-            isDelimited && styles.isDelimited,
-            isCentered && styles.isCentered,
-          )}
+          className={classNames(styles.content, dynamicBackgroundClass, {
+            // Conditional classes using the object format
+            [colorStyles.whiteText]:
+              backgroundColor && isWhiteText(backgroundColor),
+            [styles.isDelimited]: isDelimited,
+            [styles.isCentered]: isCentered,
+          })}
         >
           <div className={styles.textWrapper}>
             {title && (
-              <div
-                className={classNames(
-                  styles.title,
-                  direction && styles[direction],
-                )}
+              <CardTitle
+                direction={direction}
+                withTitleIcon={withTitleIcon}
+                titleIcon={titleIcon}
               >
                 {title}
-                {withTitleIcon && titleIcon}
-              </div>
-            )}
-            {subTitle && (
-              <div
-                className={classNames(
-                  styles.subTitle,
-                  backgroundColor &&
-                    isWhiteText(backgroundColor) &&
-                    colorStyles.whiteText,
-                )}
-              >
-                {subTitle}
-              </div>
+              </CardTitle>
             )}
+            <CardSubTitle backgroundColor={backgroundColor}>
+              {subTitle}
+            </CardSubTitle>
             {text && (
-              <div
-                className={classNames(
-                  styles.text,
-                  clampText && styles.clamp,
-                  direction && styles[direction],
-                )}
-              >
+              <CardText clampText={clampText} direction={direction}>
                 {getTextFromHtml(text)}
-              </div>
+              </CardText>
             )}
             {customContent && (
               <div className={styles.customContent}>{customContent}</div>
             )}
           </div>
         </div>
-        {url && hasLink && (
-          <div
-            className={classNames(
-              styles.buttonWrapper,
-              backgroundColor
-                ? colorStyles[`background${getColor(backgroundColor)}`]
-                : colorStyles.backgroundDefault,
-              backgroundColor &&
-                isWhiteText(backgroundColor) &&
-                colorStyles.whiteLink,
-            )}
-          >
-            <Link
-              tabIndex={-1}
-              href={url}
-              openInNewTab={openLinkInNewTab}
-              iconLeft={<IconArrowRight aria-hidden="true" />}
-              showExternalIcon={false}
-              aria-label={ariaLabel}
-            >
-              {linkArrowLabel && (
-                <span className={styles.linkArrowLabel}>{linkArrowLabel}</span>
-              )}
-            </Link>
-          </div>
+        {hasLink && (
+          <CardLink
+            url={url}
+            backgroundColor={backgroundColor}
+            openLinkInNewTab={openLinkInNewTab}
+            ariaLabel={ariaLabel}
+            linkArrowLabel={linkArrowLabel}
+          />
         )}
       </div>
     </div>
   );
+}
+
+export function Card(props: CardProps) {
+  const { id, ariaLabel, className, url, openLinkInNewTab, flex, alignment } =
+    props;
+  const [isHovered, setIsHovered] = useState(false);
+  const handleToggleActive: MouseEventHandler | undefined = () =>
+    setIsHovered((val) => !val);
+
+  const isDelimited = alignment?.startsWith('delimited') ?? false;
+  const isCentered = alignment?.startsWith('center') ?? false;
+  const imagePosition = getImagePosition(alignment);
+
+  const {
+    utils: { redirectToUrl, getIsHrefExternal },
+  } = useConfig();
+
+  const handleClick = () => {
+    if (!url) return;
+
+    // Ensure we are in a client-side (browser) environment
+    if (typeof window === 'undefined') {
+      warnOnSSR();
+      return;
+    }
+
+    // Determine if we should open a new tab: either it's explicitly set, or it's an external URL.
+    const shouldOpenNewTab = openLinkInNewTab || getIsHrefExternal(url);
+
+    if (shouldOpenNewTab) {
+      const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+      if (newWindow) newWindow.opener = null;
+    } else {
+      redirectToUrl(url);
+    }
+  };
+
+  const content = (
+    <CardInnerContent
+      {...props}
+      isHovered={isHovered}
+      handleToggleActive={handleToggleActive}
+      isDelimited={isDelimited}
+      isCentered={isCentered}
+      imagePosition={imagePosition}
+      handleClick={handleClick}
+    />
+  );
 
   if (url) {
     return (
diff --git a/src/core/card/card.module.scss b/src/core/card/card.module.scss
index 91acc9f6..4e8d148e 100644
--- a/src/core/card/card.module.scss
+++ b/src/core/card/card.module.scss
@@ -140,6 +140,15 @@
           flex-direction: row;
         }
       }
+
+      &.horizontalBorder {
+        // overriding withborder param
+        border: none;
+
+        @include breakpoints.respond_below(s) {
+          border: 1px solid var(--color-black-30);
+        }
+      }
     }
 
     & > :first-child {
@@ -182,17 +191,6 @@
         }
       }
     }
-
-    &.responsive-reverse {
-      &.horizontalBorder {
-        // overriding withborder param
-        border: none;
-
-        @include breakpoints.respond_below(s) {
-          border: 1px solid var(--color-black-30);
-        }
-      }
-    }
   }
 
   .imageWrapper {
@@ -292,10 +290,6 @@
 
   .content {
     flex: 1;
-    @include breakpoints.respond_above(s) {
-      // min-height: var(--height-image-desktop);
-      // height: 100%;
-    }
   }
 
   .textWrapper {
@@ -303,10 +297,6 @@
     flex-direction: column;
     padding: var(--spacing-s) var(--spacing-m);
 
-    @include breakpoints.respond_below(s) {
-      // background-color: var(--color-white);
-    }
-
     .title {
       font-size: var(--fontsize-heading-s);
       line-height: var(--lineheight-m);
@@ -341,6 +331,7 @@
       display: -webkit-box;
       &.clamp {
         -webkit-line-clamp: 2;
+        line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
       }
@@ -353,6 +344,7 @@
         margin-bottom: var(--spacing-2-xs);
         &.clamp {
           -webkit-line-clamp: 3;
+          line-clamp: 3;
           -webkit-box-orient: vertical;
         }
       }
diff --git a/src/core/carousel/components/CarouselSlideButton.tsx b/src/core/carousel/components/CarouselSlideButton.tsx
index 73643629..17e02318 100644
--- a/src/core/carousel/components/CarouselSlideButton.tsx
+++ b/src/core/carousel/components/CarouselSlideButton.tsx
@@ -25,10 +25,12 @@ export function CarouselPreviousSlideButton() {
     handleUpdateSlideProps(targetSlide);
   };
 
+  const ariaLabelTitle = title ? ` - ${title}` : '';
+
   return (
     <button
       type="button"
-      aria-label={`${previous}${title ? ` - ${title}` : ''}`}
+      aria-label={`${previous}${ariaLabelTitle}`}
       className={classNames(styles.btn, styles.btnPrev)}
       onClick={handlePrevClick}
       disabled={!isReady}
@@ -57,10 +59,12 @@ export function CarouselNextSlideButton() {
     );
   };
 
+  const ariaLabelTitle = title ? ` - ${title}` : '';
+
   return (
     <button
       type="button"
-      aria-label={`${next}${title ? ` - ${title}` : ''}`}
+      aria-label={`${next}${ariaLabelTitle}`}
       className={classNames(styles.btn, styles.btnNext)}
       onClick={handleNextClick}
       disabled={!isReady}
diff --git a/src/core/carousel/components/CarouselSliderPage.tsx b/src/core/carousel/components/CarouselSliderPage.tsx
index 810031aa..0aed00b0 100644
--- a/src/core/carousel/components/CarouselSliderPage.tsx
+++ b/src/core/carousel/components/CarouselSliderPage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import styles from '../carousel.module.scss';
-import { getItemSetItemKey, getItemSetKey } from '../utils/utils';
+import { getItemSetItemKey } from '../utils/utils';
 import { MOBILE_WIDTH } from '../constants';
 import { useCarouselContext } from '../context/CarouselContext';
 
@@ -24,12 +24,6 @@ export function CarouselSliderPage({
         node && node.toggleAttribute('inert', itemSetIndex !== currentSlide)
       }
       aria-hidden={itemSetIndex !== currentSlide}
-      key={getItemSetKey(
-        itemSetIndex,
-        'id' in itemSet && typeof itemSet.id === 'string'
-          ? itemSet.id
-          : undefined,
-      )}
       className={classNames(
         styles.slide,
         itemSetIndex === currentSlide && styles.slideSelected,
@@ -40,9 +34,7 @@ export function CarouselSliderPage({
           <div
             key={getItemSetItemKey(
               itemIndex,
-              'id' in itemSet && typeof itemSet.id === 'string'
-                ? itemSet.id
-                : undefined,
+              undefined,
               `itemSet-${itemSetIndex}-item`,
             )}
             className={styles.slideItem}
diff --git a/src/core/imageGallery/ImagesGrid.tsx b/src/core/imageGallery/ImagesGrid.tsx
index c870ff32..3d5b43e6 100644
--- a/src/core/imageGallery/ImagesGrid.tsx
+++ b/src/core/imageGallery/ImagesGrid.tsx
@@ -56,6 +56,8 @@ export function ImagesGrid({
       <Grid colsCount={images.length === 1 ? 1 : columns}>
         {images.map((image, i) => (
           <ImageItem
+            // eslint-disable-next-line react/no-array-index-key
+            key={`grid-image-${i}`}
             imageId={i}
             image={image}
             lightboxUid={lightboxUid}
diff --git a/src/core/imageGallery/imageGallery.module.scss b/src/core/imageGallery/imageGallery.module.scss
index c4223712..d76acf57 100644
--- a/src/core/imageGallery/imageGallery.module.scss
+++ b/src/core/imageGallery/imageGallery.module.scss
@@ -57,7 +57,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    display: flex;
     position: absolute;
     max-height: 90%;
     max-width: 100%;
diff --git a/src/core/navigation/Navigation.tsx b/src/core/navigation/Navigation.tsx
index 71725e0d..ca932082 100644
--- a/src/core/navigation/Navigation.tsx
+++ b/src/core/navigation/Navigation.tsx
@@ -196,7 +196,7 @@ export function Navigation({
         logoAriaLabel={t('headerActionBarLogoAriaLabel')}
       >
         <Header.LanguageSelector />
-        {userNavigation && userNavigation}
+        {userNavigation}
       </Header.ActionBar>
       <Header.NavigationMenu>
         {menuItemChildren[TOP_LEVEL_MENU_ITEM_PARENT_ID]?.map(
diff --git a/src/core/page/Page.stories.tsx b/src/core/page/Page.stories.tsx
index bec88d3d..f8d3bc7e 100644
--- a/src/core/page/Page.stories.tsx
+++ b/src/core/page/Page.stories.tsx
@@ -116,28 +116,31 @@ export const PageDefault = {
           { title: 'Root', uri: '/' },
           { title: 'Nested', uri: '/nested' },
         ])}
-        collections={getCollections(pageMock.modules)?.map((collection) => (
-          <Collection
-            key={`collection-${Math.random()}`}
-            title={collection.title}
-            collectionContainerProps={{ withDots: false }}
-            type={getCollectionUIType(collection)}
-            cards={getCollectionCards(collection, [
-              ...defaultConfig.organisationPrefixes,
-            ]).map((cardProps) => (
-              <Card
-                key={cardProps.id}
-                {...cardProps}
-                imageUrl={
-                  cardProps.imageUrl ||
-                  pageMock.featuredImage?.node?.mediaItemUrl
-                }
-                direction="fixed-vertical"
-                clampText
-              />
-            ))}
-          />
-        ))}
+        collections={getCollections(pageMock.modules)?.map(
+          (collection, index) => (
+            <Collection
+              // eslint-disable-next-line react/no-array-index-key
+              key={`collection-${index}`}
+              title={collection.title}
+              collectionContainerProps={{ withDots: false }}
+              type={getCollectionUIType(collection)}
+              cards={getCollectionCards(collection, [
+                ...defaultConfig.organisationPrefixes,
+              ]).map((cardProps) => (
+                <Card
+                  key={cardProps.id}
+                  {...cardProps}
+                  imageUrl={
+                    cardProps.imageUrl ||
+                    pageMock.featuredImage?.node?.mediaItemUrl
+                  }
+                  direction="fixed-vertical"
+                  clampText
+                />
+              ))}
+            />
+          ),
+        )}
         shareLinks={
           <div style={{ height: '100px', width: '100%', background: 'red' }}>
             TODO: Implement share links
diff --git a/src/core/pageContent/PageContent.stories.tsx b/src/core/pageContent/PageContent.stories.tsx
index 7faf6fb1..936e4f8a 100644
--- a/src/core/pageContent/PageContent.stories.tsx
+++ b/src/core/pageContent/PageContent.stories.tsx
@@ -91,9 +91,10 @@ export const PageContentWithFunctions = {
       />
     ),
     collections: (page: PageType | ArticleType) =>
-      getCollections(page?.modules ?? [], false)?.map((collection) => (
+      getCollections(page?.modules ?? [], false)?.map((collection, index) => (
         <Collection
-          key={`collection-${Math.random()}`}
+          // eslint-disable-next-line react/no-array-index-key
+          key={`collection-${index}`}
           title={`${collection.title} (created with a custom function)`}
           cards={getCollectionCards(collection, [
             ...defaultConfig.organisationPrefixes,
diff --git a/src/core/pageContent/PageContentLayout.tsx b/src/core/pageContent/PageContentLayout.tsx
index 4caf47b5..b9d36b60 100644
--- a/src/core/pageContent/PageContentLayout.tsx
+++ b/src/core/pageContent/PageContentLayout.tsx
@@ -59,9 +59,7 @@ export function PageContentLayout({
             <div className={styles.content}>
               <div className={styles.mainContent}>{content}</div>
               <aside>{sidebarContent}</aside>
-              <div className={styles.shareLinks}>
-                {shareLinks && shareLinks}
-              </div>
+              <div className={styles.shareLinks}>{shareLinks}</div>
             </div>
           </ContentContainer>
         </PageSection>
diff --git a/src/core/pageContent/sidebarContent/SidebarContentCard.tsx b/src/core/pageContent/sidebarContent/SidebarContentCard.tsx
index ddd57920..b3a20dc8 100644
--- a/src/core/pageContent/sidebarContent/SidebarContentCard.tsx
+++ b/src/core/pageContent/sidebarContent/SidebarContentCard.tsx
@@ -33,7 +33,7 @@ export default function SidebarContentCard({
         alt={imageAlt ?? ''}
       />
       <div className={styles.content}>
-        <p className={styles.description}>{description && description}</p>
+        {description && <p className={styles.description}>{description}</p>}
         <Link className={styles.link} href={url}>
           {title}
         </Link>
diff --git a/src/core/pageModules/CardsModule/CardsModule.stories.tsx b/src/core/pageModules/CardsModule/CardsModule.stories.tsx
index cf9eaea3..54d73618 100644
--- a/src/core/pageModules/CardsModule/CardsModule.stories.tsx
+++ b/src/core/pageModules/CardsModule/CardsModule.stories.tsx
@@ -22,6 +22,7 @@ const getItems = () => {
       description:
         'Haluatko järjestää liikuntatapahtuman tai etsitkö harjoitusvuoroa seurallesi? Helsingissä on runsaasti erilaisia ja erikokoisia liikuntatiloja, joita voi varata maksutta.',
       link: { target: '_blank', title: 'link title', url: 'https://hel.fi' },
+      // // SonarCloud S2245: Math.random() is safe here as this is a non-security related Storybook demo file.
       backgroundColor:
         SELECT_COLORS[Math.floor(Math.random() * SELECT_COLORS.length)],
       icon: 'alert-circle',
diff --git a/src/core/utils/string.ts b/src/core/utils/string.ts
index 61b3e113..0f901a31 100644
--- a/src/core/utils/string.ts
+++ b/src/core/utils/string.ts
@@ -1,17 +1,41 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { camelCase, startCase } from 'lodash-es';
 import { decode } from 'html-entities';
 
 export const SELECT_COLORS_LIGHT = ['coat-of-arms', 'brick', 'bus', 'tram'];
 
-export const getColor = (color: string): string =>
-  startCase(camelCase(color)).replace(/\s/g, '');
+// Helper to convert strings like 'coat-of-arms' to 'CoatOfArms'
+const toPascalCase = (s: string): string =>
+  startCase(camelCase(s)).replace(/\s/g, '');
 
+/**
+ * Converts a string (e.g., 'coat-of-arms') into PascalCase (e.g., 'CoatOfArms').
+ * @param {string} color The color string to convert.
+ * @returns {string} The color string in PascalCase format.
+ */
+export const getColor = (color: string): string => toPascalCase(color);
+
+/**
+ * Prepends 'icon-' to a name and converts it to PascalCase (e.g., 'icon-alert' to 'IconAlert').
+ * @param {string} name The icon name part.
+ * @returns {string} The icon name in PascalCase format.
+ */
 export const getIconName = (name: string): string =>
-  startCase(camelCase(`icon-${name}`)).replace(/\s/g, '');
+  toPascalCase(`icon-${name}`);
 
+/**
+ * Strips all HTML tags from a string and decodes HTML entities.
+ * Uses a safe regex (/<[^>]*>/gi) to prevent ReDoS (Regular Expression Denial of Service).
+ *
+ * @param {string} html The input string containing HTML markup.
+ * @returns {string} The resulting text string with all HTML tags removed and entities decoded.
+ */
 export const getTextFromHtml = (html: string): string =>
-  decode(html.toString().replace(/(<([^>]+)>)/gi, ''));
+  decode(html.replace(/<[^>]*>/gi, ''));
 
+/**
+ * Checks if the text color should be white based on the background color.
+ * @param {string} color The background color string.
+ * @returns {boolean} True if white text should be used, false otherwise.
+ */
 export const isWhiteText = (color: string): boolean =>
   SELECT_COLORS_LIGHT.includes(color);