collective page uses card grid

pages/collective.tsx

@@ -4,16 +4,18 @@ import { App } from 'src/components/App'
 import { Meta } from 'src/components/Meta'
 import { CollectiveImage } from 'src/components/CollectiveImage'
 import { PersonCard } from 'src/components/PersonCard'
-import { CardList } from 'src/components/CardList'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
 import { meta } from 'src/lib/meta'
-import { IMeta } from 'src/types'
+import { IMeta, IImage } from 'src/types'
 import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage, NextPageContext } from 'next'
+import { CardGrid } from 'src/components/CardGrid'
 
 interface IPerson {
-
+    url: string
+    name: string
+    picture: IImage
 }
 
 type Props = {
@@ -51,18 +53,19 @@ const Page: NextPage<Props> = props => {
                 />
             )}
 
-            <CardList
+            <CardGrid style={{
-                items={props.data}
+                marginBottom: 'var(--size-xl)',
-                renderItem={(person, index) => (
+            }}>
+                {props.data.map((item, index) => (
                     <PersonCard
                         key={index}
-                        profile={person}
+                        profile={item}
-                        picture={person.picture}
+                        picture={item.picture}
-                        url={person.url}
+                        url={item.url}
-                        name={person.name}
+                        name={item.name}
                     />
-                )}
+                ))}
-            />
+            </CardGrid>
         </App>
     )
 }

src/components/PersonCard/index.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import cx from 'classnames'
-import { Image } from './Image'
+import { Image } from '../Image'
 
 export const PersonCard = ({ picture, name, url, profile }) => (
     <div className="PersonCard">
@@ -12,9 +11,6 @@ export const PersonCard = ({ picture, name, url, profile }) => (
                 display: flex;
                 flex-direction: column;
 
-                margin-bottom: var(--double-margin);
-
-                width: var(--person-card-width);
                 min-width: 10em;
                 max-width: 30em;
             }