diff --git a/src/__tests__/testid-test.tsx b/src/__tests__/testid-test.tsx
index 28617daf5..63c981c76 100644
--- a/src/__tests__/testid-test.tsx
+++ b/src/__tests__/testid-test.tsx
@@ -4,8 +4,12 @@ import {screen, render, within} from '@testing-library/react';
 import {
     ButtonPrimary,
     ButtonSecondary,
+    Callout,
     DataCard,
     DateField,
+    Hero,
+    Image,
+    HighlightedCard,
     IconShopRegular,
     Meter,
     Placeholder,
@@ -14,6 +18,10 @@ import {
     SuccessFeedbackScreen,
     TextField,
     ThemeContextProvider,
+    Tag,
+    CoverHero,
+    Header,
+    MainSectionHeader,
 } from '..';
 import {makeTheme} from './test-utils';
 
@@ -101,6 +109,15 @@ test('Cards test ids', () => {
     );
 });
 
+test('HighlightedCard test ids', () => {
+    checkTestIds(<HighlightedCard title="Title" description="Description" imageUrl="https://anyurl.com" />, [
+        {
+            componentName: 'HighlightedCard',
+            internalTestIds: ['title', 'description', 'image'],
+        },
+    ]);
+});
+
 test('FeedbackScreen test ids', () => {
     checkTestIds(
         <SuccessFeedbackScreen
@@ -175,6 +192,94 @@ test('Buttons test ids', () => {
     );
 });
 
+test('Callout test ids', () => {
+    checkTestIds(
+        <Callout title="Title" description="Description" asset={<IconShopRegular />} onClose={() => {}} />,
+        [
+            {
+                componentName: 'Callout',
+                internalTestIds: ['title', 'description', 'asset', 'closeButton'],
+            },
+        ]
+    );
+});
+
+test('Hero test ids', () => {
+    checkTestIds(
+        <Hero
+            background="default"
+            media={<Image src="https://anyurl.com" />}
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+            button={<ButtonPrimary fake>button</ButtonPrimary>}
+            desktopMediaPosition="right"
+            extra={<Placeholder />}
+        />,
+        [
+            {
+                componentName: 'Hero',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description', 'slot'],
+            },
+        ]
+    );
+});
+
+test('CoverHero test ids', () => {
+    checkTestIds(
+        <CoverHero
+            backgroundImage="https://anyurl.com"
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+            button={<ButtonPrimary fake>button</ButtonPrimary>}
+            extra={<Placeholder />}
+            sideExtra={<Placeholder />}
+        />,
+        [
+            {
+                componentName: 'CoverHero',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description', 'slot', 'sideSlot'],
+            },
+        ]
+    );
+});
+
+test('Header test ids', () => {
+    checkTestIds(
+        <Header
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+        />,
+        [
+            {
+                componentName: 'Header',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description'],
+            },
+        ]
+    );
+});
+
+test('MainSectionHeader test ids', () => {
+    checkTestIds(
+        <MainSectionHeader
+            title="Title"
+            description="Description"
+            button={<ButtonPrimary href="asdf">Action</ButtonPrimary>}
+        />,
+        [
+            {
+                componentName: 'MainSectionHeader',
+                internalTestIds: ['title', 'description'],
+            },
+        ]
+    );
+});
+
 test('Meter test ids', () => {
     checkTestIds(<Meter values={[10, 20, 30]} />, [
         {
diff --git a/src/callout.tsx b/src/callout.tsx
index 98d470992..f0bf97504 100644
--- a/src/callout.tsx
+++ b/src/callout.tsx
@@ -63,15 +63,24 @@ const Callout = ({
             {...getPrefixedDataAttributes(dataAttributes, 'Callout')}
         >
             <ThemeVariant isInverse={false}>
-                {asset && <Box paddingRight={16}>{asset}</Box>}
+                {asset && (
+                    <Box paddingRight={16} dataAttributes={{testid: 'asset'}}>
+                        {asset}
+                    </Box>
+                )}
                 <div className={styles.content}>
                     <Stack space={16}>
                         <Inline fullWidth alignItems="flex-start" space="between">
                             <Stack space={4}>
-                                <Text3 as={titleAs} regular>
+                                <Text3 as={titleAs} regular dataAttributes={{testid: 'title'}}>
                                     {title}
                                 </Text3>
-                                <Text2 as="p" regular color={vars.colors.textSecondary}>
+                                <Text2
+                                    as="p"
+                                    regular
+                                    color={vars.colors.textSecondary}
+                                    dataAttributes={{testid: 'description'}}
+                                >
                                     {description}
                                 </Text2>
                             </Stack>
@@ -93,6 +102,7 @@ const Callout = ({
                     {onClose && (
                         <div className={styles.closeButtonContainer}>
                             <IconButton
+                                dataAttributes={{testid: 'closeButton'}}
                                 small
                                 bleedY
                                 bleedRight
diff --git a/src/cover-hero.tsx b/src/cover-hero.tsx
index 7a03b97b6..08520b28e 100644
--- a/src/cover-hero.tsx
+++ b/src/cover-hero.tsx
@@ -110,17 +110,34 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
 
         const mainContent = (
             <div className={styles.mainContent}>
-                {headline && <Box paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}>{headline}</Box>}
+                {headline && (
+                    <Box
+                        dataAttributes={{testid: 'headline'}}
+                        paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
+                    >
+                        {headline}
+                    </Box>
+                )}
                 <Stack space={16}>
                     <Stack space={8}>
                         {pretitle && (
                             <div className={styles.sixColumns}>
-                                <Text3 regular truncate={pretitleLinesMax} textShadow={textShadow}>
+                                <Text3
+                                    regular
+                                    truncate={pretitleLinesMax}
+                                    textShadow={textShadow}
+                                    dataAttributes={{testid: 'pretitle'}}
+                                >
                                     {pretitle}
                                 </Text3>
                             </div>
                         )}
-                        <Text8 as={titleAs} truncate={titleLinesMax} textShadow={textShadow}>
+                        <Text8
+                            as={titleAs}
+                            truncate={titleLinesMax}
+                            textShadow={textShadow}
+                            dataAttributes={{testid: 'title'}}
+                        >
                             {title}
                         </Text8>
                     </Stack>
@@ -132,13 +149,14 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                 truncate={descriptionLinesMax}
                                 color={hasMedia ? vars.colors.textPrimary : vars.colors.textSecondary}
                                 textShadow={textShadow}
+                                dataAttributes={{testid: 'description'}}
                             >
                                 {description}
                             </Text3>
                         </div>
                     )}
                 </Stack>
-                {extra}
+                {extra && <div data-testid="slot">{extra}</div>}
             </div>
         );
 
@@ -180,7 +198,11 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                         template="8+4"
                                         collapseBreakpoint="mobile"
                                         left={mainContent}
-                                        right={<div className={styles.sideExtra}>{sideExtra}</div>}
+                                        right={
+                                            <div className={styles.sideExtra} data-testid="sideSlot">
+                                                {sideExtra}
+                                            </div>
+                                        }
                                     />
                                 )}
                                 <ButtonGroup
diff --git a/src/empty-state.tsx b/src/empty-state.tsx
index 502f8e123..ff1f98f7c 100644
--- a/src/empty-state.tsx
+++ b/src/empty-state.tsx
@@ -67,7 +67,9 @@ const EmptyState = ({
     const {isDarkMode} = useTheme();
     const isInverse = useIsInverseOrMediaVariant();
 
-    const image = imageUrl ? <img className={styles.smallImage} alt="" src={imageUrl} /> : undefined;
+    const image = imageUrl ? (
+        <img data-testid="image" className={styles.smallImage} alt="" src={imageUrl} />
+    ) : undefined;
 
     const buttons: ButtonGroupProps = {
         ...(button?.type === ButtonPrimary ? {primaryButton: button} : {secondaryButton: button}),
@@ -92,13 +94,21 @@ const EmptyState = ({
                         largeImageUrl ? styles.contentVariants.largeImage : styles.contentVariants.default
                     }
                 >
-                    {image ?? (asset && <div className={styles.assetContainer}>{asset}</div>)}
+                    {image ??
+                        (asset && (
+                            <div data-testid="asset" className={styles.assetContainer}>
+                                {asset}
+                            </div>
+                        ))}
                     <Stack space={16}>
-                        <Text6 as={titleAs}>{title}</Text6>
+                        <Text6 as={titleAs} dataAttributes={{testid: 'title'}}>
+                            {title}
+                        </Text6>
                         <Text3
                             regular
                             as="p"
                             color={isInverse ? vars.colors.inverse : vars.colors.textSecondary}
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text3>
@@ -115,6 +125,7 @@ const EmptyState = ({
                         width="100%"
                     >
                         <div
+                            data-testid="image"
                             className={styles.largeImage}
                             style={{backgroundImage: `url(${largeImageUrl})`}}
                         />
diff --git a/src/header.tsx b/src/header.tsx
index 3c2b3743a..ff6a237eb 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -45,43 +45,60 @@ export const Header = ({
     dataAttributes,
     small = false,
 }: HeaderProps): JSX.Element => {
-    const renderRichText = (richText: RichText, baseProps: Omit<TextPresetProps, 'children'>) => {
-        if (typeof richText === 'string') {
-            return (
-                <Text3 regular {...baseProps}>
-                    {richText}
-                </Text3>
-            );
+    const renderPretitle = () => {
+        if (!pretitle) {
+            return null;
         }
-        const {text, ...textProps} = richText;
+        const baseTextProps = {
+            regular: true,
+            color: vars.colors.textPrimary,
+            as: pretitleAs,
+            dataAttributes: {testid: 'pretitle'},
+        } as const;
+
+        if (typeof pretitle === 'string') {
+            return <Text3 {...baseTextProps}>{pretitle}</Text3>;
+        }
+        const {text, ...textProps} = pretitle;
         return (
-            <Text3 regular {...baseProps} {...textProps}>
-                {richText.text}
+            <Text3 {...baseTextProps} {...textProps}>
+                {text}
             </Text3>
         );
     };
 
     return (
-        <Stack space={{mobile: 24, desktop: 32}} dataAttributes={dataAttributes}>
+        <Stack space={{mobile: 24, desktop: 32}} dataAttributes={{testid: 'Header', ...dataAttributes}}>
             {(title || pretitle || description) && (
                 <Box paddingRight={16}>
                     <Stack space={8}>
-                        {headline}
-                        {pretitle &&
-                            renderRichText(pretitle, {color: vars.colors.textPrimary, as: pretitleAs})}
+                        {headline && <div data-testid="headline">{headline}</div>}
+                        {renderPretitle()}
                         {title &&
                             (small ? (
-                                <Title3 as={titleAs}>{title}</Title3>
+                                <Title3 as={titleAs} dataAttributes={{testid: 'title'}}>
+                                    {title}
+                                </Title3>
                             ) : (
-                                <Title4 as={titleAs}>{title}</Title4>
+                                <Title4 as={titleAs} dataAttributes={{testid: 'title'}}>
+                                    {title}
+                                </Title4>
                             ))}
                         {description &&
                             (small ? (
-                                <Text2 regular color={vars.colors.textSecondary}>
+                                <Text2
+                                    regular
+                                    color={vars.colors.textSecondary}
+                                    dataAttributes={{testid: 'description'}}
+                                >
                                     {description}
                                 </Text2>
                             ) : (
-                                <Text3 regular color={vars.colors.textSecondary}>
+                                <Text3
+                                    regular
+                                    color={vars.colors.textSecondary}
+                                    dataAttributes={{testid: 'description'}}
+                                >
                                     {description}
                                 </Text3>
                             ))}
@@ -97,6 +114,7 @@ type MainSectionHeaderProps = {
     titleAs?: HeadingType;
     description?: string;
     button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
+    dataAttributes?: DataAttributes;
 };
 
 export const MainSectionHeader = ({
@@ -104,12 +122,23 @@ export const MainSectionHeader = ({
     titleAs = 'h1',
     description,
     button,
+    dataAttributes,
 }: MainSectionHeaderProps): JSX.Element => {
     return (
-        <Stack space={32}>
+        <Stack
+            space={32}
+            dataAttributes={{
+                testid: 'MainSectionHeader',
+                ...dataAttributes,
+            }}
+        >
             <Stack space={{mobile: 12, desktop: 16}}>
-                {title && <Text7 as={titleAs}>{title}</Text7>}
-                {description && <Text6>{description}</Text6>}
+                {title && (
+                    <Text7 as={titleAs} dataAttributes={{testid: 'title'}}>
+                        {title}
+                    </Text7>
+                )}
+                {description && <Text6 dataAttributes={{testid: 'description'}}>{description}</Text6>}
             </Stack>
             {button}
         </Stack>
@@ -154,7 +183,7 @@ export const HeaderLayout = ({
     useSetOverscrollColor(isInverse ? {topColor: vars.colors.backgroundBrandTop} : {});
 
     return (
-        <div {...getPrefixedDataAttributes({'component-name': 'HeaderLayout', ...dataAttributes})}>
+        <div {...getPrefixedDataAttributes(dataAttributes, 'HeaderLayout')}>
             <ResponsiveLayout isInverse={isInverse}>
                 <Box
                     paddingTop={
@@ -215,7 +244,11 @@ export const MainSectionHeaderLayout = ({
     return (
         <ResponsiveLayout
             isInverse={isInverse}
-            dataAttributes={{'component-name': 'MainSectionHeaderLayout', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'MainSectionHeaderLayout',
+                testid: 'MainSectionHeaderLayout',
+                ...dataAttributes,
+            }}
         >
             <GridLayout
                 template="6+6"
diff --git a/src/hero.tsx b/src/hero.tsx
index fb30a8638..0e3f4e96c 100644
--- a/src/hero.tsx
+++ b/src/hero.tsx
@@ -75,14 +75,18 @@ const HeroContent = ({
         <section className={styles.contentContainer}>
             <div>
                 <Stack space={16}>
-                    {headline && headline}
+                    {headline && <div data-testid="headline">{headline}</div>}
                     <Stack space={8}>
                         {pretitle && (
-                            <Text3 as="p" regular>
+                            <Text3 as="p" regular dataAttributes={{testid: 'pretitle'}}>
                                 {pretitle}
                             </Text3>
                         )}
-                        {title && <Text8 as={titleAs}>{title}</Text8>}
+                        {title && (
+                            <Text8 as={titleAs} dataAttributes={{testid: 'title'}}>
+                                {title}
+                            </Text8>
+                        )}
                     </Stack>
                     {description && (
                         <Text3
@@ -90,12 +94,13 @@ const HeroContent = ({
                             regular
                             color={skinVars.colors.textSecondary}
                             truncate={descriptionLinesMax}
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text3>
                     )}
                 </Stack>
-                {extra && <div>{extra}</div>}
+                {extra && <div data-testid="slot">{extra}</div>}
             </div>
             {(button || buttonLink) && (
                 <div className={styles.actions}>
@@ -151,7 +156,7 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                 <ResetResponsiveLayout>
                     <div style={applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})}>
                         <div
-                            {...getPrefixedDataAttributes({'component-name': 'Hero', ...dataAttributes})}
+                            {...getPrefixedDataAttributes(dataAttributes, 'Hero')}
                             ref={ref}
                             style={{
                                 ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
@@ -209,7 +214,7 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
 
         return (
             <div
-                {...getPrefixedDataAttributes({'component-name': 'Hero', ...dataAttributes})}
+                {...getPrefixedDataAttributes(dataAttributes, 'Hero')}
                 ref={ref}
                 style={{
                     ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
diff --git a/src/highlighted-card.tsx b/src/highlighted-card.tsx
index e685b41a8..6d4edbea6 100644
--- a/src/highlighted-card.tsx
+++ b/src/highlighted-card.tsx
@@ -73,9 +73,13 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
     const content = (
         <Boxed
             ref={ref}
-            isInverse={isInverse}
+            variant={isInverse ? 'inverse' : 'default'}
             className={styles.container}
-            dataAttributes={{'component-name': 'HighlightedCard', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'HighlightedCard',
+                testid: 'HighlightedCard',
+                ...dataAttributes,
+            }}
             width={width ? `${width}px` : '100%'}
             minHeight="100%"
         >
@@ -94,6 +98,7 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
                             weight={textPresets.cardTitle.weight}
                             as={titleAs}
                             hyphens="auto"
+                            dataAttributes={{testid: 'title'}}
                         >
                             {title}
                         </Text>
@@ -105,6 +110,7 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
                             truncate={descriptionLinesMax}
                             as="p"
                             hyphens="auto"
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text2>
@@ -119,6 +125,7 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
             </div>
             {imageUrl && (
                 <div
+                    data-testid="image"
                     {...(imageAlt
                         ? {
                               role: 'img',
diff --git a/src/maybe-dismissable.tsx b/src/maybe-dismissable.tsx
index bb78735f4..6627c412e 100644
--- a/src/maybe-dismissable.tsx
+++ b/src/maybe-dismissable.tsx
@@ -43,6 +43,7 @@ const MaybeDismissable = ({
             <ThemeVariant variant={variant}>
                 <div className={styles.dismissableButton}>
                     <IconButton
+                        dataAttributes={{testid: 'closeButton'}}
                         onPress={onClose}
                         aria-label={texts.closeButtonLabel || t(tokens.closeButtonLabel)}
                         small
diff --git a/src/utils/types.tsx b/src/utils/types.tsx
index cf5a45dd3..d742c5d0f 100644
--- a/src/utils/types.tsx
+++ b/src/utils/types.tsx
@@ -2,7 +2,10 @@ export type {RendersElement, RendersNullableElement} from './renders-element';
 
 export type {TrackingEvent} from '@tef-novum/webview-bridge';
 
-export type DataAttributes = {[name: string]: string | number | boolean | undefined};
+export type DataAttributes = {
+    [name: string]: string | number | boolean | undefined;
+    testid?: string;
+};
 
 export type IconProps = {
     color?: string;