Web Components Library

Rotating Side Banner Ad

Fixed Side Banner Ad

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

    <style>
        .rotating-side-banner {
            width: 200px;
        }
    </style>

    <div class="rotating-side-banner mx-auto">

        <a href="https://bing.com" class="block bg-white shadow-sm hover:shadow-md" onclick="clicky.goal(''); ga('send','event','Side Banner Rotating','Click - ad','Advertiser name')" target="_blank" rel="nofollow noopener">
            <img class="mx-auto" src="https://source.unsplash.com/random/200x105" alt="Advertiser name" width="200" height="105">
            <div class="text-gray-500 p-2 text-xs text-center leading-snug">
                Fantastic memorable experiences for visitors to the Rockies
            </div>
        </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
        - update ad text
     --}}

    <style>
        .rotating-side-banner {
            width: 200px;
        }
    </style>

    <div class="rotating-side-banner mx-auto">

        <a href="https://bing.com" class="block bg-white shadow-sm hover:shadow-md"
            onclick="clicky.goal(''); ga('send','event','Side Banner Rotating','Click - ad','Advertiser name')"
            target="_blank" rel="nofollow noopener">
            <img class="mx-auto" src="https://source.unsplash.com/random/200x105" alt="Advertiser name" width="200"
                height="105">
            <div class="text-gray-500 p-2 text-xs text-center leading-snug">
                Fantastic memorable experiences for visitors to the Rockies
            </div>
        </a>

    </div>

    {{!-- component end --}}

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