diff --git a/index.d.ts b/index.d.ts
index 4997c452be0a8d1572127f162793f463ad8a83bf..a2be549b96c079a72e5abe04cf4aecc9dd5a6469 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -110,6 +110,11 @@ interface Istats {
     descriptionColor?: string
 }
 export function Stats(props: Istats): JSX.Element
+interface Idata {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+}
+export function Data(props: Idata): JSX.Element
 
 interface DataImage {
     src: string
diff --git a/index.js b/index.js
index d8d5f453ccdeb05beab122cc8c0694e40f106771..ceee6f026c1ccb7c44a9341d73c6cae98d480fa6 100644
--- a/index.js
+++ b/index.js
@@ -48,6 +48,9 @@ export { default as Header } from "./src/components/Header"
 // Section components
 export { default as Section } from "./src/components/Section"
 
+// Data components
+export { default as Data } from  "./src/components/Data"
+
 // Section components
 export { default as Sections } from "./src/components/Sections"
 
diff --git a/src/components/Data.tsx b/src/components/Data.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fd2d5effdc2a70b98b5fea3378fbf71e8db0c08
--- /dev/null
+++ b/src/components/Data.tsx
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react"
+import CardList from "./core/CardList"
+
+interface Idata {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+}
+
+const Data = (props: Idata) => {
+    const { layout = "row", size = "xs" } = props
+    const [data, setData] = useState<any[]>([])
+
+    useEffect(() => {
+        setData([
+            {
+                name: "Action",
+                description: "Action description for the Button",
+                size: "xs",
+            },
+            {
+                name: "Action",
+                description: "Action description for the Button",
+                size: "xs",
+            },
+            {
+                name: "Action",
+                description: "Action description for the Button",
+                size: "xs",
+            },
+        ])
+        // fetch(`${MAPS_URL}&start=0&limit=${limit}`)
+        //     .then((res) => {
+        //         if (!res.ok) {
+        //             throw new Error(res.statusText)
+        //         }
+
+        //         return res.json()
+        //     })
+        //     .then((response) => {
+        //         const results = response.results
+        //         if (results.length) {
+        //             setData(results)
+        //         }
+        //     })
+        //     .catch((e) => {
+        //         console.log(e)
+        //     })
+    }, [])
+
+    if (!data.length) return null
+
+    const dataCards = data.map((data: any) => {
+        return {
+            name: data.name,
+            description: data.description,
+            // image: `/geoportal/${data.thumbnail}`,
+            size: size,
+            // url: `/geoportal/#/context/Admin/${data.id}`,
+        }
+    })
+    return (
+        <div>
+            <CardList cards={dataCards} layout={layout} />
+        </div>
+    )
+}
+
+export default Data
diff --git a/src/pages-doc/doc/data.tsx b/src/pages-doc/doc/data.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3987a5cca1a126ef52467909b9e5ee5a8c05462b
--- /dev/null
+++ b/src/pages-doc/doc/data.tsx
@@ -0,0 +1,38 @@
+import React, { ReactElement } from "react"
+
+import { Content, Link,  Data } from "@onegeo/gatsby-theme-onegeo"
+
+function news(): ReactElement {
+
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc">Retour</Link>
+
+                <h1>Data</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>
+                            {`
+ interface Idata {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+ }
+`}
+                        </code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <div className=" max-w-[500px]">
+                <Data layout = "row" size = "xs"/>
+            </div>
+        </Content>
+    )
+}
+
+export default news
+
+
diff --git a/src/pages-doc/doc/index.tsx b/src/pages-doc/doc/index.tsx
index c8c871dfb9a23c3fc456c5f9cb6c69b984278761..2774bab11c421e17c708a46fb63321cc0b2e1b27 100644
--- a/src/pages-doc/doc/index.tsx
+++ b/src/pages-doc/doc/index.tsx
@@ -34,6 +34,8 @@ function index(): ReactElement {
                 <br></br>
                 <Link to="/doc/sections">Sections</Link>
                 <br></br>
+                <Link to="/doc/data">Data</Link>
+                <br></br>
                 <Link to="/doc/maps">Maps</Link>
             </div>
         </Content>