index

ScotiaCanvas Framework 2.0

Esto debe estar instalado en el head de nuestra web. Revisa si está correctamente pegado en Global Script de Agility.

<link rel="stylesheet" href="https://cdn.aglty.io/scotiabank-chile/frameworks/scotiabankchile/scotia-grid.css">
<link rel="stylesheet" href="https://cdn.aglty.io/scotiabank-chile/frameworks/scotiabankchile/scotia-canvas.css"> <script src="https://cdn.aglty.io/scotiabank-chile/frameworks/scotiabankchile/scotia-script.js"></script>

Opcional

<script src="https://cdn.aglty.io/scotiabank-chile/frameworks/scotiabankchile/sc-animate.min.css"></script>
<script src=" https://cdn.aglty.io/scotiabank-chile/librerias/canvas-framework/iconos-canvas.css"></script>

Canvas Color

Banca Personas

scotia-red-bg
scotia-red-bg-tint
scotia-red
#EC111A
scotia-red-tint
#FF969C
scotia-blue-bg
scotia-blue-bg-tint
scotia-blue
#009DD6
scotia-blue-tint
#91DDF8
scotia-green-bg
scotia-green-bg-tint
scotia-green
#138468
scotia-green-tint
#84D9C6
scotia-orange-bg
scotia-orange-bg-tint
scotia-orange
#FB6330
scotia-orange-tint
#FFBA8E
scotia-purple-bg
scotia-purple-bg-tint
scotia-purple
#7849B8
scotia-purple-tint
#AEA9F4
scotia-pink-bg
scotia-pink-bg-tint
scotia-pink
#F2609E
scotia-pink-tint
#FDA8DE
scotia-darkred-bg
scotia-darkblue-bg
scotia-darkred
#BE061B
scotia-darkblue
#007EAB
scotia-black-bg
scotia-black-bg-tint
scotia-black
#333333
scotia-black-tint
#757575
scotia-gray-550-bg
scotia-gray-550
#949494
scotia-gris500-bg
scotia-gris400-bg
scotia-gris500
#D6D6D6
scotia-gris400
#E2E8EE
scotia-gris300-bg
scotia-gris200-bg
scotia-gris300
#F6F6F6
scotia-gris200
#F6F7FC
scotia-gris100-bg
scotia-light-bg
scotia-gris100
#FAFBFD
scotia-light
#FFFFFF

Banca Access

scotia-access-red-bg
scotia-access-red
#A6000E
scotia-access-orange-bg
scotia-access-orange
#A4502E
scotia-access-yellow-bg
scotia-access-yellow
#D2A35C
scotia-access-green-bg
scotia-access-green
#33493E
scotia-access-blue-bg
scotia-access-blue
#233E5B
scotia-access-purple-bg
scotia-access-purple
#533C5E
scotia-access-pink-bg
scotia-access-pink
#8D4458

Segments

scotia-segments-red-bg
scotia-segments-red
#A6000E
scotia-segments-orange-bg
scotia-segments-orange
#A4502E
scotia-segments-yellow-bg
scotia-segments-yellow
#D2A35C
scotia-segments-green-bg
scotia-segments-green
#33493E
scotia-segments-blue-bg
scotia-segments-blue
#233E5B
scotia-segments-purple-bg
scotia-segments-purple
#533C5E
scotia-segments-pink-bg
scotia-segments-pink
#8D4458

Headline & text size - Banca Personas

Headline Large
headline-large
Headline Medium
headline-medium
Headline Small
headline-small
Introduction
introduction
Subtitle 1
subtitle-1
Subtitle 2
subtitle-2
Body 1
body-1
Body 2
body-2
Caption
caption
legal
legal

Scotia Wealth Management

Headline large
sc-wealth-headline-large
Headline Medium
sc-wealth-headline-medium
Headline Small
sc-wealth-headline-small

Scotia Access

Headline large
sc-access-headline-large
Headline Medium
sc-access-headline-medium
Headline Small
sc-access-headline-small

Font style

Font transform uppercase
uppercase
Font transform lowercase
lowercase
Font transform capitalize
capitalize
Italic text
font-italic

Status Badges

Texto Badge Solid
status-badge-solid
Texto Badge Outlined
status-badge-outlined badge-outlined-light

Canvas Grid

A continuación se muestra el orden del código para que una mejor funcionalidad tanto para desktop y mobile. Se debe iniciar con una etiqueta <div class="sc-container"> que equivale al 100% del ancho de la pantalla o de su contenedor principal, luego se debe agregar <div class="sc-row"> que será donde se anidarán las multiples columnas. Ver el siguiente ejemplo

<div class="sc-container"> <!-- Contenedor principal -->
<div class="sc-row"> <!-- Anida columnas -->
<div class="scotia-col-lg-4"> Contenido card <div>
<div class="scotia-col-lg-8"> Contenido card </div>
</div> <!-- END: Anida columnas -->
</div> <!-- EMD: Contenedor principal -->

La grilla se compone de 12 columnas cuyo valores en porcentajes se ajustarán relativo al ancho de pantalla donde se visualicen.

Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .scotia-col- .scotia-col-sm- .scotia-col-md- .scotia-col-lg- .scotia-col-xl-
col-x-1
col-x-2
col-x-3
col-x-4
col-x-5
col-x-6
col-x-7
col-x-8
col-x-9
col-x-10
col-x-11
col-x-12

Canvas Box

Canvas Box Solid
<div class=" scotia-box-solid ">
Canvas Box Float
<div class=" scotia-box-float ">
Canvas Box Dashed
<div class=" scotia-box-dashed ">

Marketing Card

Card con Imagen Fondo Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-6 scotia-col-lg-4 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_img" class="scotia-box-float" style="overflow: hidden;"> <div class="img-card scotia-purple-bg-tint"> <img class="m-auto sc-d-block" src="https://cdn.aglty.io/scotiabank-chile/img/img-card-example.png" alt="" class="align-center"> </div> <div class="p-30 scotia-light-bg"> <h3 class="headline-small pb-30"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2 pb-48"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> <span class="sc-d-block text-right"><i class="icon-arrow-2-right scotia-red"></i></span> </div> </div> </div>
Card con Imagen contextual

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-6 scotia-col-lg-4 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_img" class="scotia-box-float" style="overflow: hidden;"> <div class="img-card img-context"> <img class="m-auto sc-d-block" src="https://cdn.aglty.io/scotiabank-chile/img/card-img-contexto-xmp.png" alt="" class="align-center"> </div> <div class="p-30 scotia-light-bg"> <h3 class="headline-small pb-30"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2 pb-48"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> <span class="sc-d-block text-right"><i class="icon-arrow-2-right scotia-red"></i></span> </div> </div> </div>
Card con íconos

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-6 scotia-col-lg-4 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_icon" class="scotia-box-float" style="overflow: hidden;"> <div class="img-card p-30"> <img src="https://cdn.aglty.io/scotiabank-chile/scotiabank-icons/colour/Bills-colour.svg" alt=""> <div class="scotia-light-bg pt-12"> <h3 class="headline-small pb-30"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2 pb-48"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> <span class="sc-d-block text-right"><i class="icon-arrow-2-right scotia-red"></i></span> </div> </div> </div> </div>
Card Horizontal With Background Color + Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_horizontal" class="scotia-box-float sc-d-sm-block sc-d-md-flex sc-d-lg-flex" style="overflow: hidden;"> <div class="img-card"> <img src="https://cdn.aglty.io/scotiabank-chile/img/card-img-contexto-xmp.png" alt=""> </div> <div class="scotia-light-bg px-30 py-30"> <h3 class="headline-medium pb-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> </div> <span class="float-right mt-auto ml-auto pr-30 mb-30"><i class="icon-arrow-2-right scotia-red"></i></span> </div> </div>
Card Horizontal With Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_horizontal" class="scotia-box-float sc-d-sm-block sc-d-md-flex sc-d-lg-flex" style="overflow: hidden;"> <div class="img-card"> <img src="https://cdn.aglty.io/scotiabank-chile/img/card-img-contexto-xmp.png" alt=""> </div> <div class="scotia-light-bg px-30 py-30"> <h3 class="headline-medium pb-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> </div> <span class="float-right mt-auto ml-auto pr-30 mb-30"><i class="icon-arrow-2-right scotia-red"></i></span> </div> </div>
Card Horizontal Simply

Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at arcu.

Button Primario
<div class="scotia-col-12 marketing-card"> <div id="card_horizontal" class="sc-d-sm-block sc-d-md-flex sc-d-lg-flex scotia-blue-bg pt-30 pb-30 sc-align-items-center"> <div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-9 scotia-col-lg-9 scotia-light px-30"> <h3 class="headline-small"> Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at arcu. </h3> </div> <div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-3 scotia-col-lg-3 px-30"> <a href="" rel="noopener" class="scotia-button pill-primary-button mt-xs-24" data-ide="" data-name="" data-creative="" data-position="1">Button Primario</a> </div> </div> </div>
Card Horizontal Promotional
PROMO

Promotional headline

Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis.

Standalone link
<div class="scotia-col-12 marketing-card"> <div id="card_horizontal" class="scotia-box-float sc-d-sm-block sc-d-md-flex sc-d-lg-flex scotia-light-bg pt-30 pb-30 sc-align-items-center"> <div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-9 scotia-col-lg-9 scotia-black px-30"> <div class="status-badge-solid scotia-light scotia-purple-bg p-12 mb-12"> PROMO </div> <h3 class="headline-small pb-12"> Promotional headline </h3> <p class="body-2"> Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis. </p> </div> <div class="scotia-col-12 scotia-col-sm-12 scotia-col-md-3 scotia-col-lg-3 px-30"> <a href="" rel="noopener" class="scotia-link-darkblue mt-xs-24" data-ide="" data-name="" data-creative="" data-position="1">Standalone link <i class="icon-arrow-1-right" style="font-weight: bold; font-size: 12px;"></i></a> </div> </div> </div>
Card Horizontal White

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_horizontal" class="scotia-box-float sc-d-sm-block sc-d-md-flex sc-d-lg-flex pt-30 pb-30"> <div class="img-card pl-30"> <img src="https://cdn.aglty.io/scotiabank-chile/scotiabank-icons/colour/Bills-colour.svg" alt=""> </div> <div class="scotia-light-bg px-30"> <h3 class="headline-small pb-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> </div> <span class="float-right mt-auto ml-auto pr-30"><i class="icon-arrow-2-right scotia-red"></i></span> </div> </div>
Card Horizontal Background Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

<div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_horizontal" class="scotia-box-float sc-d-sm-block sc-d-md-flex sc-d-lg-flex scotia-purple-bg pt-30 pb-30"> <div class="img-card pl-30"> <img src="https://cdn.aglty.io/scotiabank-chile/scotiabank-icons/colour/Bills-colour.svg" alt=""> </div> <div class="scotia-light px-30"> <h3 class="headline-small pb-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h3> <p class="body-2"> Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> </div> <span class="float-right mt-auto ml-auto pr-30"><i class="icon-arrow-2-right scotia-light"></i></span> </div> </div>
Card Horizontal with Call to Action

Lorem ipsum dolor sit amet, consectetur adipiscing

Button Primario
<div class="scotia-col-12 marketing-card"> <div id="card_horizontal" class="scotia-box-float sc-d-sm-block sc-d-md-flex sc-d-lg-flex scotia-green-bg pt-30 pb-30 sc-align-items-center"> <div class="img-card pl-30"> <img src="https://cdn.aglty.io/scotiabank-chile/scotiabank-icons/colour/Bills-colour.svg" alt=""> </div> <div class="scotia-light px-30"> <h3 class="headline-small"> Lorem ipsum dolor sit amet, consectetur adipiscing </h3> </div> <div class="px-30 ml-auto"> <a href="" rel="noopener" class="scotia-button pill-primary-button" data-ide="" data-name="" data-creative="" data-position="1">Button Primario</a> </div> </div> </div>
Default Link
<a href="add-link-to---" class=" scotia-default-link ">
Link Dark Blue
<a href="add-link-to---" class=" scotia-link-darkblue ">

Button setting

Button set

Primary Button
<a class=" scotia-button button-primary-red ">
Alternative Button Red
<a class=" scotia-button scotia-secundary-red ">
Alternative Fill Button Red
<a class=" scotia-button scotia-fill-red ">
Alternative Fill Button black
<a class=" scotia-button scotia-fill-black ">
Alternative Button Black
<a class=" scotia-button scotia-outline-black ">

Button on background color

Pill Primary Button
<div class="scotia-purple-bg">
<a class=" scotia-button pill-primary-button ">
</div>
Pill Secundary Outline
<div class="scotia-blue-bg">
<a class=" scotia-button pill-secundary-outline ">
</div>

Button Flotante

Pill Primary Button
<div class="scotia-purple-bg">
<a class=" scotia-button pill-float-primary-button ">
</div>

List setting

Normal List

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
<ul class="sc-canvas-list pl-36"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li> </ul>

Number List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
<ol class="sc-canvas-list pl-36"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit </li> </ol>

Margin

12
<div class=" m-12 ">
18
<div class=" m-18 ">
24
<div class=" m-24 ">
30
<div class=" m-30 ">
36
<div class=" m-36 ">
42
48
54
60
66
72
78
84
90
120

Margin Variant

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem natus, ab corrupti doloribus accusantium excepturi dolores explicabo. Magnam dolorum aut labore quidem deserunt veritatis, dolor fuga. Est error a, minima.

Only Top margin
.mt-xx
Only Right margin
.mr-xx
Only Bottom margin
.mb-xx
Only Left margin
.ml-xx
Only Left & Right margin
.mx-xx
Only Top & Bottom margin
.my-xx

Padding

12
<div class=" p-12 ">
18
<div class=" p-18 ">
24
<div class=" p-24 ">
30
<div class=" p-30 ">
36
<div class=" p-36 ">
42
48
54
60
66
72
78
84
90
120

Padding Variant

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem natus, ab corrupti doloribus accusantium excepturi dolores explicabo. Magnam dolorum aut labore quidem deserunt veritatis, dolor fuga. Est error a, minima.

Only Top padding
.pt-xx
Only Right padding
.pr-xx
Only Bottom padding
.pb-xx
Only Left padding
.pl-xx
Only Left & Right padding
.px-xx
Only Top & Bottom padding
.py-xx

Collapse Setting

Ítem uno

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Ítem dos

Ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolo.

Ítem tres

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="sc-accordion sc-d-block w-100 mb-12"> <div class="sc-card-accordion"> <div class="sc-card-header sc-position-relative py-24 subtitle-1 scotia-black"> Ítem uno <i class="icon-arrow-1-down scotia-purple sc-position-absolute"></i> </div> <div class="sc-card-content py-24"> <p class="body-2 scotia-black"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p> </div> </div> <div class="sc-card-accordion"> <div class="sc-card-header sc-position-relative py-24 subtitle-1 scotia-black"> Ítem dos <i class="icon-arrow-1-down scotia-purple sc-position-absolute"></i> </div> <div class="sc-card-content py-24"> <p class="body-2 scotia-black"> Ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolo. </p> </div> </div> <div class="sc-card-accordion"> <div class="sc-card-header sc-position-relative py-24 subtitle-1 scotia-black"> Ítem tres<i class="icon-arrow-1-down scotia-purple sc-position-absolute"></i> </div> <div class="sc-card-content py-24"> <p class="body-2 scotia-black"> Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div>

Tabs Setting

To re-enable the access in the future, go to the app or service and grant access again.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

What does it mean to grant access to my account?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

What happens after I revoke access?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

What are third-party apps?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="sc-tab"> <ul class="sc-tab-header"> <li class="sc-tab-header-item"> <a class="sc-tab-header-link sc-tab-link-active" href="#tab1">First Tab</a> </li> <li class="sc-tab-header-item"> <a class="sc-tab-header-link" href="#tab2">Second Tab</a> </li> <li class="sc-tab-header-item"> <a class="sc-tab-header-link" href="#tab3">Third Tab</a> </li> <li class="sc-tab-header-item"> <a class="sc-tab-header-link" href="#tab4">Fourth Tab</a> </li> </ul> <div class="sc-tab-content p-4 sc-tab-content-active" id="tab1"> <p>To re-enable the access in the future, go to the app or service and grant access again. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> <div class="sc-tab-content p-4" id="tab2"> <p>What does it mean to grant access to my account? </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="sc-tab-content p-4" id="tab3"> <p>What happens after I revoke access? </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> <div class="sc-tab-content p-4" id="tab4"> <p>What are third-party apps? </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div>

Filters (Selector)

Select or filter label here

<div class="sc-d-flex sc-align-items-center"> <p class="headline-small body-1 mr-24"> Select or filter label here </p> <div class="sc-select mr-30"> <select> <option value="0">Todas las opciones</option> </select> <i class="arrow"></i> </div> <div class="sc-select mr-30"> <select> <option value="0">Todas las opciones</option> </select> <i class="arrow"></i> </div> <div class="sc-select mr-30"> <select> <option value="0">Todas las opciones</option> </select> <i class="arrow"></i> </div> </div>

Card carousel

H3 headline

Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis.

Standalone link

H3 headline

Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis.

Standalone link

H3 headline

Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis.

Standalone link
<div class="slider-card owl-carousel"> <div class="item"> <div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_img" class="scotia-box-float" style="overflow: hidden;"> <div class="img-card scotia-purple-bg-tint"> <img class="m-auto sc-d-block" src="https://cdn.aglty.io/scotiabank-chile/img/card-img-contexto-xmp.png" alt="" class="align-center"> </div> <div class="p-30 scotia-light-bg"> <h3 class="headline-small pb-30"> H3 headline </h3> <p class="body-2 pb-48"> Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis. </p> <a href="" rel="noopener" class="scotia-link-darkblue mt-xs-24" data-ide="" data-name="" data-creative="" data-position="1">Standalone link <i class="icon-arrow-1-right" style="font-weight: bold; font-size: 12px;"></i></a> </div> </div> </div> </div> <div class="item"> <div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_img" class="scotia-box-float" style="overflow: hidden;"> <div class="img-card scotia-purple-bg-tint"> <img class="m-auto sc-d-block" src="https://cdn.aglty.io/scotiabank-chile/img/card-img-contexto-xmp.png" alt="" class="align-center"> </div> <div class="p-30 scotia-light-bg"> <h3 class="headline-small pb-30"> H3 headline </h3> <p class="body-2 pb-48"> Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis. </p> <a href="" rel="noopener" class="scotia-link-darkblue mt-xs-24" data-ide="" data-name="" data-creative="" data-position="1">Standalone link <i class="icon-arrow-1-right" style="font-weight: bold; font-size: 12px;"></i></a> </div> </div> </div> </div> <div class="item"> <div class="scotia-col-12 marketing-card"> <a href="#!" rel="noopener" class="link_cards clickfollow" data-ide="" data-name="" data-creative="" data-position="1"></a> <div id="card_img" class="scotia-box-float" style="overflow: hidden;"> <div class="img-card scotia-purple-bg-tint"> <img class="m-auto sc-d-block" src="https://cdn.aglty.io/scotiabank-chile/img/card-img-contexto-xmp.png" alt="" class="align-center"> </div> <div class="p-30 scotia-light-bg"> <h3 class="headline-small pb-30"> H3 headline </h3> <p class="body-2 pb-48"> Metus odio egestas adipiscing erat orbi imperdiet vestibulum natoque egestas lectus varius at adipiscing arcu. Pharetra ridiculus vulputate iaculis. </p> <a href="" rel="noopener" class="scotia-link-darkblue mt-xs-24" data-ide="" data-name="" data-creative="" data-position="1">Standalone link <i class="icon-arrow-1-right" style="font-weight: bold; font-size: 12px;"></i></a> </div> </div> </div> </div> </div>
<script> // Carousel settings window.onload = function() { $('.slider-card').owlCarousel({ margin: 0, nav: false, loop: false, autoplay: true, autoplayTimeout: 5000, autoplayHoverPause: true, autoHeight: true, autoHeightClass: 'owl-height', responsiveClass: true, responsive: { 0: { items: 1 }, 600: { items: 2 }, 1000: { items: 3 } } }) }; </script>