Web Components Library

Top Banner Ad

Fixed Side Banner Ad

  • Image Size: 200x200 pixels
  • Text below image
  • Handle: @kana-top-banner-ad
  • Preview:
  • Filesystem Path: components/10-projects/kananaskis.com/02-modules/ads/top-banner-ad.hbs 
<div class="bg-gray-100 h-screen py-10">

    <style>
        .top-banner {
            width: 560px;
        }
    </style>

    <div class="top-banner mx-auto">

        <a href="https://bing.com" class="block bg-white shadow-sm hover:shadow-md" onclick="clicky.goal(''); ga('send','event','Top Banner','Click - ad','Advertiser name')" target="_blank" rel="nofollow noopener">
            <img class="mx-auto" src="https://source.unsplash.com/random/560x95" alt="Advertiser name" width="560" height="95">
        </a>

    </div>

</div>
 
<div class="bg-gray-100 h-screen py-10">

    {{!-- component start --}}

    {{!-- 
        When implementing:
        - move inline styling to stylesheet
        - update ad url
        - update clicky and ga params
        - update ad image, alt text
     --}}

    <style>
        .top-banner {
            width: 560px;
        }
    </style>

    <div class="top-banner mx-auto">

        <a href="https://bing.com" class="block bg-white shadow-sm hover:shadow-md"
            onclick="clicky.goal(''); ga('send','event','Top Banner','Click - ad','Advertiser name')"
            target="_blank" rel="nofollow noopener">
            <img class="mx-auto" src="https://source.unsplash.com/random/560x95" alt="Advertiser name" width="560"
                height="95">
        </a>

    </div>

    {{!-- component end --}}

</div>
 
/* No context defined. */