Pitchbooking Storybook
Ready for Production

← Back

Who It's For

For Councils
For Clubs
For Schools
For Sporting Bodies
For Commercial Centres

Code:

<section class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-7 justify-center mx-auto max-w-8xl my-16 lg:my-32 px-5">
  <div class="card--picture w-full group">
    <div class="h-32 md:h-52 bg-[url('/assets/images/cards/for-councils.webp')] bg-cover bg-center rounded-lg overflow-hidden relative after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-mint-500 after:to-zinc-900 after:opacity-40">
    </div>
    <div class="flex justify-between items-center">
      <h6 class="h6">For Councils</h6>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
        <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
      </svg>
    </div>
  </div>
  <div class="card--picture w-full group">
    <div class="h-32 md:h-52 bg-[url('/assets/images/cards/for-clubs.webp')] bg-cover bg-center rounded-lg overflow-hidden relative after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-mint-500 after:to-zinc-900 after:opacity-40">
    </div>
    <div class="flex justify-between items-center">
      <h6 class="h6">For Clubs</h6>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
        <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
      </svg>
    </div>
  </div>
  <div class="card--picture w-full group">
    <div class="h-32 md:h-52 bg-[url('/assets/images/cards/for-schools.webp')] bg-cover bg-center rounded-lg overflow-hidden relative after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-mint-500 after:to-zinc-900 after:opacity-40">
    </div>
    <div class="flex justify-between items-center">
      <h6 class="h6">For Schools</h6>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
        <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
      </svg>
    </div>
  </div>
  <div class="card--picture w-full group">
    <div class="h-32 md:h-52 bg-[url('/assets/images/cards/for-sporting-bodies.webp')] bg-cover bg-center rounded-lg overflow-hidden relative after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-mint-500 after:to-zinc-900 after:opacity-40">
    </div>
    <div class="flex justify-between items-center">
      <h6 class="h6">For Sporting Bodies</h6>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
        <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
      </svg>
    </div>
  </div>
  <div class="card--picture w-full group">
    <div class="h-32 md:h-52 bg-[url('/assets/images/cards/for-commercial-centres.webp')] bg-cover bg-center rounded-lg overflow-hidden relative after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-b after:from-mint-500 after:to-zinc-900 after:opacity-40">
    </div>
    <div class="flex justify-between items-center">
      <h6 class="h6">For Commercial Centres</h6>
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
        <path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
      </svg>
    </div>
  </div>

</section>