diff --git a/packages/manager-react-components/src/components/content/ManagerTile/manager-tile-item.component.tsx b/packages/manager-react-components/src/components/content/ManagerTile/manager-tile-item.component.tsx
new file mode 100644
index 000000000000..d680aab861b9
--- /dev/null
+++ b/packages/manager-react-components/src/components/content/ManagerTile/manager-tile-item.component.tsx
@@ -0,0 +1,26 @@
+import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import React from 'react';
+
+export type TileBlockProps = React.PropsWithChildren<{
+ label?: string;
+}>;
+
+export const ManagerTileItem = ({ children }: React.PropsWithChildren) => {
+ return {children}
;
+};
+
+const ManagerTileItemLabel = ({ children }: React.PropsWithChildren) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const ManagerTileItemDescription = ({ children }: React.PropsWithChildren) => {
+ return {children};
+};
+
+ManagerTileItem.Label = ManagerTileItemLabel;
+ManagerTileItem.Description = ManagerTileItemDescription;
diff --git a/packages/manager-react-components/src/components/content/ManagerTile/manager-tile.component.tsx b/packages/manager-react-components/src/components/content/ManagerTile/manager-tile.component.tsx
new file mode 100644
index 000000000000..8e15ae28fd9b
--- /dev/null
+++ b/packages/manager-react-components/src/components/content/ManagerTile/manager-tile.component.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { OdsDivider, OdsCard, OdsText } from '@ovhcloud/ods-components/react';
+import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { ManagerTileItem } from './manager-tile-item.component';
+
+export type ManagerTileProps = React.ComponentProps;
+
+export const ManagerTile = ({
+ className,
+ children,
+ ...props
+}: ManagerTileProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+type ManagerTileTitleProps = React.PropsWithChildren;
+const ManagerTileTitle = ({ children }: ManagerTileTitleProps) => {
+ return {children};
+};
+
+const ManagerTileDivider = () => ;
+
+ManagerTile.Title = ManagerTileTitle;
+ManagerTile.Item = ManagerTileItem;
+ManagerTile.Divider = ManagerTileDivider;
diff --git a/packages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx b/packages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx
new file mode 100644
index 000000000000..934285568d81
--- /dev/null
+++ b/packages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx
@@ -0,0 +1,118 @@
+import React, { useId } from 'react';
+import { Meta } from '@storybook/react';
+import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react';
+import { ManagerTile } from './manager-tile.component';
+import ActionMenu from '../../navigation/menus/action/action.component';
+import { Clipboard } from '../../clipboard/clipboard.component';
+
+const actionItems = [
+ {
+ id: 1,
+ href: 'https://ovhcloud.com',
+ label: 'Action 1',
+ },
+ {
+ id: 2,
+ onClick: () => window.open('https://ovhcloud.com', '_blank', 'noopener'),
+ label: 'Action 2',
+ },
+];
+
+export const CompleteExample = () => {
+ const id = useId();
+ return (
+
+ Complete example
+
+
+ Component Example
+
+ Test Value
+
+
+
+
+ Long Text
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.
+
+
+
+
+
+ Loading
+
+
+
+
+
+
+ Clipboard
+
+
+
+
+
+
+ Menu Example
+
+
+ Test Value
+
+
+
+
+
+ );
+};
+
+export const SimpleExampleWithTitle = () => (
+
+ Sample example with title
+
+
+ Component Example
+ Test
+
+
+
+ Loading
+
+
+
+
+
+);
+
+export const NoTitle = () => (
+
+
+ Component Example
+ Test
+
+
+
+ Loading
+
+
+
+
+
+);
+
+const meta: Meta = {
+ title: 'Content/Manager Tile',
+ component: ManagerTile,
+ argTypes: {},
+ args: {},
+};
+
+export default meta;
diff --git a/packages/manager-react-components/src/components/content/ManagerTile/tile.spec.tsx b/packages/manager-react-components/src/components/content/ManagerTile/tile.spec.tsx
new file mode 100644
index 000000000000..3905a433b19d
--- /dev/null
+++ b/packages/manager-react-components/src/components/content/ManagerTile/tile.spec.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { waitFor, screen } from '@testing-library/react';
+import { OdsText } from '@ovhcloud/ods-components/react';
+import { render } from '../../../utils/test.provider';
+import { ManagerTile } from './manager-tile.component';
+
+const testItem = (
+
+ label
+
+ value
+
+
+);
+
+describe('Manager Tile component', () => {
+ it('renders correctly', async () => {
+ render(
+
+ Title
+
+ {testItem}
+ ,
+ );
+ await waitFor(() => {
+ expect(screen.getByText('Title')).toBeInTheDocument();
+ expect(screen.getByText('value')).toBeInTheDocument();
+ expect(screen.getByText('label')).toBeInTheDocument();
+ });
+ });
+
+ it('renders correctly without items', async () => {
+ render(
+
+ Title 2
+ ,
+ );
+ await waitFor(() => {
+ expect(screen.getByText('Title 2')).toBeInTheDocument();
+ });
+ });
+
+ it('renders correctly without title', async () => {
+ render({testItem});
+ await waitFor(() => {
+ expect(screen.getByText('value')).toBeInTheDocument();
+ expect(screen.getByText('label')).toBeInTheDocument();
+ });
+ });
+
+ it('renders correctly without label', async () => {
+ render(
+
+
+ value
+
+ ,
+ );
+ await waitFor(() => {
+ expect(screen.getByText('value')).toBeInTheDocument();
+ expect(screen.queryByText('label')).not.toBeInTheDocument();
+ });
+ });
+});