diff --git a/packages/ffe-cards-react/src/CardBase.spec.tsx b/packages/ffe-cards-react/src/CardBase.spec.tsx
index 37444e3dcb..081c1e132a 100644
--- a/packages/ffe-cards-react/src/CardBase.spec.tsx
+++ b/packages/ffe-cards-react/src/CardBase.spec.tsx
@@ -81,4 +81,24 @@ describe('<CardBase/>', () => {
             card.classList.contains('ffe-card-base--text-center'),
         ).toBeTruthy();
     });
+
+    it('should render as wished element', () => {
+        render(
+            <CardBase as="li">
+                <div />
+            </CardBase>,
+        );
+        expect(screen.getByRole('listitem')).toBeInTheDocument();
+    });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLLIElement>();
+        render(
+            <CardBase as="li" ref={ref}>
+                <div />
+            </CardBase>,
+        );
+        const listitem = screen.getByRole('listitem');
+        expect(listitem).toBe(ref.current);
+    });
 });
diff --git a/packages/ffe-cards-react/src/CardBase.tsx b/packages/ffe-cards-react/src/CardBase.tsx
index 5ca18b7184..f6a5e22652 100644
--- a/packages/ffe-cards-react/src/CardBase.tsx
+++ b/packages/ffe-cards-react/src/CardBase.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import { WithCardActionProps, WithCardAction } from './components';
+import { ComponentAsPropParams } from './types';
+import { fixedForwardRef } from './fixedForwardRef';
 
 type BgColor = 'sand-30' | 'sand-70' | 'frost-30' | 'syrin-30' | 'syrin-70';
 type BgColorDarkmode = 'natt' | 'svart' | 'koksgraa';
 
-export interface CardBaseProps
-    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export type CardBaseProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
     shadow?: boolean;
     noMargin?: boolean;
     textCenter?: boolean;
@@ -14,19 +18,24 @@ export interface CardBaseProps
     bgDarkmodeColor?: BgColorDarkmode;
     noPadding?: boolean;
     children: WithCardActionProps['children'] | React.ReactNode;
-}
+};
+
+function CardBaseWithForwardRef<As extends ElementType>(
+    props: CardBaseProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const {
+        className,
+        shadow,
+        noMargin,
+        textCenter,
+        bgColor,
+        bgDarkmodeColor,
+        noPadding,
+        children,
+        ...rest
+    } = props;
 
-export const CardBase: React.FC<CardBaseProps> = ({
-    className,
-    shadow,
-    noMargin,
-    textCenter,
-    bgColor,
-    bgDarkmodeColor,
-    noPadding,
-    children,
-    ...rest
-}) => {
     return (
         <WithCardAction
             className={classNames('ffe-card-base', className, {
@@ -37,7 +46,8 @@ export const CardBase: React.FC<CardBaseProps> = ({
                 'ffe-card-base--text-center': textCenter,
                 'ffe-card-base--no-padding': noPadding,
             })}
-            {...rest}
+            {...(rest as React.ComponentPropsWithoutRef<typeof WithCardAction>)}
+            ref={ref}
         >
             {({ CardAction }) =>
                 typeof children === 'function'
@@ -46,4 +56,6 @@ export const CardBase: React.FC<CardBaseProps> = ({
             }
         </WithCardAction>
     );
-};
+}
+
+export const CardBase = fixedForwardRef(CardBaseWithForwardRef);
diff --git a/packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx b/packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx
index 0497040e79..e81da3f5cd 100644
--- a/packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx
+++ b/packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx
@@ -92,4 +92,31 @@ describe('IconCard', () => {
         expect(card.classList.contains('ffe-icon-card')).toBeTruthy();
         expect(card.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should render as wished element', () => {
+        render(
+            <IconCard
+                as="li"
+                icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
+            >
+                {children}
+            </IconCard>,
+        );
+        expect(screen.getByRole('listitem')).toBeInTheDocument();
+    });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLLIElement>();
+        render(
+            <IconCard
+                as="li"
+                ref={ref}
+                icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
+            >
+                {children}
+            </IconCard>,
+        );
+        const listitem = screen.getByRole('listitem');
+        expect(listitem).toBe(ref.current);
+    });
 });
diff --git a/packages/ffe-cards-react/src/IconCard/IconCard.tsx b/packages/ffe-cards-react/src/IconCard/IconCard.tsx
index 419e3f3af4..7b173fade4 100644
--- a/packages/ffe-cards-react/src/IconCard/IconCard.tsx
+++ b/packages/ffe-cards-react/src/IconCard/IconCard.tsx
@@ -1,10 +1,13 @@
-import React, { ReactElement } from 'react';
-import { CardRenderProps } from '../types';
+import React, { ElementType, ForwardedRef, ReactElement } from 'react';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
 import classNames from 'classnames';
 import { WithCardAction, Text, Subtext, Title, CardName } from '../components';
+import { fixedForwardRef } from '../fixedForwardRef';
 
-export interface IconCardProps
-    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export type IconCardProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
     /** Element of icon */
     icon: ReactElement;
     /** Smaller icon and less space */
@@ -12,15 +15,14 @@ export interface IconCardProps
     children:
         | React.ReactNode
         | ((cardRenderProps: CardRenderProps) => React.ReactNode);
-}
+};
+
+function IconCardWithForwardRef<As extends ElementType>(
+    props: IconCardProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, condensed, icon, children, ...rest } = props;
 
-export const IconCard: React.FC<IconCardProps> = ({
-    className,
-    condensed,
-    icon,
-    children,
-    ...rest
-}) => {
     return (
         <WithCardAction
             className={classNames(
@@ -28,7 +30,8 @@ export const IconCard: React.FC<IconCardProps> = ({
                 { 'ffe-icon-card--condensed': condensed },
                 className,
             )}
-            {...rest}
+            {...(rest as React.ComponentPropsWithoutRef<typeof WithCardAction>)}
+            ref={ref}
         >
             {({ CardAction }) => (
                 <>
@@ -54,4 +57,6 @@ export const IconCard: React.FC<IconCardProps> = ({
             )}
         </WithCardAction>
     );
-};
+}
+
+export const IconCard = fixedForwardRef(IconCardWithForwardRef);
diff --git a/packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx b/packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx
index ef624fef3d..6248b5af3e 100644
--- a/packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx
+++ b/packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx
@@ -102,4 +102,33 @@ describe('ImageCard', () => {
         expect(card.classList.contains('ffe-image-card')).toBeTruthy();
         expect(card.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should render as wished element', () => {
+        render(
+            <ImageCard
+                as="li"
+                imageAltText="Image alt text"
+                imageSrc="random/path"
+            >
+                {children}
+            </ImageCard>,
+        );
+        expect(screen.getByRole('listitem')).toBeInTheDocument();
+    });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLLIElement>();
+        render(
+            <ImageCard
+                as="li"
+                ref={ref}
+                imageAltText="Image alt text"
+                imageSrc="random/path"
+            >
+                {children}
+            </ImageCard>,
+        );
+        const listitem = screen.getByRole('listitem');
+        expect(listitem).toBe(ref.current);
+    });
 });
diff --git a/packages/ffe-cards-react/src/ImageCard/ImageCard.tsx b/packages/ffe-cards-react/src/ImageCard/ImageCard.tsx
index 559ac7159d..5ddacfd0e1 100644
--- a/packages/ffe-cards-react/src/ImageCard/ImageCard.tsx
+++ b/packages/ffe-cards-react/src/ImageCard/ImageCard.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
-import { CardRenderProps } from '../types';
+import React, { ElementType, ForwardedRef } from 'react';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
+import { fixedForwardRef } from '../fixedForwardRef';
 
-export interface ImageCardProps
-    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export type ImageCardProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
     /** The src for the image */
     imageSrc: string;
     /** The alt text for the image */
@@ -12,19 +15,19 @@ export interface ImageCardProps
     children:
         | React.ReactNode
         | ((cardRenderProps: CardRenderProps) => React.ReactNode);
-}
+};
+
+function ImageCardWithForwardRef<As extends ElementType>(
+    props: ImageCardProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, imageSrc, imageAltText, children, ...rest } = props;
 
-export const ImageCard: React.FC<ImageCardProps> = ({
-    className,
-    imageSrc,
-    imageAltText,
-    children,
-    ...rest
-}) => {
     return (
         <WithCardAction
             className={classNames('ffe-image-card', className)}
-            {...rest}
+            {...(rest as React.ComponentPropsWithoutRef<typeof WithCardAction>)}
+            ref={ref}
         >
             {({ CardAction }) => (
                 <>
@@ -51,4 +54,5 @@ export const ImageCard: React.FC<ImageCardProps> = ({
             )}
         </WithCardAction>
     );
-};
+}
+export const ImageCard = fixedForwardRef(ImageCardWithForwardRef);
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx
index ca747c6da6..55f3b509fb 100644
--- a/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx
+++ b/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx
@@ -80,4 +80,37 @@ describe('StippledCard', () => {
         expect(card.classList.contains('ffe-stippled-card')).toBeTruthy();
         expect(card.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should render as wished element', () => {
+        render(
+            <StippledCard
+                as="li"
+                img={{
+                    element: <Icon fileUrl="monitoring" size="md" />,
+                    type: 'icon',
+                }}
+            >
+                {children}
+            </StippledCard>,
+        );
+        expect(screen.getByRole('listitem')).toBeInTheDocument();
+    });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLLIElement>();
+        render(
+            <StippledCard
+                as="li"
+                ref={ref}
+                img={{
+                    element: <Icon fileUrl="monitoring" size="md" />,
+                    type: 'icon',
+                }}
+            >
+                {children}
+            </StippledCard>,
+        );
+        const listitem = screen.getByRole('listitem');
+        expect(listitem).toBe(ref.current);
+    });
 });
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx
index d19a576504..e426ac49bc 100644
--- a/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx
+++ b/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx
@@ -1,10 +1,13 @@
-import React, { ReactNode } from 'react';
-import { CardRenderProps } from '../types';
+import React, { ElementType, ForwardedRef, ReactNode } from 'react';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
+import { fixedForwardRef } from '../fixedForwardRef';
 
-export interface StippledCardProps
-    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export type StippledCardProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
     /** Smaller icon and less space */
     condensed?: boolean;
     /** Image to be rendered*/
@@ -15,15 +18,14 @@ export interface StippledCardProps
     children:
         | React.ReactNode
         | ((cardRenderProps: CardRenderProps) => React.ReactNode);
-}
+};
+
+function StippledCardWithForwardRef<As extends ElementType>(
+    props: StippledCardProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, condensed, img, children, ...rest } = props;
 
-export const StippledCard: React.FC<StippledCardProps> = ({
-    className,
-    condensed,
-    img,
-    children,
-    ...rest
-}) => {
     return (
         <WithCardAction
             className={classNames(
@@ -31,7 +33,8 @@ export const StippledCard: React.FC<StippledCardProps> = ({
                 { 'ffe-stippled-card--condensed': condensed },
                 className,
             )}
-            {...rest}
+            {...(rest as React.ComponentPropsWithoutRef<typeof WithCardAction>)}
+            ref={ref}
         >
             {({ CardAction }) => (
                 <>
@@ -59,4 +62,5 @@ export const StippledCard: React.FC<StippledCardProps> = ({
             )}
         </WithCardAction>
     );
-};
+}
+export const StippledCard = fixedForwardRef(StippledCardWithForwardRef);
diff --git a/packages/ffe-cards-react/src/TextCard/TextCard.spec.tsx b/packages/ffe-cards-react/src/TextCard/TextCard.spec.tsx
index 077e46a7b0..ede030bea9 100644
--- a/packages/ffe-cards-react/src/TextCard/TextCard.spec.tsx
+++ b/packages/ffe-cards-react/src/TextCard/TextCard.spec.tsx
@@ -37,4 +37,20 @@ describe('TextCard', () => {
         expect(card.classList.contains('ffe-text-card')).toBeTruthy();
         expect(card.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should render as wished element', () => {
+        render(<TextCard as="li">{children}</TextCard>);
+        expect(screen.getByRole('listitem')).toBeInTheDocument();
+    });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLLIElement>();
+        render(
+            <TextCard as="li" ref={ref}>
+                {children}
+            </TextCard>,
+        );
+        const listitem = screen.getByRole('listitem');
+        expect(listitem).toBe(ref.current);
+    });
 });
diff --git a/packages/ffe-cards-react/src/TextCard/TextCard.tsx b/packages/ffe-cards-react/src/TextCard/TextCard.tsx
index f98d2865a2..02bc2ed733 100644
--- a/packages/ffe-cards-react/src/TextCard/TextCard.tsx
+++ b/packages/ffe-cards-react/src/TextCard/TextCard.tsx
@@ -1,24 +1,27 @@
-import React from 'react';
-import { CardRenderProps } from '../types';
+import React, { ElementType, ForwardedRef } from 'react';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
+import { fixedForwardRef } from '../fixedForwardRef';
 
-export interface TextCardProps
-    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export type TextCardProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
     /** Left-aligned text on the card */
     leftAlign?: boolean;
     /** Function that's passed available sub-components as arguments, or regular children */
     children:
         | React.ReactNode
         | ((cardRenderProps: CardRenderProps) => React.ReactNode);
-}
+};
+
+function TextCardWithForwardRef<As extends ElementType>(
+    props: TextCardProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, leftAlign, children, ...rest } = props;
 
-export const TextCard: React.FC<TextCardProps> = ({
-    className,
-    leftAlign,
-    children,
-    ...rest
-}) => {
     return (
         <WithCardAction
             className={classNames(
@@ -26,7 +29,8 @@ export const TextCard: React.FC<TextCardProps> = ({
                 { 'ffe-text-card--left-align': leftAlign },
                 className,
             )}
-            {...rest}
+            {...(rest as React.ComponentPropsWithoutRef<typeof WithCardAction>)}
+            ref={ref}
         >
             {({ CardAction }) =>
                 typeof children === 'function'
@@ -35,4 +39,6 @@ export const TextCard: React.FC<TextCardProps> = ({
             }
         </WithCardAction>
     );
-};
+}
+
+export const TextCard = fixedForwardRef(TextCardWithForwardRef);
diff --git a/packages/ffe-cards-react/src/components/WithCardAction.spec.tsx b/packages/ffe-cards-react/src/components/WithCardAction.spec.tsx
index b4ecb30a54..110e5216d1 100644
--- a/packages/ffe-cards-react/src/components/WithCardAction.spec.tsx
+++ b/packages/ffe-cards-react/src/components/WithCardAction.spec.tsx
@@ -81,4 +81,19 @@ describe('<WithCardAction />', () => {
         const button = screen.getByRole('button');
         expect(button).toBe(ref.current);
     });
+
+    it('should set refs on <CardAction />', () => {
+        const ref = React.createRef<HTMLButtonElement>();
+        render(
+            <WithCardAction>
+                {({ CardAction }) => (
+                    <CardAction as="button" ref={ref}>
+                        en knapp
+                    </CardAction>
+                )}
+            </WithCardAction>,
+        );
+        const button = screen.getByRole('button');
+        expect(button).toBe(ref.current);
+    });
 });
diff --git a/packages/ffe-cards-react/src/components/WithCardAction.tsx b/packages/ffe-cards-react/src/components/WithCardAction.tsx
index e9e32663ef..9552f2c0d6 100644
--- a/packages/ffe-cards-react/src/components/WithCardAction.tsx
+++ b/packages/ffe-cards-react/src/components/WithCardAction.tsx
@@ -3,30 +3,37 @@ import classNames from 'classnames';
 import { mergeRefs } from '../mergeRefs';
 import { CardAction, CardActionProps } from './CardAction';
 import { fixedForwardRef } from '../fixedForwardRef';
+import { ComponentAsPropParams } from '../types';
 
-export interface WithCardActionProps
-    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+export type WithCardActionProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
     children: (props: { CardAction: typeof CardAction }) => React.ReactNode;
-}
+};
 
-export const WithCardAction: React.FC<WithCardActionProps> = ({
-    children,
-    onClick,
-    ...rest
-}) => {
-    const actionRef = useRef<HTMLAnchorElement>(null);
+function WithCardActionForwardRef<As extends ElementType>(
+    props: WithCardActionProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { children, as: Comp = 'div', onClick, ...rest } = props;
+    const actionInnerRef = useRef<HTMLAnchorElement>(null);
 
     const PartialAppliedCardAction = useCallback(
-        <As extends ElementType = 'a'>(
-            { className, ...restCardAction }: CardActionProps<As>,
-            ref?: ForwardedRef<any>,
+        <CardActionAs extends ElementType = 'a'>(
+            { className, ...restCardAction }: CardActionProps<CardActionAs>,
+            actionRef?: ForwardedRef<any>,
         ) => {
             return (
                 <CardAction
                     className={classNames(className, 'ffe-card__action', {
                         'ffe-card__action--raw': !className,
                     })}
-                    ref={ref ? mergeRefs([ref, actionRef]) : actionRef}
+                    ref={
+                        actionRef
+                            ? mergeRefs([actionRef, actionInnerRef])
+                            : actionInnerRef
+                    }
                     {...restCardAction}
                 />
             );
@@ -35,19 +42,21 @@ export const WithCardAction: React.FC<WithCardActionProps> = ({
     );
 
     return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <div
+        <Comp
             {...rest}
             onClick={(e: React.MouseEvent<HTMLDivElement>) => {
-                if (!actionRef.current?.contains(e.target as Node)) {
-                    actionRef.current?.click();
+                if (!actionInnerRef.current?.contains(e.target as Node)) {
+                    actionInnerRef.current?.click();
                 }
                 onClick?.(e);
             }}
+            ref={ref}
         >
             {children({
                 CardAction: fixedForwardRef(PartialAppliedCardAction),
             })}
-        </div>
+        </Comp>
     );
-};
+}
+
+export const WithCardAction = fixedForwardRef(WithCardActionForwardRef);