Big Banner
Sometimes you will need to use images that do not fit a fixed 3:1 aspect ratio for a banner. Big Banner allows the editor to upload an image that can use any height to fit the design needs.
Text Overlay Quadrants
If you want to add a text overlay, it be added to 9 different quadrants depending on the design needs. Backgrounds are added behind the text to meet ADA accessibility requirements for contrast.
Credit: [add name]
Sample 1 Code
<div class="banner-left-top">
<h1 class="banner-title">Sample 1 Banner</h1>
</div>
<div class="banner-left-bottom">
<p class="tagline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.
</p>
</div>
<div class="img-credit">Credit: [add name]</div>
Credit: [add name]
Sample 2 Code
<div class="banner-center">
<h1 class="banner-title"><span class="banner-text-overlay">Sample 2 Banner</span></h1>
</div>
<div class="img-credit">Credit: [add name]</div>
Other Layout Code Styles
Sample 3 Code: Text Left Center
<div class="banner-left-center">
<h1 class="banner-title">Sample 3 Banner</h1>
<p class="tagline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.
</p>
</div>
<div class="img-credit">Credit: add name</div>Sample 4 Code: Text Left Bottom
<div class="banner-left-bottom">
<h1 class="banner-title">Sample 4 Banner</h1>
<p class="tagline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien diam, mattis nec condimentum non, scelerisque id sapien. In id porttitor tortor. Maecenas at leo velit.
</p>
</div>
<div class="img-credit">Credit: add name</div>