UCI

Bullet Point: Bullet Point Accent Light Theme 

<section class="splitter  splitter_bg-color_white      splitter_padding_top_large    splitter_padding_bottom_large  ">
    <div class="container">
        <div class="splitter__wrapper">
            <div class="row">
                <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">

                    <div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">

                        <div class="bullet-point 
     bullet-point_accentLightTheme
    ">

                            <div class="bullet-point__head">
                                <h2 class="
                title-l
                
                
                
                
            ">

                                    Conheça as soluções que vão tornar a Compra de Casa uma realidade

                                </h2>
                                <ul class="bullet-point__head-list">
                                    <li class="bullet-point__head-list-item">
                                        <svg class="icon icon-info  ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check-uci">
                                            </use>
                                        </svg>
                                        <div class="bullet-point__head-list-item-description">
                                            <div class="
                            bodycopy-m
                            
                            
                            
                        ">
                                                Conheça as soluções que vão tornar a Compra de Casa uma realidade
                                            </div>
                                        </div>
                                    </li>
                                    <li class="bullet-point__head-list-item">
                                        <svg class="icon icon-info  ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check-uci">
                                            </use>
                                        </svg>
                                        <div class="bullet-point__head-list-item-description">
                                            <div class="
                            bodycopy-m
                            
                            
                            
                        ">
                                                Aquisição de Habitação Própria Permanente: até 90% do valor de aquisição ou do valor de avaliação do imóvel (o menor dos valores), em função do perfil de cliente e das garantias apresentadas.
                                            </div>
                                        </div>
                                    </li>
                                    <li class="bullet-point__head-list-item">
                                        <svg class="icon icon-info  ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check-uci">
                                            </use>
                                        </svg>
                                        <div class="bullet-point__head-list-item-description">
                                            <div class="
                            bodycopy-m
                            
                            
                            
                        ">
                                                Aquisição de Habitação para outras finalidades: até 80% do valor de aquisição ou do valor de avaliação do imóvel (o menor dos valores), em função do perfil de cliente e das garantias apresentadas.
                                            </div>
                                        </div>
                                    </li>
                                    <li class="bullet-point__head-list-item">
                                        <svg class="icon icon-info  ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check-uci">
                                            </use>
                                        </svg>
                                        <div class="bullet-point__head-list-item-description">
                                            <div class="
                            bodycopy-m
                            
                            
                            
                        ">
                                                Mínimo de 7 anos e máximo de 35 anos de acordo com o produto selecionado, perfil de cliente e até ao limite de 75 anos de idade no termo do empréstimo.
                                            </div>
                                        </div>
                                    </li>
                                    <li class="bullet-point__head-list-item">
                                        <svg class="icon icon-info  ">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check-uci">
                                            </use>
                                        </svg>
                                        <div class="bullet-point__head-list-item-description">
                                            <div class="
                            bodycopy-m
                            
                            
                            
                        ">
                                                Comissão de abertura de 312,00€ (inclui imposto de selo).
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div class="bullet-point__slider">
                                <div class="slider-highlight">
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="slide-highlight swiper-slide">
                                                <img class="bullet-point__slider-img" src="/dist/images/access-highlight-bg-mob.jpg" />
                                            </div>

                                            <div class="slide-highlight swiper-slide">
                                                <img class="bullet-point__slider-img" src="/dist/images/access-simulator-bg.jpg" />
                                            </div>

                                            <div class="slide-highlight swiper-slide">
                                                <img class="bullet-point__slider-img" src="/dist/images/access-simulator-bg-mob.jpg" />
                                            </div>

                                            <div class="slide-highlight swiper-slide">
                                                <img class="bullet-point__slider-img" src="/dist/images/access-simulator-bg-tab.jpg" />
                                            </div>

                                        </div>

                                        <!-- SLIDER PAGINATION INDEX -->
                                        <div class="swiper-navigation">
                                            <div class="swiper-button-prev">
                                                <svg class="icon icon-arrow-left  ">
                                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
                                                </svg>

                                            </div>
                                            <div class="swiper-pagination"></div>
                                            <div class="swiper-button-next">
                                                <svg class="icon icon-arrow-right  ">
                                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
                                                </svg>

                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
 
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}

<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">

    <div {{#if hasID}}id="{{idComponent}}"{{/if}} class="bullet-point 
    {{#if isAccentLightTheme}} bullet-point_accentLightTheme{{/if}}
    {{#if oneAndOnlyImage}} bullet-point_onlyOneImgTheme{{/if}}">

        <div class="bullet-point__head">
            {{> @title-l this.title}}
            <ul class="bullet-point__head-list">
                {{#each bullets}}
                <li class="bullet-point__head-list-item">
                {{#if isHipotecas}}
                    <svg class="icon icon-info  ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink"
                            xlink:href="/dist/icons/icons.svg#check-hipotecas">
                        </use>
                    </svg>
                {{else}}
                <svg class="icon icon-info  ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink"
                            xlink:href="/dist/icons/icons.svg#check-uci">
                        </use>
                    </svg>
                {{/if}}
                    <div class="bullet-point__head-list-item-description">
                        {{> @bodycopy-m this.description}}
                    </div>
                </li>
                {{/each}}
            </ul>
        </div>

        <div class="bullet-point__slider">
            <div class="slider-highlight">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {{#each images}}
                        <div class="slide-highlight swiper-slide">
                            <img class="bullet-point__slider-img" src="{{this.slide}}" />
                        </div>

                        {{/each}}
                    </div>

                    <!-- SLIDER PAGINATION INDEX -->
                    <div class="swiper-navigation">
                        <div class="swiper-button-prev">
                            <svg class="icon icon-arrow-left  ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                    xlink:href="/dist/icons/icons.svg#arrow-left"></use>
                            </svg>

                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next">
                            <svg class="icon icon-arrow-right  ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                    xlink:href="/dist/icons/icons.svg#arrow-right"></use>
                            </svg>

                        </div>
                    </div>

                </div>
            </div>

        </div>


    </div>
</div>

{{/content}}
{{/extend}}
 
{
  "hasID": false,
  "splitter": {
    "oneColumn": true,
    "bgColorWhite": true,
    "paddingBottomLarge": true,
    "paddingTopLarge": true
  },
  "title": {
    "text": "Conheça as soluções que vão tornar a Compra de Casa uma realidade"
  },
  "bullets": [
    {
      "icon": "",
      "description": {
        "text": "Conheça as soluções que vão tornar a Compra de Casa uma realidade"
      }
    },
    {
      "icon": "",
      "description": {
        "text": "Aquisição de Habitação Própria Permanente: até 90% do valor de aquisição ou do valor de avaliação do imóvel (o menor dos valores), em função do perfil de cliente e das garantias apresentadas."
      }
    },
    {
      "icon": "",
      "description": {
        "text": "Aquisição de Habitação para outras finalidades: até 80% do valor de aquisição ou do valor de avaliação do imóvel (o menor dos valores), em função do perfil de cliente e das garantias apresentadas."
      }
    },
    {
      "icon": "",
      "description": {
        "text": "Mínimo de 7 anos e máximo de 35 anos de acordo com o produto selecionado, perfil de cliente e até ao limite de 75 anos de idade no termo do empréstimo."
      }
    },
    {
      "icon": "",
      "description": {
        "text": "Comissão de abertura de 312,00€ (inclui imposto de selo)."
      }
    }
  ],
  "images": [
    {
      "slide": "/dist/images/access-highlight-bg-mob.jpg"
    },
    {
      "slide": "/dist/images/access-simulator-bg.jpg"
    },
    {
      "slide": "/dist/images/access-simulator-bg-mob.jpg"
    },
    {
      "slide": "/dist/images/access-simulator-bg-tab.jpg"
    }
  ],
  "isAccentLightTheme": true
}
  • Content: 
    .bullet-point {
    display: flex;
    flex-flow: row;

    min-height: 700px;
    height: fit-content;

    @media(--viewport-ms-max) {
        flex-flow: column;
    }

    &_accentLightTheme {
        background-color: var(--color-accent-light);

        .bullet-point .swiper-slide {
            background-color: var(--color-accent-light);
        }

        .bullet-point .swiper-navigation {
            background-color: var(--color-accent-light);
        }

        .swiper-container {
            background-color: var(--color-accent-light);
        }

    }

    &_onlyOneImgTheme {
        .bullet-point .swiper-navigation {
            display: none;
        }
    }

    &__head {
        display: flex;
        flex-flow: column;
        width: 50%;

        padding-bottom: 25px;

        @media (--viewport-sm-min) {
            padding-right: 30px;
        }

        @media(--viewport-ms-max) {
            width: 100%;
        }

        .title-l {
            color: var(--color-text);
            padding-bottom: 40px;

            @media(--viewport-ms-max) {
                padding-bottom: 22px;
            }
        }


        &-list {
            display: flex;
            flex-flow: column;

            @media (--viewport-sm-min) {
                padding-right: 15px;
            }

            &-item {
                display: flex;
                flex-flow: row;
                flex-grow: 1;
                margin-top: 30px;

                .icon {
                    margin-right: 10px;
                    min-height: 20px;
                    min-width: 20px;

                    @media (--viewport-sm-min) {
                        min-height: 26px;
                        min-width: 26px;
                    }
                }


                &-description {
                    text-align: left;
                }

            }
        }


    }


    &__slider {
        text-align: center;
        width: 50%;
        height: fit-content;

        @media(--viewport-ms-max) {
            width: 100%;
            padding-top: 40px;
        }

        &-img {
            height: 650px;
            width: 440px;

            align-self: center;
            object-fit: cover;

            @media (--viewport-sm-only) {
                height: 550px;
                width: 340px;
            }

            @media (--viewport-sm-min) {
                margin-left: 30px;
            }

            @media(--viewport-ms-max) {
                width: 100%;
                object-fit: cover;
            }

            @media(--viewport-xs-max) {
                max-height: 420px;
                width: 100%;
                object-fit: cover;
            }

        }

    }


}

.bullet-point .swiper-wrapper {
    height: fit-content;
}

.bullet-point .swiper-slide {
    margin-bottom: 0px;
    background-color: transparent;
}

/*.bullet-point {
    margin: 0;
    height: fit-content;
}*/

.bullet-point .swiper-navigation {
    /* max-width: 267px;
    margin-left: auto;
    margin-right: auto; */

    max-width: 523px !important;
    padding: 30px 0 10px 0px;
    margin-left: 53px;
    margin-right: 23px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: unset;
    bottom: 0;
    right: 0;

    @media(--viewport-ms-max) {
        padding: 30px 20px 10px 20px;
        max-width: unset !important;
        margin: 0;
    }

}
  • URL: /components/raw/bullet-point/bullet-point.css
  • Filesystem Path: src/03-organisms/bullet-point/bullet-point.css
  • Size: 3.4 KB

No notes defined.