Team cards grid and cta - Blocks Library

Our people make us great

Empower Developers, Designers, IT Ops, and business teams to collaborate at high velocity. Respond to changes and deliver great customer and employee service experiences fast.

See the entire team

Bonnie Green

CEO & Co-Founder

Bonnie drives the technical strategy of the themesberg platform and brand.

Roberta Casas

CTO & Co-Founder

Bonnie drives the technical strategy of the themesberg platform and brand.

Robert Brown

Senior Front-end Developer

Bonnie drives the technical strategy of the themesberg platform and brand.

Joseph McFallen

Senior Front-end Developer

Bonnie drives the technical strategy of the themesberg platform and brand.

Leslie Livingston

React Developer

Bonnie drives the technical strategy of the themesberg platform and brand.

Neil Sims

Graphic Designer

Bonnie drives the technical strategy of the themesberg platform and brand.

Thomas Lean

Accountant

Bonnie drives the technical strategy of the themesberg platform and brand.

Jese Leos

SEO Specialist

Bonnie drives the technical strategy of the themesberg platform and brand.

Karen Nelson

Marketing

Bonnie drives the technical strategy of the themesberg platform and brand.

Helene Engels

Support

Bonnie drives the technical strategy of the themesberg platform and brand.

Want to join the Flowbite team? We are growing our community

Join our team

<?php
/**
 * Title: Team cards grid and cta
 * Slug: team-cards-grid-and-cta
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Team cards grid and cta"},"className":"team-cards-grid-and-cta","layout":{"type":"constrained"}} -->
<section class="wp-block-group team-cards-grid-and-cta"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:group {"className":"top-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group top-wrapper"><!-- wp:heading -->
<h2 class="wp-block-heading">Our people make us great</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Empower Developers, Designers, IT Ops, and business teams to collaborate at high velocity. Respond to changes and deliver great customer and employee service experiences fast.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"icon":"arrow-right"} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">See the entire team</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-wrapper"><!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-6.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Bonnie Green</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CEO & Co-Founder</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Roberta Casas</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CTO & Co-Founder</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-1.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Robert Brown</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Senior Front-end Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-3.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Joseph McFallen</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Senior Front-end Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/team/member-2.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Leslie Livingston</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Neil Sims</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Graphic Designer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/thomas-lean.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Thomas Lean</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Accountant</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Jese Leos</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SEO Specialist</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/lana-byrd.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Karen Nelson</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Marketing</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Helene Engels</h3>
<!-- /wp:heading -->

<!-- wp:group {"className":"title-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group title-wrapper"><!-- wp:paragraph -->
<p>Support</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"bottom-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group bottom-wrapper"><!-- wp:group {"className":"cta-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-wrapper"><!-- wp:group {"className":"cta","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta"><!-- wp:group {"className":"icon-text","layout":{"type":"default"}} -->
<div class="wp-block-group icon-text"><!-- wp:html -->
<svg aria-hidden="true" class="hidden w-5 h-5 text-gray-800 dark:text-gray-400 md:block shrink-0"
            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path
              d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
</svg>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p><strong>Want to join the Flowbite team?</strong> We are growing our community</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","icon":"arrow-right"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Join our team</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.team-cards-grid-and-cta {
  @apply bg-white dark:bg-gray-900 antialiased;

  .content-wrapper {
    @apply max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24;

    .top-wrapper {
      @apply !m-0 max-w-5xl;

      .wp-block-heading {
        @apply text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white;
      }

      p {
        @apply mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400;
      }
    }

    .grid-wrapper {
      @apply grid grid-cols-1 mt-12 gap-y-12 gap-x-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5;

      .block-wrapper {
        figure {
          @apply object-cover object-top w-full h-64 lg:h-48 max-w-[26.25rem] rounded-lg overflow-hidden;

          img {
            @apply object-cover w-full h-full;
          }
        }

        .text-wrapper {
          @apply mt-4 space-y-2;

          .title-wrapper {
            .wp-block-heading {
              @apply text-xl font-bold text-gray-900 dark:text-white;
            }
            
            p {
              @apply text-base font-medium text-gray-500 dark:text-gray-400;
            }
          }

          p {
            @apply text-base font-normal text-gray-500 dark:text-gray-400;
          }
        }

        .wp-block-social-links {
          @apply flex space-x-4 sm:mt-0;
          .wp-social-link {
            @apply !ml-0 hover:scale-100;
            @apply p-0 bg-transparent;

            a {
              @apply p-0;
            }

            svg {
              @apply text-gray-500 hover:text-gray-900 dark:hover:text-white;
              @apply lg:w-5 lg:h-5;
            }
          }
        }
      }
    }

    .bottom-wrapper {

      .cta-wrapper {
        @apply max-w-3xl p-4 mx-auto mt-8 rounded-md lg:mt-16 bg-gray-50 dark:bg-gray-800;
        .cta {
          @apply flex flex-col justify-between gap-3 md:gap-6 md:items-center md:flex-row;
  
          svg {
            @apply hidden w-5 h-5 text-gray-800 dark:text-gray-400 md:block shrink-0;
          }
  
          .icon-text {
            @apply flex gap-1 justify-start items-center;
  
            p {
              @apply m-0 text-base font-normal text-gray-700 dark:text-gray-400;
            }
          }
  
          iframe {
            @apply inline-block w-5 h-8;
          }
  
          .wp-block-buttons {
            @apply !m-0;
  
            a {
              @apply border-0 p-0;
              @apply inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700;
              
              svg {
                @apply block w-5 h-5 text-primary-600 dark:text-gray-400 shrink-0;
              }
            }
          }
        }
      }
    }
  }
}