Code Snippet Library - Homepage Channel Boxes

Jan 10, 2023

Zapnito

Code Snippet Library - Homepage Channel Boxes

Like Be the first to like this

Preview

HTML

<div class="container mt-12">
  <h3>Header Text</h3>
  <div class="channel-buttons grid gap-5 grid-cols-1 sm:grid-cols-2">
    <!-- Add channel URL below -->
    <a href="" class="hover:no-underline">
      <div class="channel-item flex items-center justify-center h-56 
      bg-center bg-cover text-brand-primary 
      hover:text-brand-primary-darker font-bold ease-in-out"
      style="background-image: url('')">
        <div class="flex flex-col px-2 text-center">
          <p class="mb-1 text-2xl">Channel Name</p>
          <p class="m-0 text-lg font-normal">Supporting text</p>
        </div>
      </div>
    </a>
    <!-- Add channel URL below -->
    <a href="" class="hover:no-underline">
      <div class="channel-item flex items-center justify-center h-56 
      bg-center bg-cover text-brand-primary 
      hover:text-brand-primary-darker font-bold ease-in-out" 
      style="background-image: url('')">
        <div class="flex flex-col px-2 text-center">
          <p class="mb-1 text-2xl">Channel Name</p>
          <p class="m-0 text-lg font-normal">Supporting text</p>
        </div>
      </div>
    </a>
    <!-- Add channel URL below -->
    <a href="" class="hover:no-underline">
      <div class="channel-item flex items-center justify-center h-56 
      bg-center bg-cover text-brand-primary 
      hover:text-brand-primary-darker font-bold ease-in-out" 
      style="background-image: url('')">
        <div class="flex flex-col px-2 text-center">
          <p class="mb-1 text-2xl">Channel Name</p>
          <p class="m-0 text-lg font-normal">Supporting text</p>
        </div>
      </div>
    </a>
    <!-- Add channel URL below -->
    <a href="" class="hover:no-underline">
      <div class="channel-item flex items-center justify-center h-56 
      bg-center bg-cover text-brand-primary 
      hover:text-brand-primary-darker font-bold ease-in-out" 
      style="background-image: url('')">
        <div class="flex flex-col px-2 text-center">
          <p class="mb-1 text-2xl">Channel Name</p>
          <p class="m-0 text-lg font-normal">Supporting text</p>
        </div>
      </div>
    </a>
  </div>
</div>

Zapnito

Zapnito is the community platform built for personalized knowledge sharing. Build your custom branded community platform with discussions, content, courses, events and more – under one domain.