---
title: Team Section with centred avatars
category: Marketing
paid: false
isActive: true
ltr: {"react":{"jsxTail":[{"code":"export default () => {\n\n    const team = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Martiana dialan\",\n            title: \"Product designer\",\n        },\n        {\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n            name: \"Micheal colorand\",\n            title: \"Software engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n            name: \"Brown Luis\",\n            title: \"Full stack engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/63.jpg\",\n            name: \"Lysa sandiago\",\n            title: \"Head of designers\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n            name: \"Daniel martin\",\n            title: \"Product designer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/46.jpg\",\n            name: \"Vicky tanson\",\n            title: \"Product manager\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/29.jpg\",\n            name: \"Nilson kalin\",\n            title: \"DevOp engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/44.jpg\",\n            name: \"Tina watersone\",\n            title: \"Brand designer\",\n        },\n    ]\n\n    return (\n        <section className=\"py-14\">\n            <div className=\"max-w-screen-xl mx-auto px-4 text-center md:px-8\">\n                <div className=\"max-w-xl mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                        Meet our team\n                    </h3>\n                    <p className=\"text-gray-600 mt-3\">\n                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy.\n                    </p>\n                </div>\n                <div className=\"mt-12\">\n                    <ul className=\"grid gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\">\n                        {\n                            team.map((item, idx) => (\n                                <li key={idx}>\n                                    <div className=\"w-20 h-20 mx-auto\">\n                                        <img\n                                            src={item.avatar}\n                                            className=\"w-full h-full rounded-full\"\n                                            alt=\"\"\n                                        />\n                                    </div>\n                                    <div className=\"mt-2\">\n                                        <h4 className=\"text-gray-700 font-semibold sm:text-lg\">{item.name}</h4>\n                                        <p className=\"text-indigo-600\">{item.title}</p>\n                                    </div>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n        </section>\n    )\n}","label":"App.jsx"}],"jsxCss":[]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 text-center md:px-8\">\n      <div class=\"max-w-xl mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n          Meet our team\n        </h3>\n        <p class=\"text-gray-600 mt-3\">\n          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.\n        </p>\n      </div>\n      <div class=\"mt-12\">\n        <ul class=\"grid gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\">\n          <li v-for=\"(item, idx) in team\" :key=\"idx\">\n            <div class=\"w-20 h-20 mx-auto\">\n              <img\n                :src=\"item.avatar\"\n                class=\"w-full h-full rounded-full\"\n                alt=\"\"\n              />\n            </div>\n            <div class=\"mt-2\">\n              <h4 class=\"text-gray-700 font-semibold sm:text-lg\">{{ item.name }}</h4>\n              <p class=\"text-indigo-600\">{{ item.title }}</p>\n            </div>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      team: [\n        {\n            avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Martiana dialan\",\n            title: \"Product designer\",\n        },\n        {\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n            name: \"Micheal colorand\",\n            title: \"Software engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n            name: \"Brown Luis\",\n            title: \"Full stack engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/63.jpg\",\n            name: \"Lysa sandiago\",\n            title: \"Head of designers\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n            name: \"Daniel martin\",\n            title: \"Product designer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/46.jpg\",\n            name: \"Vicky tanson\",\n            title: \"Product manager\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/29.jpg\",\n            name: \"Nilson kalin\",\n            title: \"DevOp engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/44.jpg\",\n            name: \"Tina watersone\",\n            title: \"Brand designer\",\n        },\n      ]\n    };\n  },\n};\n</script>","label":"App.vue"}]},"svelte":{"svelteTail":[{"code":"<script>\n  let team = [\n    {\n      avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n      name: \"Martiana dialan\",\n      title: \"Product designer\",\n    },\n    {\n      avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n      name: \"Micheal colorand\",\n      title: \"Software engineer\",\n    },\n    {\n      avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n      name: \"Brown Luis\",\n      title: \"Full stack engineer\",\n    },\n    {\n      avatar: \"https://randomuser.me/api/portraits/women/63.jpg\",\n      name: \"Lysa sandiago\",\n      title: \"Head of designers\",\n    },\n    {\n      avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n      name: \"Daniel martin\",\n      title: \"Product designer\",\n    },\n    {\n      avatar: \"https://randomuser.me/api/portraits/men/46.jpg\",\n      name: \"Vicky tanson\",\n      title: \"Product manager\",\n    },\n    {\n      avatar: \"https://randomuser.me/api/portraits/men/29.jpg\",\n      name: \"Nilson kalin\",\n      title: \"DevOp engineer\",\n    },\n    {\n      avatar: \"https://randomuser.me/api/portraits/women/44.jpg\",\n      name: \"Tina watersone\",\n      title: \"Brand designer\",\n    },\n  ];\n</script>\n\n<section class=\"py-14\">\n  <div class=\"max-w-screen-xl mx-auto px-4 text-center md:px-8\">\n    <div class=\"max-w-xl mx-auto\">\n      <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n        Meet our team\n      </h3>\n      <p class=\"text-gray-600 mt-3\">\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.\n      </p>\n    </div>\n    <div class=\"mt-12\">\n      <ul class=\"grid gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\">\n        {#each team as item, idx (idx)}\n          <li>\n            <div class=\"w-20 h-20 mx-auto\">\n              <img\n                src={item.avatar}\n                class=\"w-full h-full rounded-full\"\n                alt=\"\"\n              />\n            </div>\n            <div class=\"mt-2\">\n              <h4 class=\"text-gray-700 font-semibold sm:text-lg\">{item.name}</h4>\n              <p class=\"text-indigo-600\">{item.title}</p>\n            </div>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>","label":"App.svelte"}]},"html":{"htmlTail":[{"code":"<div x-data=\"{ team: [\n        {\n            avatar: 'https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',\n            name: 'Martiana dialan',\n            title: 'Product designer',\n        },\n        {\n            avatar: 'https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg',\n            name: 'Micheal colorand',\n            title: 'Software engineer',\n        },\n        {\n            avatar: 'https://randomuser.me/api/portraits/women/79.jpg',\n            name: 'Brown Luis',\n            title: 'Full stack engineer',\n        },\n        {\n            avatar: 'https://randomuser.me/api/portraits/women/63.jpg',\n            name: 'Lysa sandiago',\n            title: 'Head of designers',\n        },\n        {\n            avatar: 'https://randomuser.me/api/portraits/men/86.jpg',\n            name: 'Daniel martin',\n            title: 'Product designer',\n        },\n        {\n            avatar: 'https://randomuser.me/api/portraits/men/46.jpg',\n            name: 'Vicky tanson',\n            title: 'Product manager',\n        },\n        {\n            avatar: 'https://randomuser.me/api/portraits/men/29.jpg',\n            name: 'Nilson kalin',\n            title: 'DevOp engineer',\n        },\n        {\n            avatar: 'https://randomuser.me/api/portraits/women/44.jpg',\n            name: 'Tina watersone',\n            title: 'Brand designer',\n        },\n    ] }\">\n    <section class=\"py-14\">\n        <div class=\"max-w-screen-xl mx-auto px-4 text-center md:px-8\">\n            <div class=\"max-w-xl mx-auto\">\n                <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                    Meet our team\n                </h3>\n                <p class=\"text-gray-600 mt-3\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy.\n                </p>\n            </div>\n            <div class=\"mt-12\">\n                <ul class=\"grid gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\">\n                    <template x-for=\"(item, idx) in team\" :key=\"idx\">\n                        <li>\n                            <div class=\"w-20 h-20 mx-auto\">\n                                <img\n                                    :src=\"item.avatar\"\n                                    class=\"w-full h-full rounded-full\"\n                                    alt=\"\"\n                                />\n                            </div>\n                            <div class=\"mt-2\">\n                                <h4 class=\"text-gray-700 font-semibold sm:text-lg\" x-text=\"item.name\"></h4>\n                                <p class=\"text-indigo-600\" x-text=\"item.title\"></p>\n                            </div>\n                        </li>\n                    </template>\n                </ul>\n            </div>\n        </div>\n    </section>\n</div>\n","label":"index.html"}]},"preview":"function App() {\n\n    const team = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ\",\n            name: \"Martiana dialan\",\n            title: \"Product designer\",\n        },\n        {\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\",\n            name: \"Micheal colorand\",\n            title: \"Software engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\",\n            name: \"Brown Luis\",\n            title: \"Full stack engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/63.jpg\",\n            name: \"Lysa sandiago\",\n            title: \"Head of designers\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\",\n            name: \"Daniel martin\",\n            title: \"Product designer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/46.jpg\",\n            name: \"Vicky tanson\",\n            title: \"Product manager\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/men/29.jpg\",\n            name: \"Nilson kalin\",\n            title: \"DevOp engineer\",\n        },\n        {\n            avatar: \"https://randomuser.me/api/portraits/women/44.jpg\",\n            name: \"Tina watersone\",\n            title: \"Brand designer\",\n        },\n    ]\n\n    return (\n        <section className=\"py-14\">\n            <div className=\"max-w-screen-xl mx-auto px-4 text-center md:px-8\">\n                <div className=\"max-w-xl mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                        Meet our team\n                    </h3>\n                    <p className=\"text-gray-600 mt-3\">\n                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy.\n                    </p>\n                </div>\n                <div className=\"mt-12\">\n                    <ul className=\"grid gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\">\n                        {\n                            team.map((item, idx) => (\n                                <li key={idx}>\n                                    <div className=\"w-20 h-20 mx-auto\">\n                                        <img\n                                            src={item.avatar}\n                                            className=\"w-full h-full rounded-full\"\n                                            alt=\"\"\n                                        />\n                                    </div>\n                                    <div className=\"mt-2\">\n                                        <h4 className=\"text-gray-700 font-semibold sm:text-lg\">{item.name}</h4>\n                                        <p className=\"text-indigo-600\">{item.title}</p>\n                                    </div>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n        </section>\n    )\n}"}
slug: /team-sections
id: 33a88b1f-098a-43d2-8f78-569a052486c0
created_at: 1670764984274
---

<FUITeamSectionWithCentredAvatars />