Grid layout cards - Blocks Library

Our Team

Explore the whole collection of open-source web components and elements built with the utility classes from Tailwind

Jese Leos

SEO & Marketing

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

Bonnie Green

CTO & Co Founder

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

Michael Gough

CDO

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

Roberta Casas

Web Designer

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

Neil Sims

React Developer

Neil Sims drives the technical strategy of the themesberg platform and brand.

Joseph Mcfall

Senior Front-end Developer

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

Thomas Lean

Senior Front-end Develope

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

Karen Nelson

SEO Specialist

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

<?php
/**
 * Title: Grid layout cards
 * Slug: grid-layout-cards-team
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"metadata":{"name":"Grid layout cards"},"className":"grid-layout-cards-team","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-layout-cards-team"><!-- 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 Team</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"grid-layout-cards"} -->
<p class="grid-layout-cards">Explore the whole collection of open-source web components and elements built with the utility classes from Tailwind</p>
<!-- /wp:paragraph --></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/avatars/jese-leos.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">Jese Leos</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SEO & Marketing</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Jese 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/sofia-mcguire.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">Bonnie Green</h3>
<!-- /wp:heading -->

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

<!-- 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/michael-gouch.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">Michael Gough</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CDO</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Michael 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">Roberta Casas</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Web Designer</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Roberta 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:heading {"level":3} -->
<h3 class="wp-block-heading">Neil Sims</h3>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p>Neil Sims 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/joseph-mcfall.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">Joseph Mcfall</h3>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p>Joseph 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:heading {"level":3} -->
<h3 class="wp-block-heading">Thomas Lean</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Senior Front-end Develope</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thomas 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/karen-nelson.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">Karen Nelson</h3>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p>Roberta 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 --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

.grid-layout-cards-team {
  @apply bg-white dark:bg-gray-900;

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

    .top-wrapper {
      @apply mx-auto max-w-screen-sm text-center mb-8 lg:mb-16;

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

      p {
        @apply font-light text-gray-500 lg:mb-16 sm:text-xl dark:text-gray-400;
      }
    }

    .grid-wrapper {
      @apply grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;

      .block-wrapper {
        @apply bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-800 dark:border-gray-700;

        figure {
          @apply p-4 max-w-[25rem] max-h-[25rem] w-full h-auto aspect-[1/1];

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

        .text-wrapper {
          @apply px-5 pb-5;

          .wp-block-heading {
            @apply text-xl font-bold tracking-tight text-gray-900 dark:text-white;
          }

          p {
            @apply text-gray-500;

            &:not(:first-of-type) {
              @apply mt-3 mb-4 font-light 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 text-gray-500;
  
              a {
                @apply p-0;
              }
  
              svg {
                @apply  hover:text-gray-900 dark:hover:text-white;
                @apply lg:w-5 lg:h-5;
              }
            }
          }
        }
      }
    }
  }
}