Banners

Default Banners

Lorem ipsum

Quisque mattis nibh vel dolor volutpat,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci tortor, interdum eget libero ut, tempus pellentesque neque. Mauris facilisis neque vel elementum feugiat. Praesent metus mauris, pellentesque bibendum consectetur sit amet, laoreet in lacus. Donec tristique ligula in mattis ultrices. Fusce suscipit ante at dui vulputate laoreet. Aenean mollis efficitur egestas. Ut faucibus et justo euismod elementum.

Sed vel ligula mi. Integer id ipsum interdum, porttitor elit ac, semper est. Proin in elit vitae sapien pellentesque sollicitudin. Nullam a metus non magna consectetur pretium. Sed eu rhoncus quam, ut consectetur nibh. Duis et massa bibendum sapien posuere posuere. Nam eget neque enim. Praesent nec metus risus. Nullam eu sapien non eros commodo semper. Nullam nisl ipsum, viverra at nunc nec, hendrerit aliquam magna. Nam ac nunc ante. Vivamus aliquet, arcu a tempus iaculis, elit enim consequat orci, in accumsan neque lectus a massa. Vivamus euismod quam in eros consequat eleifend.

<div class="uscb-overflow-hidden" style="background-color: rgb(17, 46, 81); min-height: 200px; max-height: 400px;">
<div class="data-uscb-banner-text uscb-padding-LR-20">
<h3 class="uscb-font-2x uscb-regular uscb-text-align-center uscb-w-100 uscb-margin-T-0 uscb-margin-B-20" style="color: rgb(255, 255, 255);">Lorem ipsum</h3>
<p class="uscb-h3 uscb-text-align-center uscb-w-100 uscb-margin-TB-0" style="color: rgb(255, 255, 255);">Quisque mattis nibh vel dolor volutpat,</p>
</div>
</div>

Top of Section

$(".data-uscb-banner-text").each(function(element) {
var height = $(this).height();
var padding = 20;
if (height < 200) {
padding = (200 - height) / 2;
}
$(this).css("padding-top", padding + "px");
$(this).css("padding-bottom", padding + "px");
});

Top of Section

Hero Banners

Hero with center-aligned copy

<section class="uscb-full-width uscb-hero-image-container_large uscb-layout-column uscb-layout-align-center-center" style="background-image: url("assets/max-ostrozhinskiy.jpg");">
<div>
<h1 class="uscb-h1 uscb-text-align-center uscb-color-white uscb-margin-TB-0">Hero with center-aligned copy</h1>
<div class="uscb-layout-row uscb-layout-align-center-center uscb-margin-Top-2em">
<input type="text" class="uscb-input-banner-white">
<button class="uscb-primary-button">Sign Up</button>
</div>
</div>
</section>

Top of Section

Hero Banners with CTA

Hero with left aligned copy as placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

<section class="uscb-full-width uscb-hero-image-container_large uscb-banner-text-control uscb-layout-column uscb-layout-align-flex-end" style="background-image: url("assets/max-ostrozhinskiy.jpg");">
<div>
<h1 class="uscb-h1 uscb-color-white">Hero with left aligned copy as placeholder</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</p>
<button class="uscb-cta-button">Call To Action</button>
</div>
</section>

Top of Section

Alert Banners

<section style="background-image: linear-gradient(-132deg, #e3f2ff 5%, #e3f2ff 100%)", minHeight: 50px, maxHeihgt: 300px" class="data-uscb-banner-alert-container uscb-full-width uscb-overflow-hidden uscb-layout-align-center-center uscb-position-relative uscb-banner-height">
<button class="uscb-banner-alert-content uscb-button uscb-icon-button uscb-banner-alert-dismiss data-uscb-banner-dismiss-btn">
<span class="o-close-1 data-uscb-banner-dismiss-btn uscb-font-2_5x"></span>
</button>
<div class="uscb-banner-alert-content uscb-layout-row uscb-w-100 uscb-layout-align-start-center">
<a href="#" class="uscb-underline-color-black-hover uscb-w-100"><p class="uscb-title-2 uscb-line-height-24 uscb-title-1 uscb-banner-alert-mobile uscb-color-black uscb-font-1x uscb-margin-TB-0 uscb-padding-TB-10 uscb-w-100 data-uscb-banner-hover-target">
This is a thin banner, it could be dismissible and the whole banner might be a link.
</p></a>
</div>
</section>

Top of Section