Portal Banner Styles
Portal Banner Primary (Default)
<div class="portal-banner banner-red portal-banner--primary" id="banner-homepage">
<div class="wrap">
<div class="grid">
<div class="grid__col grid__col--12 grid__col-md--4 grid__col-lg--6">
<div class="portal-banner__header">
<h1>Primary Banner Header</h1>
</div>
<div class="portal-banner__gradient"></div>
</div>
</div>
</div>
</div>
Portal Banner (Guidelines)
<div class="portal-banner banner-sand portal-banner--primary" id="banner-guidelines" style="background-image: url(../../static/images/guidelines-banner.jpg)">
<div class="wrap">
<div class="grid">
<div class="grid__col grid__col--12 grid__col-md--4 grid__col-lg--6">
<div class="portal-banner__header">
<h1>Guidelines</h1>
</div>
<div class="portal-banner__gradient"></div>
</div>
</div>
</div>
</div>
Banner Documentation
Use
Banners should be full width and sit outsite of the main body wrap.
Background Image
Background image should be center focused to match all screen sizes.
For Primary and Secondary banners, the image is set as background-image in the ".banner__image" div.
For Hero banner, the image is set as background-image in the ".banner--hero" div.
Variations
Variations of heights - listed above
Content
Should contain a title only and background image. Ensure the image looks good on large screens.