diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
index 6dee8fd5359..44e05b8418b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -23,6 +23,11 @@ v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 1. Find the `sticky_offset` property and replace it with `stickyOffset`.
 1. Find the `/elements/Table` property and replace it with `/components/Table`.
 
+### [Timeline](/uilib/components/timeline)
+
+1. Find the `name` property in your Timeline JSX syntax and replace it with `title`.
+1. Find the `date` property in your Timeline JSX syntax and replace it with `subtitle`.
+
 ## Install
 
 To upgrade to @dnb/eufemia v10 with NPM, use:
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
index 4aae668ad96..81b7c241109 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/Examples.js
@@ -16,7 +16,7 @@ export const TimelineSingleCompleted = () => (
   <Timeline 
     data={[
       {
-        name: "Completed event",
+        title: "Completed event",
         state: "completed"
       }
     ]}
@@ -31,7 +31,7 @@ export const TimelineSingleCurrent = () => (
   <Timeline 
     data={[
       {
-        name: "Current event",
+        title: "Current event",
         state: "current"
       }
     ]}
@@ -46,7 +46,7 @@ export const TimelineSingleUpcoming = () => (
   <Timeline 
     data={[
       {
-        name: "Upcoming event",
+        title: "Upcoming event",
         state: "upcoming"
       }
     ]}
@@ -65,17 +65,17 @@ export const TimelineMultipleData = () => (
 () => {
   const events = [
     {
-      name: "Completed event",
-      date: "10. september 2021", 
+      title: "Completed event",
+      subtitle: "10. september 2021", 
       state: "completed"
     },
     {
-      name: "Current event",
+      title: "Current event",
       infoMessage: "Additional information about this step if needed.",
       state: "current", 
     },
     {
-      name: "Upcoming event",
+      title: "Upcoming event",
       state: "upcoming", 
     },
   ];
@@ -98,19 +98,19 @@ export const TimelineMultipleCompletedData = () => (
 () => {
   const events = [
     {
-      name: "Completed event#1",
+      title: "Completed event#1",
       infoMessage: "Additional information about this step if needed.",
-      date: "10. september 2021", 
+      subtitle: "10. september 2021", 
       state: "completed"
     },
     {
-      name: "Completed event#2",
+      title: "Completed event#2",
       infoMessage: "Additional information about this step if needed.",
       state: "completed"
     },
     {
-      name: "Completed event#3",
-      date: "10. september 2021", 
+      title: "Completed event#3",
+      subtitle: "10. september 2021", 
       state: "completed"
     },
   ];
@@ -133,19 +133,19 @@ export const TimelineMultipleUpcomingData = () => (
 () => {
   const events = [
     {
-      name: "Upcoming event#1",
+      title: "Upcoming event#1",
       infoMessage: "Additional information about this step if needed.",
-      date: "10. september 2021", 
+      subtitle: "10. september 2021", 
       state: "upcoming"
     },
     {
-      name: "Upcoming event#2",
+      title: "Upcoming event#2",
       infoMessage: "Additional information about this step if needed.",
       state: "upcoming"
     },
     {
-      name: "Upcoming event#3",
-      date: "10. september 2021", 
+      title: "Upcoming event#3",
+      subtitle: "10. september 2021", 
       state: "upcoming"
     },
   ];
@@ -168,19 +168,19 @@ export const TimelineMultipleCurrentData = () => (
 () => {
   const events = [
     {
-      name: "Current event#1",
+      title: "Current event#1",
       infoMessage: "Additional information about this step if needed.",
-      date: "10. september 2021", 
+      subtitle: "10. september 2021", 
       state: "current"
     },
     {
-      name: "Current event#2",
+      title: "Current event#2",
       infoMessage: "Additional information about this step if needed.",
       state: "current"
     },
     {
-      name: "Current event#3",
-      date: "10. september 2021", 
+      title: "Current event#3",
+      subtitle: "10. september 2021", 
       state: "current"
     },
   ];
@@ -198,17 +198,17 @@ export const TimelineMultiple = () => (
     {() => /* jsx */ `
 <Timeline>
   <Timeline.Item 
-    name="Completed event" 
-    date="10. september 2021" 
+    title="Completed event" 
+    subtitle="10. september 2021" 
     state="completed"
   />
   <Timeline.Item 
-    name="Current event" 
+    title="Current event" 
     infoMessage="Additional information about this step if needed." 
     state="current"
   />
   <Timeline.Item 
-    name="Upcoming event" 
+    title="Upcoming event" 
     state="upcoming"
   />
 </Timeline>
@@ -226,20 +226,20 @@ export const TimelineStates = () => (
 () => {
   const events = [
     {
-      name: "Completed event",
-      date: "10. september 2021", 
+      title: "Completed event",
+      subtitle: "10. september 2021", 
       infoMessage: "Additional information about this step if needed.",
       state: "completed"
     },
     {
-      name: "Current event",
-      date: "10. september 2021", 
+      title: "Current event",
+      subtitle: "10. september 2021", 
       infoMessage: "Additional information about this step if needed.",
       state: "current"
     },
     {
-      name: "Upcoming event",
-      date: "10. september 2021", 
+      title: "Upcoming event",
+      subtitle: "10. september 2021", 
       infoMessage: "Additional information about this step if needed.",
       state: "upcoming"
     },
@@ -264,19 +264,19 @@ export const TimelineIcons = () => (
 () => {
   const events = [
     {
-      name: "Completed event",
+      title: "Completed event",
       state: "completed",
       icon: Confetti, 
       iconAlt: "Celebration"
     },
     {
-      name: "Current event",
+      title: "Current event",
       state: "current",
       icon: Card,
       iconAlt: "Bank card"
     },
     {
-      name: "Upcoming event",
+      title: "Upcoming event",
       state: "upcoming",
       icon: AccountCard,
       iconAlt: "Money bag & card"
@@ -298,18 +298,18 @@ export const TimelineSkeleton = () => (
     skeleton
     data={[
       {
-        name: "Upcoming",
-        date: "10. september 2021", 
+        title: "Upcoming",
+        subtitle: "10. september 2021", 
         state: "upcoming"
       }, 
       {
-        name: "Current",
-        date: "11. september 2021", 
+        title: "Current",
+        subtitle: "11. september 2021", 
         state: "current"
       }, 
       {
-        name: "Completed",
-        date: "12. september 2021", 
+        title: "Completed",
+        subtitle: "12. september 2021", 
         state: "completed"
       },      
     ]}
@@ -323,18 +323,18 @@ export const TimelineAsChildrenSkeleton = () => (
     {() => /* jsx */ `
 <Timeline skeleton>
   <Timeline.Item 
-    name="Upcoming" 
-    date="10. september 2021"
+    title="Upcoming" 
+    subtitle="10. september 2021"
     state="upcoming"
   />
   <Timeline.Item 
-    name="Current" 
-    date="11. september 2021"
+    title="Current" 
+    subtitle="11. september 2021"
     state="current"
   />
   <Timeline.Item 
-    name="Completed" 
-    date="11. september 2021"
+    title="Completed" 
+    subtitle="11. september 2021"
     state="completed"
   />
 </Timeline>
@@ -348,14 +348,14 @@ export const TimelineItemSkeleton = () => (
   <Timeline
     data={[
       {
-        name: "Completed event#1",
-        date: "10. september 2021", 
+        title: "Completed event#1",
+        subtitle: "10. september 2021", 
         state: "completed", 
         skeleton: true
       }, 
       {
-        name: "Completed event#2",
-        date: "11. september 2021", 
+        title: "Completed event#2",
+        subtitle: "11. september 2021", 
         infoMessage: "Additional information about this step if needed.",
         state: "completed",
       }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md
index 8ed5ce5cde2..276fd868741 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/info.md
@@ -5,4 +5,4 @@ showTabs: true
 ## Description
 
 A timeline shows events in chronological order and gives a great overview of the overall process.
-The component itself has interchangeable icons, additional messagebox when needed, and a step has three states(completed, current or upcoming). Date formatting can vary to be consistent with the rest of your application.
+The component itself has interchangeable icons, additional info message when needed, and a step has three states(completed, current or upcoming).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md
index 73d4bc9a0ff..321ff658bd3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.md
@@ -18,10 +18,10 @@ showTabs: true
 
 | Properties    | Description                                                                                                                                                                        |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`        | _(required)_ Name/title of the Timeline item.                                                                                                                                      |
+| `title`       | _(required)_ Title of the Timeline item.                                                                                                                                           |
 | `state`       | _(required)_ The component state. Options: `completed` \| `current` \| `upcoming`.                                                                                                 |
-| `date`        | _(optional)_ Date of the Timeline item, displayed below the `name`. Also supports passing an array of dates.                                                                       |
-| `infoMessage` | _(optional)_ Info message, displayed in a [FormStatus of state info](/uilib/components/form-status#formstatus-displaying-info-status), below the `date` if it exists.              |
+| `subtitle`    | _(optional)_ Subtitle of the Timeline item, displayed below the `title`. Also supports passing an array of subtitles. The subtitle is usually a date of the timeline item.         |
+| `infoMessage` | _(optional)_ Info message, displayed in a [FormStatus of state info](/uilib/components/form-status#formstatus-displaying-info-status), below the `subtitle` if it exists.          |
 | `icon`        | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` . |
 | `iconAlt`     | _(optional)_ Alt label describing the icon provided.                                                                                                                               |
 | `skeleton`    | _(optional)_ Applies loading skeleton.                                                                                                                                             |
diff --git a/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx b/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx
index e07fa6c1ad8..4421921742d 100644
--- a/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx
+++ b/packages/dnb-eufemia/src/components/timeline/TimelineItem.tsx
@@ -30,14 +30,14 @@ export interface TimelineItemProps {
   iconAlt?: string
 
   /**
-   * Text displaying the name of the timeline item.
+   * Text displaying the title of the timeline item.
    */
-  name: React.ReactNode & string
+  title: React.ReactNode | string
 
   /**
-   * Text displaying the date of the timeline item.
+   * Text displaying the subtitle of the timeline item.
    */
-  date?: React.ReactNode | React.ReactNode[]
+  subtitle?: React.ReactNode | React.ReactNode[] | string | string[]
 
   /**
    * Text displaying info message of the timeline item.
@@ -55,13 +55,23 @@ export interface TimelineItemProps {
    * Default: null
    */
   skeleton?: SkeletonShow
+
+  /**
+   * @deprecated Please use `title`
+   */
+  name?: unknown
+
+  /**
+   * @deprecated Please use `subtitle`
+   */
+  date?: unknown
 }
 
 const defaultProps = {
   icon: null,
   iconAlt: null,
-  name: null,
-  date: null,
+  title: null,
+  subtitle: null,
   infoMessage: null,
   state: null,
   skeleton: false,
@@ -81,21 +91,34 @@ const TimelineItem = (localProps: TimelineItemProps) => {
   } = context
 
   // Extract additional props from global context
+  const allProps = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context?.TimelineItem,
+    { skeleton: context?.skeleton }
+  )
+
+  // deprecated
+  if (allProps.name) {
+    delete allProps.name
+    allProps.title = allProps.name
+  }
+  // deprecated
+  if (allProps.date) {
+    delete allProps.date
+    allProps.subtitle = allProps.date
+  }
+
   const {
     icon,
     iconAlt,
-    name,
-    date,
+    title,
+    subtitle,
     infoMessage,
     state,
     skeleton,
     ...props
-  } = usePropsWithContext(
-    localProps,
-    defaultProps,
-    context?.TimelineItem,
-    { skeleton: context?.skeleton }
-  )
+  } = allProps
 
   const stateIsCompleted = state === 'completed'
   const stateIsCurrent = state === 'current'
@@ -139,13 +162,13 @@ const TimelineItem = (localProps: TimelineItemProps) => {
     )
   }
 
-  const TimelineItemName = () => {
+  const TimelineItemTitle = () => {
     return (
       <span
-        className="dnb-timeline__item__label__name"
-        data-testid="timeline-item-label-name"
+        className="dnb-timeline__item__label__title"
+        data-testid="timeline-item-label-title"
       >
-        {name}
+        {title}
       </span>
     )
   }
@@ -154,37 +177,41 @@ const TimelineItem = (localProps: TimelineItemProps) => {
     return (
       <span className="dnb-timeline__item__label">
         <TimelineItemIcon />
-        <TimelineItemName />
+        <TimelineItemTitle />
       </span>
     )
   }
 
-  const getDate = () => {
-    const TimelineItemDate = ({ date }: { date: React.ReactNode }) => (
+  const getSubtitle = () => {
+    const TimelineItemSubtitle = ({
+      subtitle,
+    }: {
+      subtitle: React.ReactNode
+    }) => (
       <div
-        className="dnb-timeline__item__content__date"
-        data-testid="timeline-item-content-date"
+        className="dnb-timeline__item__content__subtitle"
+        data-testid="timeline-item-content-subtitle"
       >
-        {date}
+        {subtitle}
       </div>
     )
 
-    if (!date) {
+    if (!subtitle) {
       return null
     }
 
-    if (Array.isArray(date)) {
-      return date.map((date, i) => (
-        <TimelineItemDate key={i} date={date} />
+    if (Array.isArray(subtitle)) {
+      return subtitle.map((subtitle, i) => (
+        <TimelineItemSubtitle key={i} subtitle={subtitle} />
       ))
     }
-    return <TimelineItemDate date={date} />
+    return <TimelineItemSubtitle subtitle={subtitle} />
   }
 
   const TimelineItemContent = () => {
     return (
       <div className="dnb-timeline__item__content">
-        {getDate()}
+        {getSubtitle()}
         {infoMessage && (
           <FormStatus
             text={infoMessage}
diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx b/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
index 189c8b27d65..aa919ef1e96 100644
--- a/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
+++ b/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
@@ -19,11 +19,11 @@ describe('Timeline', () => {
       <Timeline
         data={[
           {
-            name: 'Upcoming',
+            title: 'Upcoming',
             state: 'upcoming',
           },
-          { name: 'Current', state: 'current' },
-          { name: 'Completed', state: 'completed' },
+          { title: 'Current', state: 'current' },
+          { title: 'Completed', state: 'completed' },
         ]}
       />
     )
@@ -34,9 +34,9 @@ describe('Timeline', () => {
   it('renders a timeline with multiple items by children', () => {
     render(
       <Timeline>
-        <Timeline.Item name="Upcoming" state="upcoming" />
-        <Timeline.Item name="Current" state="current" />
-        <Timeline.Item name="Completed" state="completed" />
+        <Timeline.Item title="Upcoming" state="upcoming" />
+        <Timeline.Item title="Current" state="current" />
+        <Timeline.Item title="Completed" state="completed" />
       </Timeline>
     )
 
@@ -48,11 +48,11 @@ describe('Timeline', () => {
       <Timeline
         data={[
           {
-            name: 'Upcoming',
+            title: 'Upcoming',
             state: 'upcoming',
           },
-          { name: 'Completed', state: 'completed' },
-          { name: 'Current', state: 'current' },
+          { title: 'Completed', state: 'completed' },
+          { title: 'Current', state: 'current' },
         ]}
       />
     )
@@ -69,7 +69,7 @@ describe('Timeline', () => {
         <Timeline
           data={[
             {
-              name: 'Upcoming',
+              title: 'Upcoming',
               state: 'upcoming',
             },
           ]}
@@ -87,7 +87,7 @@ describe('Timeline', () => {
       <Timeline
         data={[
           {
-            name: 'Upcoming',
+            title: 'Upcoming',
             state: 'upcoming',
           },
         ]}
@@ -108,42 +108,50 @@ describe('Timeline', () => {
   })
 
   describe('TimelineItem', () => {
-    it('renders name', () => {
-      const name = 'Completed'
-      render(<TimelineItem name={name} state="completed" />)
+    it('renders title', () => {
+      const title = 'Completed'
+      render(<TimelineItem title={title} state="completed" />)
       expect(
-        screen.queryByTestId('timeline-item-label-name').textContent
-      ).toBe(name)
+        screen.queryByTestId('timeline-item-label-title').textContent
+      ).toBe(title)
     })
 
-    it('renders date', () => {
-      const date = '10. september 2021'
+    it('renders subtitle', () => {
+      const subtitle = '10. september 2021'
       render(
-        <TimelineItem date={date} name="Complete" state="completed" />
+        <TimelineItem
+          subtitle={subtitle}
+          title="Complete"
+          state="completed"
+        />
       )
       expect(
-        screen.queryByTestId('timeline-item-content-date').textContent
-      ).toBe(date)
+        screen.queryByTestId('timeline-item-content-subtitle').textContent
+      ).toBe(subtitle)
     })
 
-    it('renders dates', () => {
-      const dates = ['10. september 2021', '11. september 2021']
+    it('renders subtitles', () => {
+      const subtitles = ['10. september 2021', '11. september 2021']
       render(
-        <TimelineItem date={dates} name="Complete" state="completed" />
+        <TimelineItem
+          subtitle={subtitles}
+          title="Complete"
+          state="completed"
+        />
       )
 
       expect(
-        screen.queryAllByTestId('timeline-item-content-date')
+        screen.queryAllByTestId('timeline-item-content-subtitle')
       ).toHaveLength(2)
 
       expect(
-        screen.queryAllByTestId('timeline-item-content-date')[0]
+        screen.queryAllByTestId('timeline-item-content-subtitle')[0]
           .textContent
-      ).toBe(dates[0])
+      ).toBe(subtitles[0])
       expect(
-        screen.queryAllByTestId('timeline-item-content-date')[1]
+        screen.queryAllByTestId('timeline-item-content-subtitle')[1]
           .textContent
-      ).toBe(dates[1])
+      ).toBe(subtitles[1])
     })
 
     it('renders info message', () => {
@@ -151,7 +159,7 @@ describe('Timeline', () => {
       render(
         <TimelineItem
           infoMessage={infoMessage}
-          name="Complete"
+          title="Complete"
           state="completed"
         />
       )
@@ -167,7 +175,7 @@ describe('Timeline', () => {
       render(
         <TimelineItem
           icon={CustomIcon}
-          name="Complete"
+          title="Complete"
           state="completed"
         />
       )
@@ -181,7 +189,7 @@ describe('Timeline', () => {
       const iconAlt = 'custom_alt_label'
       render(
         <TimelineItem
-          name="Complete"
+          title="Complete"
           state="completed"
           iconAlt={iconAlt}
         />
@@ -194,7 +202,7 @@ describe('Timeline', () => {
     it('renders skeleton if skeleton is true', () => {
       const skeletonClassName = 'dnb-skeleton'
 
-      render(<TimelineItem skeleton name="name" state="completed" />)
+      render(<TimelineItem skeleton title="title" state="completed" />)
 
       expect(screen.queryByTestId('timeline-item').className).toMatch(
         skeletonClassName
@@ -206,7 +214,7 @@ describe('Timeline', () => {
 
       render(
         <Provider skeleton>
-          <TimelineItem name="name" state="completed" />
+          <TimelineItem title="name" state="completed" />
         </Provider>
       )
 
@@ -217,42 +225,42 @@ describe('Timeline', () => {
 
     describe('renders default icon based on state property', () => {
       it('renders check icon when state is completed', () => {
-        render(<TimelineItem name="Complete" state="completed" />)
+        render(<TimelineItem title="Complete" state="completed" />)
         expect(screen.queryByRole('img').getAttribute('aria-label')).toBe(
           'check icon'
         )
       })
 
       it('renders pin icon when state is current', () => {
-        render(<TimelineItem name="Current" state="current" />)
+        render(<TimelineItem title="Current" state="current" />)
         expect(screen.queryByRole('img').getAttribute('aria-label')).toBe(
           'pin icon'
         )
       })
 
       it('renders calendar icon when state is upcoming', () => {
-        render(<TimelineItem name="Upcoming" state="upcoming" />)
+        render(<TimelineItem title="Upcoming" state="upcoming" />)
         expect(screen.queryByRole('img').getAttribute('aria-label')).toBe(
           'calendar icon'
         )
       })
 
-      it('renders alt label Utført when state is completed', () => {
-        render(<TimelineItem name="Complete" state="completed" />)
+      it('renders alt label "Utfør"t when state is completed', () => {
+        render(<TimelineItem title="Complete" state="completed" />)
         expect(screen.queryByRole('img').getAttribute('alt')).toBe(
           'Utført'
         )
       })
 
-      it('renders alt label Nåværende when state is current', () => {
-        render(<TimelineItem name="Current" state="current" />)
+      it('renders alt label "Nåværende" when state is current', () => {
+        render(<TimelineItem title="Current" state="current" />)
         expect(screen.queryByRole('img').getAttribute('alt')).toBe(
           'Nåværende'
         )
       })
 
-      it('renders alt label Kommende when state is upcoming', () => {
-        render(<TimelineItem name="Upcoming" state="upcoming" />)
+      it('renders alt label "Kommende" when state is upcoming', () => {
+        render(<TimelineItem title="Upcoming" state="upcoming" />)
         expect(screen.queryByRole('img').getAttribute('alt')).toBe(
           'Kommende'
         )
@@ -267,21 +275,21 @@ describe('Timeline aria', () => {
       <Timeline
         data={[
           {
-            name: 'Upcoming',
+            title: 'Upcoming',
             state: 'upcoming',
-            date: '10. september 2021',
+            subtitle: '10. september 2021',
             infoMessage: 'Info message',
           },
           {
-            name: 'Current',
+            title: 'Current',
             state: 'current',
-            date: '10. september 2021',
+            subtitle: '10. september 2021',
             infoMessage: 'Info message',
           },
           {
-            name: 'Completed',
+            title: 'Completed',
             state: 'completed',
-            date: '10. september 2021',
+            subtitle: '10. september 2021',
             infoMessage: 'Info message',
           },
         ]}
diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index dc00ea79c40..952affbb0ae 100644
--- a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
     @media screen and (-ms-high-contrast: none) {
       .dnb-timeline__item__label__icon {
         box-shadow: inset 0 0 0 1px var(--color-black-80); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: var(--timeline-border-spacing--icon-adjusted);
     font-size: var(--font-size-small);
     line-height: var(--line-height-small); }
@@ -72,12 +72,12 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
     border-left: 1px dashed var(--color-black-55); }
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
     margin-left: calc(var(--timeline-icon-width--medium) / 2);
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: var(--timeline-border-spacing);
     font-weight: var(--font-weight-medium);
     font-size: var(--font-size-basis);
@@ -88,7 +88,7 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: var(--font-weight-basis);
     color: var(--color-black-55); }
   .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
@@ -242,7 +242,7 @@ exports[`Timeline scss have to match snapshot 1`] = `
     @media screen and (-ms-high-contrast: none) {
       .dnb-timeline__item__label__icon {
         box-shadow: inset 0 0 0 1px var(--color-black-80); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: var(--timeline-border-spacing--icon-adjusted);
     font-size: var(--font-size-small);
     line-height: var(--line-height-small); }
@@ -252,12 +252,12 @@ exports[`Timeline scss have to match snapshot 1`] = `
     border-left: 1px dashed var(--color-black-55); }
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
     margin-left: calc(var(--timeline-icon-width--medium) / 2);
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: var(--timeline-border-spacing);
     font-weight: var(--font-weight-medium);
     font-size: var(--font-size-basis);
@@ -268,7 +268,7 @@ exports[`Timeline scss have to match snapshot 1`] = `
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: var(--font-weight-basis);
     color: var(--color-black-55); }
   .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
@@ -309,11 +309,11 @@ exports[`Timeline scss have to match snapshot 1`] = `
       height: auto;
       justify-content: center;
       padding: 0; }
-    .dnb-timeline__item__label__name {
+    .dnb-timeline__item__label__title {
       cursor: text; }
   .dnb-timeline__item__content {
     padding-bottom: var(--spacing-small); }
-    .dnb-timeline__item__content__date {
+    .dnb-timeline__item__content__subtitle {
       cursor: text;
       font-size: var(--font-size-x-small);
       font-weight: var(--font-weight-basis);
diff --git a/packages/dnb-eufemia/src/components/timeline/style/_timeline.scss b/packages/dnb-eufemia/src/components/timeline/style/_timeline.scss
index ffedbec41d9..12babf5cfad 100644
--- a/packages/dnb-eufemia/src/components/timeline/style/_timeline.scss
+++ b/packages/dnb-eufemia/src/components/timeline/style/_timeline.scss
@@ -22,13 +22,13 @@
         justify-content: center;
         padding: 0;
       }
-      &__name {
+      &__title {
         cursor: text;
       }
     }
     &__content {
       padding-bottom: var(--spacing-small);
-      &__date {
+      &__subtitle {
         cursor: text;
         font-size: var(--font-size-x-small);
         font-weight: var(--font-weight-basis);
diff --git a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
index 3995e676906..1e5124f0845 100644
--- a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
@@ -49,7 +49,7 @@
         background-color: var(--color-white);
         @include fakeBorder(var(--color-black-80), 0.0625rem, inset, true);
       }
-      &__name {
+      &__title {
         margin-left: var(--timeline-border-spacing--icon-adjusted);
         font-size: var(--font-size-small);
         line-height: var(--line-height-small);
@@ -63,7 +63,7 @@
     &--completed &__content {
       border-left: 1px solid var(--color-black-80);
     }
-    &--completed &__label__name {
+    &--completed &__label__title {
       color: var(--color-black-80);
     }
     &--current &__content {
@@ -72,7 +72,7 @@
         var(--timeline-border-spacing)
       );
     }
-    &--current &__label__name {
+    &--current &__label__title {
       margin-left: var(--timeline-border-spacing);
       font-weight: var(--font-weight-medium);
       font-size: var(--font-size-basis);
@@ -86,7 +86,7 @@
     &--current {
       margin-left: 0;
     }
-    &--upcoming &__label__name {
+    &--upcoming &__label__title {
       font-weight: var(--font-weight-basis);
       color: var(--color-black-55);
     }