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>