---
title: Team Section centred with large images
category: Marketing
paid: false
isActive: true
ltr: {"vue":{"vueCss":[],"vueTail":[{"label":"App.vue","code":"<template>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"max-w-xl mx-auto sm:text-center\">\n        <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n          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 text ever since the 1500s, when an unknown.\n        </p>\n      </div>\n      <div class=\"mt-12\">\n        <ul class=\"grid gap-8 sm:grid-cols-2 md:grid-cols-3\">\n          <li v-for=\"(item, index) in team\" :key=\"index\">\n            <div class=\"w-full h-60 sm:h-52 md:h-56\">\n              <img\n                :src=\"item.avatar\"\n                class=\"w-full h-full object-cover object-center shadow-md rounded-xl\"\n                alt=\"\"\n              />\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"text-lg text-gray-700 font-semibold\">{{ 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  name: 'TeamSection',\n  data() {\n    return {\n      team: [\n        {\n          avatar: 'https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80',\n          name: 'Martiana dialan',\n          title: 'Product designer'\n        },\n        {\n          avatar: 'https://images.unsplash.com/photo-1623605931891-d5b95ee98459?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80',\n          name: 'Micheal colorand',\n          title: 'Software engineer'\n        },\n        {\n          avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n          name: 'Brown Luis',\n          title: 'Full stack engineer'\n        },\n        {\n          avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n          name: 'Lysa sandiago',\n          title: 'Head of designers'\n        },\n        {\n          avatar: 'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n          name: 'Daniel martin',\n          title: 'Product designer'\n        },\n        {\n          avatar: 'https://images.unsplash.com/photo-1540569014015-19a7be504e3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80',\n          name: 'Vicky tanson',\n          title: 'Product manager'\n        },\n      ]\n    }\n  }\n}\n</script>\n"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  const team = [\n    {\n      avatar: \"https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80\",\n      name: \"Martiana dialan\",\n      title: \"Product designer\"\n    },\n    {\n      avatar: \"https://images.unsplash.com/photo-1623605931891-d5b95ee98459?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80\",\n      name: \"Micheal colorand\",\n      title: \"Software engineer\"\n    },\n    {\n      avatar: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n      name: \"Brown Luis\",\n      title: \"Full stack engineer\"\n    },\n    {\n      avatar: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n      name: \"Lysa sandiago\",\n      title: \"Head of designers\"\n    },\n    {\n      avatar: \"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n      name: \"Daniel martin\",\n      title: \"Product designer\"\n    },\n    {\n      avatar: \"https://images.unsplash.com/photo-1540569014015-19a7be504e3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80\",\n      name: \"Vicky tanson\",\n      title: \"Product manager\"\n    },\n  ];\n</script>\n\n<section class=\"py-14\">\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"max-w-xl mx-auto sm:text-center\">\n      <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n        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 text ever since the 1500s, when an unknown.\n      </p>\n    </div>\n    <div class=\"mt-12\">\n      <ul class=\"grid gap-8 sm:grid-cols-2 md:grid-cols-3\">\n        {#each team as item, index (index)}\n          <li>\n            <div class=\"w-full h-60 sm:h-52 md:h-56\">\n              <img\n                src={item.avatar}\n                class=\"w-full h-full object-cover object-center shadow-md rounded-xl\"\n                alt=\"\"\n              />\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"text-lg text-gray-700 font-semibold\">{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>\n"}]},"react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n\n    const team = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80\",\n            name: \"Martiana dialan\",\n            title: \"Product designer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1623605931891-d5b95ee98459?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80\",\n            name: \"Micheal colorand\",\n            title: \"Software engineer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n            name: \"Brown Luis\",\n            title: \"Full stack engineer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n            name: \"Lysa sandiago\",\n            title: \"Head of designers\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n            name: \"Daniel martin\",\n            title: \"Product designer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1540569014015-19a7be504e3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80\",\n            name: \"Vicky tanson\",\n            title: \"Product manager\"\n        },\n    ]\n\n    return (\n        <section className=\"py-14\">\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"max-w-xl mx-auto sm:text-center\">\n                    <h3 className=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                        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 text ever since the 1500s, when an unknown.\n                    </p>\n                </div>\n                <div className=\"mt-12\">\n                    <ul className=\"grid gap-8 sm:grid-cols-2 md:grid-cols-3\">\n                        {\n                            team.map((item, idx) => (\n                                <li key={idx}>\n                                    <div className=\"w-full h-60 sm:h-52 md:h-56\">\n                                        <img\n                                            src={item.avatar}\n                                            className=\"w-full h-full object-cover object-center shadow-md rounded-xl\"\n                                            alt=\"\"\n                                        />\n                                    </div>\n                                    <div className=\"mt-4\">\n                                        <h4 className=\"text-lg text-gray-700 font-semibold\">{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}"}],"jsxCss":[]},"html":{"htmlTail":[{"label":"index.html ","code":"<section\n  class=\"py-14\"\n  x-data=\"{ team: [\n  {\n      avatar: 'https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80',\n      name: 'Martiana dialan',\n      title: 'Product designer'\n  },\n  {\n      avatar: 'https://images.unsplash.com/photo-1623605931891-d5b95ee98459?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80',\n      name: 'Micheal colorand',\n      title: 'Software engineer'\n  },\n  {\n      avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n      name: 'Brown Luis',\n      title: 'Full stack engineer'\n  },\n  {\n      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n      name: 'Lysa sandiago',\n      title: 'Head of designers'\n  },\n  {\n      avatar: 'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',\n      name: 'Daniel martin',\n      title: 'Product designer'\n  },\n  {\n      avatar: 'https://images.unsplash.com/photo-1540569014015-19a7be504e3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80',\n      name: 'Vicky tanson',\n      title: 'Product manager'\n  },\n]\n}\"\n>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"max-w-xl mx-auto sm:text-center\">\n      <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n        Our team\n      </h3>\n      <p class=\"text-gray-600 mt-3\">\n        Lorem Ipsum is simply dummy text of the printing and typesetting\n        industry. Lorem Ipsum has been the industry's standard dummy text\n        ever since the 1500s, when an unknown.\n      </p>\n    </div>\n    <div class=\"mt-12\">\n      <ul class=\"grid gap-8 sm:grid-cols-2 md:grid-cols-3\">\n        <template x-for=\"(item, index) in team\" :key=\"index\">\n          <li>\n            <div class=\"w-full h-60 sm:h-52 md:h-56\">\n              <img\n                :src=\"item.avatar\"\n                class=\"w-full h-full object-cover object-center shadow-md rounded-xl\"\n                alt=\"\"\n              />\n            </div>\n            <div class=\"mt-4\">\n              <h4\n                class=\"text-lg text-gray-700 font-semibold\"\n                x-text=\"item.name\"\n              ></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>"}]},"preview":"function App() {\n\n    const team = [\n        {\n            avatar: \"https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80\",\n            name: \"Martiana dialan\",\n            title: \"Product designer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1623605931891-d5b95ee98459?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80\",\n            name: \"Micheal colorand\",\n            title: \"Software engineer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n            name: \"Brown Luis\",\n            title: \"Full stack engineer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n            name: \"Lysa sandiago\",\n            title: \"Head of designers\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\",\n            name: \"Daniel martin\",\n            title: \"Product designer\"\n        },\n        {\n            avatar: \"https://images.unsplash.com/photo-1540569014015-19a7be504e3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80\",\n            name: \"Vicky tanson\",\n            title: \"Product manager\"\n        },\n    ]\n\n    return (\n        <section className=\"py-14\">\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"max-w-xl mx-auto sm:text-center\">\n                    <h3 className=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                        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 text ever since the 1500s, when an unknown.\n                    </p>\n                </div>\n                <div className=\"mt-12\">\n                    <ul className=\"grid gap-8 sm:grid-cols-2 md:grid-cols-3\">\n                        {\n                            team.map((item, idx) => (\n                                <li key={idx}>\n                                    <div className=\"w-full h-60 sm:h-52 md:h-56\">\n                                        <img\n                                            src={item.avatar}\n                                            className=\"w-full h-full object-cover object-center shadow-md rounded-xl\"\n                                            alt=\"\"\n                                        />\n                                    </div>\n                                    <div className=\"mt-4\">\n                                        <h4 className=\"text-lg text-gray-700 font-semibold\">{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: cc6baa01-a6bb-4c60-977a-eb43deb82099
created_at: 1670764321050
---

<FUITeamSectionCentredWithLargeImages />