Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#page-hero-block
This component is designed to be at the top of a page and has several variants. See the Reference Pages for examples of this component in action.
A call to action (CTA) button is required for each slide in the rotating banner
Interior Banner Image: Our standard interior banner image size is 640px (width) by 380px (height), 72 ppi (pixels per inch) jpeg or png.
Home Banner Image: Our standard interior banner image size is 1600px (width) by 800px (height), 72 ppi (pixels per inch) jpeg or png.
Alternate Banner Image: Our standard interior banner image size is 1600px (width) by 500px (height), 72 ppi (pixels per inch) jpeg or png.
<section class="banner">
<div class="blue-bg stripe-bg">
<div class="row no-mrg align-items-center">
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 p-0">
<div class="hero-banner-content-block">
<h1>Department Of <span class="display-block">Accounting</span></h1>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 p-0">
<div class="hero-banner-right-column clip-mask-bottom-left">
<img src="../../college-dls/college/images/slider-img.png" alt="Banner Image">
</div>
</div>
</div>
</div>
</section>
/* components/01-visual-styling/02-banner/banner.scss */
/* BEGIN banner.scss */
.mobile-screen #header .top-logo-text {
display: none;
}
.banner {
.hero-banner-right-column>img {
width: 100%;
height: 100%;
}
.single-title-wrapper {
background-color: #0c2340 !important;
padding: 95px 15px
}
.single-title-heading,
.page-video-title {
font-size: 50px;
line-height: 50px;
color: #fff;
font-weight: 400;
}
.hero-banner-wrapper {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #0c2340;
padding-top: 20%;
padding-bottom: 20%;
padding-left: 15px;
padding-right: 15px;
}
.banner-btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-top: 27px;
}
.banner-heading {
font-size: 50px;
margin-bottom: 15px;
line-height: 53px;
color: $white;
font-weight: 400;
}
.banner-description {
line-height: 1.5;
font-size: 23px;
font-weight: 300;
color: $white;
}
}
/* Alternative Department Banner */
.hero-banner-wrapper-alt {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: $blue;
.hero-banner-alt {
padding-top: 15%;
padding-bottom: 6%;
padding-left: 15px;
padding-right: 15px;
background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
.hero-banner-content-alt h1 {
font-size: 3rem;
font-weight: 700;
color: $white;
max-width: 75%;
}
}
}
#banner-logo {
.hero-banner-content-logo {
border-right: 0.15rem solid #FFF;
}
}
#banner-logo-center {
.hero-banner-alt {
padding-top: 5%;
padding-bottom: 5%;
padding-left: 15px;
padding-right: 15px;
background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1));
}
}
@include media-breakpoint-down(lg) {
.hero-banner-content-alt h1 {
font-size: 2.5rem;
}
.hero-banner-alt {
padding-left: 5%;
padding-right: 5%;
}
.single-title-wrapper h1 {
text-align: center;
font-size: 30px;
line-height: normal;
}
.single-title-wrapper {
padding-top: 45px;
padding-bottom: 45px;
}
}
@include media-breakpoint-down(md) {
.hero-banner-content-alt h1 {
font-size: 2rem;
text-align: center;
max-width: 100%;
}
#banner-logo .hero-banner-content-logo {
border-right: none;
}
}
@include media-breakpoint-down(sm) {
.hero-banner-content-alt h1 {
font-size: 1.85rem;
text-align: center;
max-width: 100%;
}
}
/* END Alternative Department Banner */
/* Carousel Banner */
#banner-rotating {
#hero-slider {
.carousel-tab-component .carousel-indicators {
padding-bottom: 0px;
position: initial;
margin-bottom: 0px;
width: 100%;
max-width: 100%;
margin-top: 25px;
}
.carousel-tab-component .carousel-indicators>li {
width: 23%;
}
.hero-banner-slider {
background-size: cover;
background-repeat: no-repeat;
padding-top: 14%;
padding-bottom: 21%;
background-color: $blue;
height: 40rem;
min-height: 40rem;
}
.carousel-indicators {
padding-bottom: 14%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
margin-left: auto;
margin-right: auto;
list-style: none;
}
.carousel-indicators>button {
width: 4%;
opacity: 1;
height: 5px;
}
.carousel-indicators {
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
bottom: 1%;
z-index: 99;
}
.carousel-indicators>button.active {
background-color: $orange-a11y;
}
.carousel-control-prev {
z-index: 99;
}
.carousel-control-next {
z-index: 99;
}
a {
text-decoration: none !important;
}
}
.carousel {
.carousel-control-prev>.carousel-prev-icon,
.carousel-control-next>.carousel-next-icon {
background-color: $orange;
width: 48px;
height: 48px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
&:hover {
background-color: $blue;
}
}
.carousel-control-prev>.carousel-prev-icon:focus .carousel .carousel-control-next>.carousel-next-icon:focus {
outline: 1px solid #006eff;
border: 1px solid #006eff;
outline-offset: 0px;
}
.carousel-control-prev {
width: 8%;
opacity: 0.5;
z-index: 99;
}
.carousel-control-next {
width: 8%;
opacity: 0.5;
z-index: 99;
}
#carousel-button {
position: absolute;
bottom: 3%;
right: 9%;
z-index: 99;
button {
padding: 5px;
color: $white;
font-size: 29px;
line-height: normal;
&:focus,
&:hover {
color: $blue;
}
}
}
}
.overlay {
position: absolute;
// top: 0;
left: 0;
height: 100%;
width: 100%;
// background-image: var(--overlay-gradient);
background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
// background-color: $blue;
// opacity: 0.4;
z-index: 1;
}
.chevron {
.carousel-inner::before {
content: '';
// background-image: url('../utsa/images/header-rop-arrows.png');
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.1%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-secondary' d='M352 256c-8.188 0-16.38-3.125-22.62-9.375L192 109.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 252.9 360.2 256 352 256z'/%3E%3Cpath class='fa-secondary' d='M352 448c-8.188 0-16.38-3.125-22.62-9.375L192 301.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 444.9 360.2 448 352 448z'/%3E%3C/svg%3E");
background-size: contain;
position: absolute;
left: 0;
top: 0;
bottom: 0;
// width: 100%;
// height: 88%;
z-index: 9;
background-repeat: no-repeat;
}
.overlay {
background-image: unset !important;
}
}
}
/* Dark Mode - Banner Styles */
@include color-mode(dark) {
.carousel .carousel-indicators [data-bs-target] {
background-color: $blue;
}
// TODO: move this behavior to buttons
.banner-btns a.white-btn {
color:$blue;
background-color: $white;
&:hover {
color:$white;
background-color:$blue;
}
}
.banner-btns a.blue-btn {
&:hover {
color:$white;
}
}
.banner-btns a.orange-btn {
&:hover {
color:$white;
}
}
.banner-btns a.grey-btn {
color: $blue;
&:hover {
color:$white;
}
}
}
/* Dark Mode - Banner END */
/* End Carousel Banner */
.hero-banner-content-block h1 {
font-size: 50px;
font-weight: 500;
color: $white;
}
.hero-banner-img-block img {
width: 100%;
}
.hero-banner-content-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.hero-banner-content {
position: relative;
z-index: 99;
}
/* Video Banner */
// ht: https://startbootstrap.com/snippets/video-header
// https://jsfiddle.net/StartBootstrap/enajc82d/
#banner-video {
position: relative;
background-color: black;
height: 40rem;
min-height: 40rem;
width: 100%;
overflow: hidden;
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.container {
position: relative;
z-index: 2;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
.play-pause-btn i {
font-size: 24px;
vertical-align: top;
margin-left: 5px;
}
.play-pause-btn {
color: $white;
font-size: 14px;
cursor: pointer;
}
.video-Controls {
position: absolute;
bottom: 23px;
right: 43px;
}
}
/* End Video Banner */
@include media-breakpoint-up(xl) {
#page-hero-carousel .hero-banner-content {
padding-left: 70px;
padding-right: 70px;
}
#page-hero-carousel .carousel-indicators {
padding-left: 58px;
padding-right: 58px;
max-width: 1009px;
}
}
@include media-breakpoint-down(md) {
.top-logo-text {
display: none;
}
.policy-text-wrapper .department-menu-bar {
margin-bottom: 30px;
}
#banner-rotating {
#hero-slider .carousel-indicators {
padding-left: 15px !important;
padding-right: 15px !important;
}
.hero-banner-slider {
// height: 450px;
height: 787px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hero-banner-slider {
padding-top: 7%;
}
}
.hero-banner-content-block {
padding-top: 30px;
padding-bottom: 30px;
}
/* Alternative Department Banner */
.hero-banner-wrapper-alt .hero-banner-alt .hero-banner-content-alt h1 {
max-width: 100%;
}
.banner-heading {
text-align: center;
line-height: normal;
}
.banner-description {
text-align: center;
}
}
@include media-breakpoint-down(lg) {
.banner-btns {
text-align: center;
justify-content: center !important;
}
#banner-video {
height: 55vh;
}
#banner-rotating {
background-color: $blue;
}
.banner-heading {
font-size: 25px;
margin-bottom: 15px;
}
.banner-description {
font-size: 16px;
line-height: normal;
}
.banner-heading .display-block {
display: inline-block !important;
}
.banner-description .display-block {
display: inline-block;
}
.hero-banner-content {
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
}
.slider-wrapper .banner-btns {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
#hero-slider .carousel-indicators {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
padding-bottom: 15px;
padding-top: 15px;
}
#hero-slider.carousel .carousel-control-prev {
width: auto;
}
#hero-slider.carousel .carousel-control-next {
width: auto;
}
.carousel .carousel-control-prev>.carousel-prev-icon,
.carousel .carousel-control-next>.carousel-next-icon {
width: 30px;
height: 30px;
}
.video-content-block>h1 {
font-size: 30px;
line-height: normal;
}
.hero-banner-content-block h1 {
font-size: 24px;
text-align: center;
}
.arrows-component .video-controls-wrap .play-btn {
margin-right: 15px;
}
}
@include media-breakpoint-down(xxl) {
.hero-banner-content {
padding-left: 10%;
padding-right: 10%;
}
#banner-rotating {
#hero-slider .carousel-indicators {
bottom: 0 !important;
padding-left: 10%;
padding-right: 10%;
}
}
// #carousel-button {
// position: absolute;
// bottom: 12%;
// left: initial;
// z-index: 99;
// right: 25px;
// }
}
@include media-breakpoint-only(lg) {
#banner-rotating {
.hero-banner-slider {
height: 465px !important;
}
}
}
@include media-breakpoint-up(xxl) {
#banner-rotating {
.hero-banner-slider {
padding-top: 200px;
padding-bottom: 300px;
}
// #carousel-button {
// left: 50%;
// }
}
}
@include media-breakpoint-up(md) {
.banner .row>div {
position: initial;
}
.banner {
position: relative;
}
.banner {
position: relative;
z-index: 0;
}
}
@include media-breakpoint-only(md) {
#banner-video {
height: 45vh;
}
}
@include media-breakpoint-only(xl) {
#banner-rotating .hero-banner-slider {
height: 550px;
}
}
@include media-breakpoint-only(xxl) {
#banner-rotating .hero-banner-slider {
padding-top: 12%;
padding-bottom: 22%;
}
}
@include media-breakpoint-only(sm) {
#banner-video {
height: 25vh;
}
}
<section class="banner">
<div class="blue-bg stripe-bg">
<div class="row no-mrg align-items-center">
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 p-0">
<div class="hero-banner-content-block">
<h1>{{ banner.text }}<span class="display-block">{{ banner.text-02 }}</span></h1>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 p-0">
<div class="hero-banner-right-column clip-mask-bottom-left">
<img src="{{path '/college-dls/college/images/slider-img.png'}}" alt="Banner Image">
</div>
</div>
</div>
</div>
</section>