Homepage Channel Boxes

Preview

HTML Code

<div class="container explore-widget">
  <h2 class="explore-widget__title">Header Text</h2>
  <div class="channel-buttons grid gap-5 grid-cols-1 sm:grid-cols-2">
    <!-- Add channel URL below -->
    <a href="" class="hover:no-underline">                                                                                                                              <!-- Add image URL below -->
      <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">                                                                                                                              <!-- Add image URL below -->
      <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">                                                                                                                              <!-- Add image URL below -->
      <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">                                                                                                                              <!-- Add image URL below -->
      <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>