Svelte Team Sections - Flowbite Svelte Blocks
Get started with a collection of team sections built with Tailwind CSS and Flowbite to showcase your organization's team members based on multiple layouts.
Team member cards #
Use this example to show information about your team members such as the name, occupation, picture, and social media accounts inside a card component.
- Svelte
<script lang="ts">
import { Section, TeamWrapper, TeamHeader, TeamBody, TeamItem, Facebook, GitHub, Twitter } from 'flowbite-svelte-blocks';
let members = [
{
href: '/',
src: 'https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png',
alt: 'Bonnie Green',
name: 'Bonnie Green',
jobTitle: 'CEO & Web Developer',
description: 'Bonnie drives the technical strategy of the flowbite platform and brand.'
},
{
href: '/',
src: 'https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png',
alt: 'Jese Leos',
name: 'Jese Leos',
jobTitle: 'CTO',
description: 'Jese drives the technical strategy of the flowbite platform and brand.'
},
{
href: '/',
src: 'https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png',
alt: 'Michael Gouch',
name: 'Michael Gouch',
jobTitle: 'Senior Front-end Developer',
description: 'Michael drives the technical strategy of the flowbite platform and brand'
},
{
href: '/',
src: 'https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png',
alt: 'Lana Byrd',
name: 'Lana Byrd',
jobTitle: 'Marketing & Sale',
description: 'Lana drives the technical strategy of the flowbite platform and brand.'
}
];
</script>
<Section name="team">
<TeamWrapper>
<TeamHeader>
{#snippet label()}Our Team{/snippet}
<p class="font-light text-gray-500 sm:text-xl lg:mb-16 dark:text-gray-400">
Explore the whole collection of open-source web components and elements built with the utility classes from Tailwind
</p>
</TeamHeader>
<TeamBody>
{#each members as { href, src, alt, name, jobTitle, description }}
<TeamItem {href} {src} {alt} {name} {jobTitle}>
<p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">
{description}
</p>
{#snippet social()}
<Facebook href="/" />
<GitHub href="/" />
<Twitter href="/" />
{/snippet}
</TeamItem>
{/each}
</TeamBody>
</TeamWrapper>
</Section>