Banners
General rules
Where possible use HTML-banners instead of just images. HTML-banners more flexible: we can use one markup for all screen resolutions and manage banner layout with css.
If banner has no text on it (or text is big enough) we can use only largest image file and scale banner with CSS. Text should be readable on 320px wide resolution.
Homepage promo carousel
Use HTML-banners or images in following resolutions:
- 1140×400px - for wide screens
- 940×400px - for medium screens
- 720×400px - for small screens
- 386×275px - mobile resolutions
Important! Because we use slider we must have all banners 400px height. In the opposite we have 'jumping' footer issue.
On homepage slider we have navigation arrow and dots over the banners. Keep that in mind: text should not be under navigation elements.
Use these templates:
My account banners
We have 2 sizes for my account banners:
- 660×300px - for wide screens, tablet and mobile
- 400×315px - for medium screens
No aditional limitations.
Manage your services banners
Prefered small image plus html.
Code:
<div>
<div class="icon-txt">
<div class="icon-txt--i">
<img src="http://idtdesign.github.io/idtfrontend/docs/banners/auto_recharge_80x80_eng.png" alt="Get a $5 Bonus on Your 1st Auto Recharge Transaction">
</div>
<div class="icon-txt--text">
<h3 class="mimic">Get a $5 Bonus on Your 1st Auto Recharge Transaction</h3>
<p>Add Auto Recharge and never run out of talk time. <a class="learn-more" href="#">Set Up Now »</a></p>
</div>
</div>
</div>
Example:
Get a $5 Bonus on Your 1st Auto Recharge Transaction
Add Auto Recharge and never run out of talk time. Set Up Now »
Unlimited banners
on International Calling / Rates pages
Use HTML-banners or images in following width with no heigh limitation:
- 373px width (with any height) - for wide and mobile screens
- 720px width (with any height) - for small screens
Important! Please don't make 720px banner just via scalling 373px - better make it horizontal-oriented by rearranging elements.
No aditional limitations.