list card

src/components/core/CardList.tsx

@@ -44,7 +44,7 @@ const oCardProps = {
     'grid': {
         layout: 'top',
         anime: true,
-        className: ''
+        className: 'max-w-full'
     }
 }
 

src/components/core/cardlist/CardListColumn.tsx

@@ -13,7 +13,7 @@ const CardListColumn = (props: PropsWithChildren<Props>) => {
     } = props;
     
     return (
-        <div className={`${className} flex space-x-12 flex-nowrap`}>
+        <div className={`${className} flex space-x-12 flex-nowrap justify-center`}>
             {children}
         </div>
     )

src/pages-doc/doc/core/cardlist.tsx

+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { CardList } from "@onegeo/gatsby-theme-onegeo";
+
+function card(): ReactElement {
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>CardList</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`interface CardProps {
+  title?: string;
+  content?: string;
+  image?: string | IGatsbyImageData;
+  to?: string;
+  anime?: boolean;
+  layout?: "top" | "left";
+  className?: string;
+}
+interface CardListProps {
+  cards?: CardProps[];
+  layout?: 'row' | 'col' | 'grid';
+  className?: string;
+}`}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className="space-y-20">
+        <CardList 
+          cards={[{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          },{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          },{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          }]} 
+          layout='row'
+        />
+        <CardList 
+          cards={[{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          },{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          },{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          }]} 
+          layout='col'
+        />
+      </div>
+      <div className="mt-20">
+        <CardList 
+          cards={[{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          },{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          },{
+            title: 'Lorem ipsum dolor sit amet',
+            content: 'consectetur adipiscing elit. Suspendisse at purus pulvinar, porttitor arcu quis, posuere sapien. Ut massa ligula, cursus eget sem sed, scelerisque ornare erat. Maecenas a arcu sed odio porttitor ultrices. Aliquam non ipsum sem. Etiam maximus sodales quam id ullamcorper'
+          }]} 
+          layout='grid'
+        />
+      </div>
+    </Content>
+  );
+}
+
+export default card;

src/pages-doc/doc/core/index.tsx

@@ -13,6 +13,8 @@ function index(): ReactElement {
         <br></br>
         <Link to="/doc/core/card">Card</Link>
         <br></br>
+        <Link to="/doc/core/cardlist">List card</Link>
+        <br></br>
         <Link to="/doc/core/hero">Hero</Link>
         <br></br>
         <Link to="/doc/core/carousel">Carousel</Link>