Banners

Informação importante

No início do código de todos os banners estamos fazendo a chamada do 'CMS', é fundamental compreender que as informações exibidas nos banners serão alimentadas através do CMS. Por exemplo, se você estiver utilizando o banner na página "Home", poderá encontrar o conteúdo do banner para adicionar ou atualizar as imagens e informações correspondentes navegando no painel da Increazy, no menu "Layout > CMS > Home".

Banner com slide de imagens

Preview

HTML

{% set primaryBanner = _cms('images', 'slides do banner') %}

{% if primaryBanner.content %}
    <div class="primary__banner">
        <div class="swiper swiper__primary-banner">
            <div class="swiper-wrapper">

                {% for banner in primaryBanner.content %}
                    <div class="swiper-slide">
                        <a {{ _href(banner) }} aria-label="{{ banner.name == '' ? 'Imagem' : banner.name }}">
                            <picture class="primary__banner-image">
                                <source
                                    media="(max-width: 768px)"
                                    srcset="{{ _image(banner.mobile, 'w=768px') }}"
                                />
                                <img
                                    src="{{ _image(banner.desktop, 'w=1366') }}"
                                    alt="{{ banner.title }}"
                                >
                            </picture>
                        </a>
                    </div>
                {% endfor %}
            </div>

            <div class="swiper-button-next">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.7813 8.66688L2.66665 8.66688L2.66665 7.33355L10.7813 7.33355L7.20531 3.75755L8.14798 2.81488L13.3333 8.00021L8.14798 13.1855L7.20531 12.2429L10.7813 8.66688Z" fill="black"/>
                </svg>
            </div>
            <div class="swiper-button-prev">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.21869 7.33361H13.3334V8.66694H5.21869L8.79469 12.2429L7.85202 13.1856L2.66669 8.00027L7.85202 2.81494L8.79469 3.75761L5.21869 7.33361Z" fill="black"/>
                </svg>
            </div>

            <div class="swiper-pagination"></div>
        </div>
    </div>
{% endif %}

<script>
    function initPrimaryBanner () {
    _dom('Swiper').waitVariable(() => {
        new Swiper(".swiper__primary-banner", {
        autoplay: {
            delay: 4500,
        },
        loop: true,
        pagination: {
            el: ".primary__banner .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".primary__banner .swiper-button-next",
            prevEl: ".primary__banner .swiper-button-prev",
        },
        });
    });
    }
    initPrimaryBanner();
</script>

CSS

.primary__banner{
  width: 100%;
  height: 500px;
}

.primary__banner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.primary__banner .swiper-button-next,
.primary__banner .swiper-button-prev {
  background-color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 800px;
  border: 1px solid #E6E6E6;
  box-shadow: 0px 1px 8px 0px #0000001F;
}

.primary__banner .swiper-button-next:after {
content: '' !important;
}

.primary__banner .swiper-button-prev:after {
content: '' !important;
}

.primary__banner .swiper-pagination-bullet {
width: 12px;
height: 6px;
border-radius: 24px;
background-color: #E6E6E6;
opacity: 1;
}

.primary__banner .swiper-pagination-bullet-active {
background-color: #2C2C2C;
}

Banner com imagem e informações (Modelo 01)

Preview Desktop

Preview Mobile

HTML

{% set secondaryBanner = _cms('image', 'Informações do banner') %}

{% if secondaryBanner.content %}
    <section class="secondary__banner">
        <a {{ _href(secondaryBanner.content.url) }} target="blank" aria-label="{{ secondaryBanner.name == '' ? 'Imagem' : secondaryBanner.name }}">
            <picture class="secondary__banner-image">
                <source
                    media="(max-width: 768px)"
                    srcset="{{ _image(secondaryBanner.content.mobile, 'w=384px') }}"
                />
                <img
                    src="{{ _image(secondaryBanner.content.desktop, 'w=680') }}"
                    alt="{{ secondaryBanner.content.title }}"
                >
            </picture>
        </a>

        <div class="secondary__banner-info-container">
            <div class="secondary__banner-info">
                <small class="secondary__banner-info__subtitle">especial</small>
                <h2 class="secondary__banner-info__title">{{ secondaryBanner.content.name }}</h2>
                <p class="secondary__banner-info__description">{{ secondaryBanner.content.description }}</p>
                <a {{ _href(secondaryBanner.content.url) }} 
                class="secondary__banner-info__btn"
                target="blank">
                See more
                </a>
            </div>
        </div>
    </section>
{% endif %}

CSS

.secondary__banner{
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  background-color: #F6ECDD;
  border-radius: 4px;
}

.secondary__banner a{
  display: flex;
  width: 50%;
  height: 100%;
}

.secondary__banner-image{
  width: 100%;
  height: 100%;
}

.secondary__banner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px 0px 0px 4px;
}

.secondary__banner-info-container{
  height: 100%;
  width: 50%;
  position: relative;
}

.secondary__banner-info{
  min-height: 35%;
  max-width: 496px;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
}

.secondary__banner-info__subtitle{
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-transform: uppercase;
  color: #757575;
  margin-bottom: 16px;
}

.secondary__banner-info__title{
  font-weight: 600;
  font-size: 32px;
  line-height: 34.56px;
  color: #000000;
  margin-bottom: 8px;
}

.secondary__banner-info__description{
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: #5C5C5C;
  margin-bottom: 48px;
}

.secondary__banner-info__btn{
  width: 104px!important;
  height: 32px!important;
  background-color: #01141E;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.secondary__banner-info__btn:hover {
  color: #fff;
}

@media (max-width: 768px){
  .secondary__banner {
    flex-direction: column;
    height: 740px;
  }

  .secondary__banner a {
    width: 100%;
    height: 60%;
  }

  .secondary__banner-info-container {
    width: 100%;
  }

  .secondary__banner-info {
    height: 196px;
    width: 304px;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .secondary__banner-info__description {
    text-align: center;
  }
}

Banner com imagem e informações (Modelo 02)

Preview Desktop

Preview Mobile

HTML

{% set tertiaryBanner = _cms('image', 'Informações do banner') %}

{% if tertiaryBanner.content %}
    <section class="tertiary__banner">
        <div class="tertiary__banner-info-container">
            <div class="tertiary__banner-info">
                <h2 class="tertiary__banner-info__title">{{ tertiaryBanner.content.name }}</h2>
                <p class="tertiary__banner-info__description">{{ tertiaryBanner.content.description }}</p>
                <a {{ _href(tertiaryBanner.content.url) }} 
                class="tertiary__banner-info__btn"
                target="blank">
                See more
                </a>
            </div>
        </div>

        <a {{ _href(tertiaryBanner.content.url) }} target="blank" aria-label="{{ tertiaryBanner.name == '' ? 'Imagem' : tertiaryBanner.name }}">
            <picture class="tertiary__banner-image">
                <source
                    media="(max-width: 768px)"
                    srcset="{{ _image(tertiaryBanner.content.mobile, 'w=384px') }}"
                />
                <img
                    src="{{ _image(tertiaryBanner.content.desktop, 'w=680') }}"
                    alt="{{ tertiaryBanner.content.title }}"
                >
            </picture>
        </a>
    </section>
{% endif %}

CSS

.tertiary__banner{
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.tertiary__banner a{
  display: flex;
  width: 50%;
  height: 100%;
  background-color: #0081C2;
  position: relative;
}

.tertiary__banner-image{
  max-width: 527.64px;
  max-height: 513.28px;
  margin: auto;
}

.tertiary__banner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tertiary__banner-info-container{
  height: 100%;
  width: 50%;
  position: relative;
  background-color: #000000;
}

.tertiary__banner-info{
  min-height: 39.6%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 104px;
  transform: translateY(-50%);
}

.tertiary__banner-info__title{
  font-weight: 600;
  font-size: 56px;
  line-height: 60.48px;
  color: #fff;
  margin-bottom: 20px;
}

.tertiary__banner-info__description{
  font-weight: 400;
  font-size: 18px;
  line-height: 21.6px;
  color: #A7A7A7;
  margin-bottom: 32px;
}

.tertiary__banner-info__btn{
  width: 113px!important;
  height: 44px!important;
  background-color: transparent!important;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tertiary__banner-info__btn:hover {
  color: #fff;
}

@media (max-width: 768px){
  .tertiary__banner {
    flex-direction: column;
    height: 586px;
  }

  .tertiary__banner a {
    width: 100%;
    min-height: 53.4%;
  }

  .tertiary__banner-info-container {
    width: 100%;
  }

  .tertiary__banner-info {
    min-height: 153px;
    width: 296px;
    display: flex;
    flex-direction: column;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .tertiary__banner-info__title {
    font-weight: 600;
    font-size: 32px;
    line-height: 34.56px;
  }
}

Grid de banners com informações e imagens

Preview Desktop

Preview Mobile

HTML

{% set gridBigBanner = _cms('image', 'Informações do banner maior') %}
{% set gridTopSmallBanner = _cms('image', 'Informações do banner menor superior') %}
{% set gridBottomSmallBanner = _cms('image', 'Informações do banner menor inferior') %}

{% if gridBigBanner.content or gridTopSmallBanner.content or gridBottomSmallBanner.content %}
    <div class="grid__banner">
        {% if gridBigBanner.content %}
            <section class="grid-big__banner">
                <a {{ _href(gridBigBanner.content.url) }} target="blank" aria-label="{{ gridBigBanner.name == '' ? 'Imagem' : gridBigBanner.name }}">
                    <picture class="grid-big__banner-image">
                        <source
                            media="(max-width: 768px)"
                            srcset="{{ _image(gridBigBanner.content.mobile, 'w=384px') }}"
                        />
                        <img
                            src="{{ _image(gridBigBanner.content.desktop, 'w=680') }}"
                            alt="{{ gridBigBanner.content.title }}"
                        >
                    </picture>
                </a>

                <div class="grid-big__banner-info-container">
                    <div class="grid-big__banner-info">
                        <small class="grid-big__banner-info__subtitle">especial</small>
                        <h2 class="grid-big__banner-info__title">{{ gridBigBanner.content.name }}</h2>
                        <p class="grid-big__banner-info__description">{{ gridBigBanner.content.description }}</p>
                        <a {{ _href(gridBigBanner.content.url) }} 
                        class="grid-big__banner-info__btn"
                        target="blank">
                        See more
                        </a>
                    </div>
                </div>
            </section>
        {% endif %}
        
        <div class="grid__banner-col {{ gridBigBanner.content ? '' : 'full'}}">
            {% if gridTopSmallBanner.content %}
                <section class="grid-top-small__banner">
                    <a {{ _href(gridTopSmallBanner.content.url) }} target="blank" aria-label="{{ gridTopSmallBanner.name == '' ? 'Imagem' : gridTopSmallBanner.name }}">
                        <picture class="grid-top-small__banner-image">
                            <source
                                media="(max-width: 768px)"
                                srcset="{{ _image(gridTopSmallBanner.content.mobile, 'w=384px') }}"
                            />
                            <img
                                src="{{ _image(gridTopSmallBanner.content.desktop, 'w=680') }}"
                                alt="{{ gridTopSmallBanner.content.title }}"
                            >
                        </picture>
                    </a>

                    <div class="grid-top-small__banner-info-container">
                        <div class="grid-top-small__banner-info">
                            <small class="grid-top-small__banner-info__subtitle">novidades</small>
                            <h2 class="grid-top-small__banner-info__title">{{ gridTopSmallBanner.content.name }}</h2>
                            <p class="grid-top-small__banner-info__description">{{ gridTopSmallBanner.content.description }}</p>
                            <a {{ _href(gridTopSmallBanner.content.url) }} 
                            class="grid-top-small__banner-info__btn"
                            target="blank">
                            See more
                            </a>
                        </div>
                    </div>
                </section>
            {% endif %}

            {% if gridBottomSmallBanner.content %}
                <section class="grid-bottom-small__banner">
                    <div class="grid-bottom-small__banner-info-container">
                        <div class="grid-bottom-small__banner-info">
                            <small class="grid-bottom-small__banner-info__subtitle">novidades</small>
                            <h2 class="grid-bottom-small__banner-info__title">{{ gridBottomSmallBanner.content.name }}</h2>
                            <p class="grid-bottom-small__banner-info__description">{{ gridBottomSmallBanner.content.description }}</p>
                            <a {{ _href(gridBottomSmallBanner.content.url) }} 
                            class="grid-bottom-small__banner-info__btn"
                            target="blank">
                            See more
                            </a>
                        </div>
                    </div>

                    <a {{ _href(gridBottomSmallBanner.content.url) }} target="blank" aria-label="{{ gridBottomSmallBanner.name == '' ? 'Imagem' : gridBottomSmallBanner.name }}">
                        <picture class="grid-bottom-small__banner-image">
                            <source
                                media="(max-width: 768px)"
                                srcset="{{ _image(gridBottomSmallBanner.content.mobile, 'w=384px') }}"
                            />
                            <img
                                src="{{ _image(gridBottomSmallBanner.content.desktop, 'w=680') }}"
                                alt="{{ gridBottomSmallBanner.content.title }}"
                            >
                        </picture>
                    </a>
                </section>
            {% endif %}
        </div>
    </div>
{% endif %}

CSS

.grid__banner{
  width: 100%;
  height: 500px;
  column-gap: 24px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
}

.grid__banner-col {
  width: 65.71%;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.full {
  width: 100%;
}

@media (max-width: 1024px) {
  .grid__banner {
    flex-direction: column;
    height: auto;
    row-gap: 24px;
  }

  .grid__banner-col {
    width: 100%;
  }
}

/*
* ---------------------------
*       BIG GRID
* ---------------------------
*/

.grid-big__banner {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  background-color: #F6ECDD;
}

.grid-big__banner a {
  display: flex;
  width: 50%;
  height: 100%;
}

.grid-big__banner-image {
  width: 100%;
  height: 100%;
}

.grid-big__banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px 0px 0px 4px;
}

.grid-big__banner-info-container {
  width: 50%;
  position: relative;
}

.grid-big__banner-info {
  min-height: 35%;
  max-width: 496px;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
}

.grid-big__banner-info__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-transform: uppercase;
  color: #757575;
  margin-bottom: 16px;
}

.grid-big__banner-info__title {
  font-weight: 600;
  font-size: 32px;
  line-height: 34.56px;
  color: #000000;
  margin-bottom: 8px;
}

.grid-big__banner-info__description {
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: #5C5C5C;
  margin-bottom: 48px;
}

.grid-big__banner-info__btn {
  width: 104px !important;
  height: 32px !important;
  background-color: #01141E;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-big__banner-info__btn:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .grid-big__banner {
    flex-direction: column;
    height: 740px;
  }

  .grid-big__banner a {
    width: 100%;
    height: 60%;
  }

  .grid-big__banner-info-container {
    width: 100%;
    height: 100%;
  }

  .grid-big__banner-info {
    height: 196px;
    width: 304px;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .grid-big__banner-info__description {
    text-align: center;
  }
}

/*
* ---------------------------
*       SMALL TOP GRID
* ---------------------------
*/

.grid-top-small__banner{
  border-radius: 4px;
  width: 100%;
  height: calc(50% - 12px);
  display: flex;
  flex-direction: row;
  background-color: #F1CBDE;
}

.grid-top-small__banner a {
  display: flex;
  width: 50%;
  height: 100%;
}

.grid-top-small__banner-image {
  width: 100%;
  height: 100%;
}

.grid-top-small__banner-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px 0px 0px 4px;
}

.grid-top-small__banner-info-container {
  height: 100%;
  width: 50%;
  position: relative;
}

.grid-top-small__banner-info {
  min-height: 61.25%;
  max-width: 164px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grid-top-small__banner-info__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-transform: uppercase;
  color: #757575;
  margin-bottom: 8px;
}

.grid-top-small__banner-info__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 25.92px;
  color: #000000;
  margin-bottom: 8px;
}

.grid-top-small__banner-info__description {
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: #5C5C5C;
  margin-bottom: 16px;
}

.grid-top-small__banner-info__btn {
  width: 104px !important;
  height: 32px !important;
  background-color: #01141E;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-top-small__banner-info__btn:hover {
  color: #fff;
}

@media (max-width: 1024px){
    .grid-top-small__banner {
      height: 240px;
    }
}

/*
* ---------------------------
*       SMALL BOTTOM GRID
* ---------------------------
*/

.grid-bottom-small__banner {
  border-radius: 4px;
  width: 100%;
  height: calc(50% - 12px);
  display: flex;
  flex-direction: row;
  background-color: #D4F1DF;
}

.grid-bottom-small__banner a {
  display: flex;
  width: 50%;
  height: 100%;
}

.grid-bottom-small__banner-image {
  width: 100%;
  height: 100%;
}

.grid-bottom-small__banner-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0px 4px 4px 0px;
}

.grid-bottom-small__banner-info-container {
  height: 100%;
  width: 50%;
  position: relative;
}

.grid-bottom-small__banner-info {
  min-height: 61.25%;
  max-width: 164px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grid-bottom-small__banner-info__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-transform: uppercase;
  color: #757575;
  margin-bottom: 8px;
}

.grid-bottom-small__banner-info__title {
  font-weight: 600;
  font-size: 24px;
  line-height: 25.92px;
  color: #000000;
  margin-bottom: 8px;
}

.grid-bottom-small__banner-info__description {
  font-weight: 400;
  font-size: 14px;
  line-height: 19.6px;
  color: #5C5C5C;
  margin-bottom: 16px;
}

.grid-bottom-small__banner-info__btn {
  width: 104px !important;
  height: 32px !important;
  background-color: #01141E;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-bottom-small__banner-info__btn:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .grid-bottom-small__banner {
    height: 240px;
  }
}