Structures
Carousel
<div class='vue-app'>
<div class='vue-app'>
<swiper-carousel :slides="[{'Name': 'Joe Somethingorother','Content': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed \ndiam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. \nStet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\n sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed \ndiam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed \ndiam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. \nStet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\n sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed \ndiam nonumy eirmod tempor invidunt ut labore.<br>'},{'Name': 'Jane Somethingorother','Content': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.'}]"></swiper-carousel>
</div>
</div>Custom Tables
Reward
At augue eget arcu dictum varius duis at consectetur. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis.
Level
3
Earn the highest interest rate and ATM service charge refunds2
Level
2
Earn a higher interest rate and ATM service charge refunds2
Level
1
Earn interest
Balance
APY
Interest Rate
APY
Interest Rate
APY
Interest Rate
Balance of $0 to $149,999.99
1.11%
1.10%
0.60%
0.60%
0.01%
0.01%
Balance of $150,000 and over
0.85%
0.85%
0.55%
0.55%
0.01%
0.01%
Qualifications and perks
Receive e-Statements
✔️
✔️
✔️
Minimum 20 every day debit card transactions
✔️
If you don’t qualify for level 2 or level 3 rewards in a particular month, don’t worry!
There’s no penalty, no monthly service charge, and you still earn our base interest rate.
Plus, you can get right back to earning the higher interest rates and ATM service charge refunds the very next month
Minimum 8 every day debit card transactions
✔️
Minimum 4 ACH7 items must post and settle
✔️
Minimum 1 bill payment must post and settle
✔️
1 ACH7 item OR 1 bill payment must post and settle
✔️
<section class="custom-table">
<div class="custom-table__top-section">
<div class="column-1 custom-table__top-section-cell">
<p>
At augue eget arcu dictum varius duis at consectetur. Ac placerat vestibulum lectus mauris
ultrices eros in cursus turpis.
</p>
<button class="btn btn-primary btn-small">Apply for Rewards Checking</button>
</div>
<div class="column-2-3 custom-table__top-section-cell">
<small>Level</small>
<h1>3</h1>
<p>Earn the highest interest rate and ATM service charge refunds2</p>
</div>
<div class="column-4-5 custom-table__top-section-cell">
<small>Level</small>
<h1>2</h1>
<p>Earn a higher interest rate and ATM service charge refunds2</p>
</div>
<div class="column-6-7 custom-table__top-section-cell">
<small>Level</small>
<h1>1</h1>
<p>Earn interest</p>
</div>
</div>
<div class="custom-table__header">
<div class="custom-table__header-title">
<div class="column-1 span-gutter">
Balance
</div>
<div class="column-2">
APY
</div>
<div class="column-3">
Interest Rate
</div>
<div class="gutter-spacer"></div>
<div class="column-4">
APY
</div>
<div class="column-5">
Interest Rate
</div>
<div class="gutter-spacer"></div>
<div class="column-6">
APY
</div>
<div class="column-7">
Interest Rate
</div>
</div>
<div class="column-1 span-gutter custom-table__header-row">
<div class="column-1 span-gutter">
Balance of $0 to $149,999.99
</div>
<div class="column-2">
1.11%
</div>
<div class="column-3">
1.10%
</div>
<div class="gutter-spacer"></div>
<div class="column-4">
0.60%
</div>
<div class="column-5">
0.60%
</div>
<div class="gutter-spacer"></div>
<div class="column-6">
0.01%
</div>
<div class="column-7">
0.01%
</div>
</div>
<div class="column-1 span-gutter custom-table__header-row">
<div class="column-1 span-gutter">
Balance of $150,000 and over
</div>
<div class="column-2">
0.85%
</div>
<div class="column-3">
0.85%
</div>
<div class="gutter-spacer"></div>
<div class="column-4">
0.55%
</div>
<div class="column-5">
0.55%
</div>
<div class="gutter-spacer"></div>
<div class="column-6">
0.01%
</div>
<div class="column-7">
0.01%
</div>
</div>
</div>
<div class="custom-table__body">
<div class="custom-table__body-empty-row">
<div class="column-1 span-gutter"></div>
<div class="column-2-3"></div>
<div class="column-4-5"></div>
<div class="column-6-7"></div>
</div>
<div class="custom-table__body-title">
<div class="column-1 span-gutter">Qualifications and perks</div>
<div class="column-2-3"></div>
<div class="gutter-spacer"></div>
<div class="column-4-5"></div>
<div class="gutter-spacer"></div>
<div class="column-6-7"></div>
</div>
<div class="custom-table__body-row">
<div class="column-1 span-gutter">Receive e-Statements</div>
<div class="column-2-3">✔️</div>
<div class="column-4-5">✔️</div>
<div class="column-6-7">✔️</div>
</div>
<div class="custom-table__body-row">
<div class="column-1 span-gutter">Minimum 20 every day debit card transactions</div>
<div class="column-2-3">✔️</div>
<div class="column-4-5"></div>
<div class="column-6-7 span-5-rows">
<p>
If you don’t qualify for level 2 or level 3 rewards in a particular month, don’t worry!
<br />
There’s no penalty, no monthly service charge, and you still earn our base interest rate.
<br />
Plus, you can get right back to earning the higher interest rates and ATM service charge refunds the very next month
</p>
</div>
</div>
<div class="custom-table__body-row">
<div class="column-1 span-gutter">Minimum 8 every day debit card transactions</div>
<div class="column-2-3"></div>
<div class="column-4-5">✔️</div>
</div>
<div class="custom-table__body-row">
<div class="column-1 span-gutter">Minimum 4 ACH7 items must post and settle</div>
<div class="column-2-3">✔️</div>
<div class="column-4-5"></div>
</div>
<div class="custom-table__body-row">
<div class="column-1 span-gutter">Minimum 1 bill payment must post and settle</div>
<div class="column-2-3">✔️</div>
<div class="column-4-5"></div>
</div>
<div class="custom-table__body-row">
<div class="column-1 span-gutter">1 ACH7 item OR 1 bill payment must post and settle</div>
<div class="column-2-3"></div>
<div class="column-4-5">✔️</div>
</div>
</div>
</section>Header
Are you a new User? Enroll Now| Online Security
<header id="header" style="background-color: rgba(255, 255, 255, 0);">
<div class="header-inner__wrapper">
<div class="container h-100">
<div class="row h-100 header-row">
<div class="col-6">
<a href="/" role="button" class="header-main__logo">
<img src="/images/default-source/logos/city-bank-logo9674134828a04073b94208396dabda74.svg?sfvrsn=b6d4534f_2" title="city-bank-logo" alt="Main Logo">
</a>
</div>
<div class="col-4 col-sm-5 col-xl-6">
<div class="d-flex city-bank__search-wrapper">
<div class="d-flex city-bank__search-inner">
<div class="vue-app" data-v-app="">
<div class="city-bank__search-box">
<a href="javascript:void(0)" role="button">
<svg class="heroicon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<div id="modal-5ea62fb5-1b98-43eb-8f6a-0e7f1c335b70">
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="d-flex">
<label class="visually-hidden" for="searchInput">Search input</label><input type="text" placeholder="Search" class="form-control" id="searchInput" name="searchInput"><a href="javascript:void(0)" role="button" class="search-close__button btn btn-primary">
<svg class="heroicon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
<div class="search-modal__inner">
<ul class="list-unstyled m-0">
<li>
<div>
<p>Begin typing to start your search.</p>
</div>
</li>
</ul>
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary" role="status" style="display: none;"><span class="visually-hidden">Loading...</span></div>
</div>
</div>
</div><!---->
</div>
</div>
</div>
<div class="modal-backdrop cb-speedbump-backdrop"></div>
</div>
</div>
</div>
</div>
<div class="d-none d-xl-block">
<div>
<div class="sfContentBlock sf-Long-text">
<div class="city-bank__header-links">
<p>
<span>Are you a new User? <a href="https://secure.city.bank/CityBankOnlineAutoEnrollE2E/Enroll.html" target="_blank" data-sf-ec-immutable="">Enroll Now</a></span><span class="px-4 d-none d-xl-inline-block">|</span><span class=" d-none d-xl-inline-block">
<svg class="heroicon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg><a href="/fraud-and-security" data-sf-ec-immutable="">Online Security</a>
</span>
</p>
</div>
</div>
</div>
<div class="vue-app" data-v-app="">
<div class="city-bank__login-form">
<form>
<div class="row g-2 align-items-center justify-content-end">
<div class="col-xl-auto"><label for="Username">Username</label></div>
<div class="col-7"><input type="text" id="Username" name="Username" placeholder="[email protected]" class="form-control" autocomplete="off"></div>
<div class="col-xl-auto col-5 text-start"><button type="submit" class="btn btn-primary"> Sign In </button></div>
</div>
</form>
<form action="https://secure.city.bank/CityBankOnline/uux.aspx" method="post" id="loginForm"><input name="user_id" id="user_id" type="hidden" value=""></form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>Hero
Simple
Welcome to this Amazing Site
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<section class="ls-hero">
<div class="ls-hero__content text-center">
<h1 class="text-primary">Welcome to this Amazing Site</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<button type="button" class="btn btn-primary me-3">Primary</button>
<button type="button" class="btn btn-outline-primary">Outline</button>
</div>
</section>Split
Welcome to this Amazing Site
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<section class="ls-hero ls-hero--split">
<div class="ls-hero__section">
<div class="ls-hero__content">
<h1>Welcome to this <span class="text-primary">Amazing Site</span></h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<button type="button" class="btn btn-primary me-3">Primary</button>
<button type="button" class="btn btn-outline-primary">Outline</button>
</div>
</div>
<div class="ls-hero__section" style="background-image: url('https://source.unsplash.com/600x600/?sky')"></div>
</section>Background Image
Welcome to this Amazing Site
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<section class="ls-hero ls-hero--bg-image" style="
background-image: url('https://source.unsplash.com/1600x900/?mountains');
">
<div class="ls-hero__content">
<h1>Welcome to this Amazing Site</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<button type="button" class="btn btn-light me-3">Primary</button>
<button type="button" class="btn btn-outline-light">Outline</button>
</div>
</section>Login Form
<div class="city-bank__login-form" style="max-width:500px;">
<form>
<div class="row g-2 align-items-center justify-content-end">
<div class="col-xl-auto">
<label for="Username">Username</label>
</div>
<div class="col-7">
<input type="text" id="Username" name="Username" placeholder="[email protected]" class="form-control" autocomplete="off" />
</div>
<div class="col-xl-auto col-5 text-start">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
</form>
<form action="https://secure.city.bank/CityBankOnline/uux.aspx" method="post" id="loginForm">
<input name="user_id" id="user_id" type="hidden" value="" />
</form>
</div>Search Box
<div class="vue-app" data-v-app="">
<div class="city-bank__search-box">
<a href="javascript:void(0)" role="button">
<svg class="heroicon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<div id="modal-fab730fe-93bd-44df-9b47-90e77300c4be">
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="d-flex">
<label class="visually-hidden" for="searchInput">Search input</label><input type="text" placeholder="Search" class="form-control" id="searchInput" name="searchInput"><a href="javascript:void(0)" role="button" class="search-close__button btn btn-primary">
<svg class="heroicon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</a>
</div>
<div class="search-modal__inner">
<ul class="list-unstyled m-0">
<li>
<div>
<p>Begin typing to start your search.</p>
</div>
</li>
</ul>
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary" role="status" style="display: none;"><span class="visually-hidden">Loading...</span></div>
</div>
</div>
</div><!---->
</div>
</div>
</div>
<div class="modal-backdrop cb-speedbump-backdrop"></div>
</div>
</div>
</div>Team
Icons And Names
<section class="ls-team ls-team--icons container-fluid">
<div class="row">
<div class="col-lg-6 ls-team__text">
<h2>Meet our leadership</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
</p>
</div>
<div class="col-lg-6 ls-team__icons">
<div class="ls-team-member">
<div class="ls-team-member__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member__content">
<p class="h3">Soandso Smith</p>
<p class="text-primary">Title orsomething</p>
</div>
</div>
<div class="ls-team-member">
<div class="ls-team-member__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member__content">
<p class="h3">Soandso Smith</p>
<p class="text-primary">Title orsomething</p>
</div>
</div>
<div class="ls-team-member">
<div class="ls-team-member__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member__content">
<p class="h3">Soandso Smith</p>
<p class="text-primary">Title orsomething</p>
</div>
</div>
<div class="ls-team-member">
<div class="ls-team-member__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member__content">
<p class="h3">Soandso Smith</p>
<p class="text-primary">Title orsomething</p>
</div>
</div>
<div class="ls-team-member">
<div class="ls-team-member__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member__content">
<p class="h3">Soandso Smith</p>
<p class="text-primary">Title orsomething</p>
</div>
</div>
<div class="ls-team-member">
<div class="ls-team-member__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member__content">
<p class="h3">Soandso Smith</p>
<p class="text-primary">Title orsomething</p>
</div>
</div>
</div>
</div>
</section>Cards
Meet our team
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
<section class="ls-team ls-team--cards container-fluid">
<div class="row">
<div class="col-12 ls-team__text">
<h2>Meet our team</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="ls-team-member-card">
<div class="ls-team-member-card__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member-card__content">
<p class="h3">Soandso Smith</p>
<div class="ls-team-member-card-content__subtitle">
<p class="subtitle">Title orsomething</p>
<span class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="ls-team-member-card">
<div class="ls-team-member-card__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member-card__content">
<p class="h3">Soandso Smith</p>
<div class="ls-team-member-card-content__subtitle">
<p class="subtitle">Title orsomething</p>
<span class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="ls-team-member-card">
<div class="ls-team-member-card__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member-card__content">
<p class="h3">Soandso Smith</p>
<div class="ls-team-member-card-content__subtitle">
<p class="subtitle">Title orsomething</p>
<span class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
</div>
</div>
</div>
</section>Dark
Meet our team
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
<section class="dark">
<div class="ls-team ls-team--cards container">
<div class="row">
<div class="col-12 ls-team__text">
<h2>Meet our team</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="ls-team-member-card">
<div class="ls-team-member-card__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member-card__content">
<p class="h3">Soandso Smith</p>
<div class="ls-team-member-card-content__subtitle">
<p class="subtitle">Title orsomething</p>
<span class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="ls-team-member-card">
<div class="ls-team-member-card__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member-card__content">
<p class="h3">Soandso Smith</p>
<div class="ls-team-member-card-content__subtitle">
<p class="subtitle">Title orsomething</p>
<span class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="ls-team-member-card">
<div class="ls-team-member-card__image" style="background-image: url('https://source.unsplash.com/400x400/?selfie')"></div>
<div class="ls-team-member-card__content">
<p class="h3">Soandso Smith</p>
<div class="ls-team-member-card-content__subtitle">
<p class="subtitle">Title orsomething</p>
<span class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Testimonials
Slider
Testimonials
"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
Joe Robillard
MBA Full-Stack Developer
"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
Joe Robillard
MBA Full-Stack Developer
"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
Joe Robillard
MBA Full-Stack Developer
<section class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Testimonials</h2>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-lg-9">
<div id="carouselTestimonialExample" class="carousel carousel--card slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card">
<div class="card-body py-0">
<div class="testimonial"><img src="/images/default-source/testimonials/pocketlist.png?sfvrsn=f8715a54_1" alt="pocket list" sf-size="100" class="testimonial_logo" sfref="[images%7COpenAccessDataProvider]c3611a6b-4a10-4061-96dd-71e96082215e" data-sf-ec-immutable="" />
<div class="testimonial_content">"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
</div>
<div class="testimonial_person"><img src="/images/default-source/testimonials/joe-rob.jpg?sfvrsn=9b903c0e_1" sf-size="100" alt="joe robillard" sfref="[images%7COpenAccessDataProvider]02e17066-1171-4ce6-b773-88e74a911c8e" data-sf-ec-immutable="" />
<div>
<p class="testimonial_name">Joe Robillard</p>
<p class="testimonial_job">MBA Full-Stack Developer </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card dark">
<div class="card-body py-0">
<div class="testimonial"><img src="/images/default-source/testimonials/pocketlist.png?sfvrsn=f8715a54_1" alt="pocket list" sf-size="100" class="testimonial_logo" sfref="[images%7COpenAccessDataProvider]c3611a6b-4a10-4061-96dd-71e96082215e" data-sf-ec-immutable="" />
<div class="testimonial_content">"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
</div>
<div class="testimonial_person"><img src="/images/default-source/testimonials/joe-rob.jpg?sfvrsn=9b903c0e_1" sf-size="100" alt="joe robillard" sfref="[images%7COpenAccessDataProvider]02e17066-1171-4ce6-b773-88e74a911c8e" data-sf-ec-immutable="" />
<div>
<p class="testimonial_name">Joe Robillard</p>
<p class="testimonial_job">MBA Full-Stack Developer </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="card-body py-0">
<div class="testimonial"><img src="/images/default-source/testimonials/pocketlist.png?sfvrsn=f8715a54_1" alt="pocket list" sf-size="100" class="testimonial_logo" sfref="[images%7COpenAccessDataProvider]c3611a6b-4a10-4061-96dd-71e96082215e" data-sf-ec-immutable="" />
<div class="testimonial_content">"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
</div>
<div class="testimonial_person"><img src="/images/default-source/testimonials/joe-rob.jpg?sfvrsn=9b903c0e_1" sf-size="100" alt="joe robillard" sfref="[images%7COpenAccessDataProvider]02e17066-1171-4ce6-b773-88e74a911c8e" data-sf-ec-immutable="" />
<div>
<p class="testimonial_name">Joe Robillard</p>
<p class="testimonial_job">MBA Full-Stack Developer </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselTestimonialExample" role="button" data-bs-slide="prev">
<i class="far fa-angle-left" aria-hidden="true"></i>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselTestimonialExample" role="button" data-bs-slide="next">
<i class="far fa-angle-right" aria-hidden="true"></i>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
</section>Cards
What People are Saying About Us
"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
Joe Robillard
MBA Full-Stack Developer
"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
Joe Robillard
MBA Full-Stack Developer
<section class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="text-center">What People are Saying About Us</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card dark">
<div class="card-body py-0">
<div class="testimonial"><img src="/images/default-source/testimonials/pocketlist.png?sfvrsn=f8715a54_1" alt="pocket list" sf-size="100" class="testimonial_logo" sfref="[images%7COpenAccessDataProvider]c3611a6b-4a10-4061-96dd-71e96082215e" data-sf-ec-immutable="" />
<div class="testimonial_content">"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
</div>
<div class="testimonial_person"><img src="/images/default-source/testimonials/joe-rob.jpg?sfvrsn=9b903c0e_1" sf-size="100" alt="joe robillard" sfref="[images%7COpenAccessDataProvider]02e17066-1171-4ce6-b773-88e74a911c8e" data-sf-ec-immutable="" />
<div>
<p class="testimonial_name">Joe Robillard</p>
<p class="testimonial_job">MBA Full-Stack Developer </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body py-0">
<div class="testimonial"><img src="/images/default-source/testimonials/pocketlist.png?sfvrsn=f8715a54_1" alt="pocket list" sf-size="100" class="testimonial_logo" sfref="[images%7COpenAccessDataProvider]c3611a6b-4a10-4061-96dd-71e96082215e" data-sf-ec-immutable="" />
<div class="testimonial_content">"City Bank has consistently provided exceptional service, making banking a seamless and stress-free experience. Their customer support is always prompt and helpful, ensuring all my financial needs are met."
</div>
<div class="testimonial_person"><img src="/images/default-source/testimonials/joe-rob.jpg?sfvrsn=9b903c0e_1" sf-size="100" alt="joe robillard" sfref="[images%7COpenAccessDataProvider]02e17066-1171-4ce6-b773-88e74a911c8e" data-sf-ec-immutable="" />
<div>
<p class="testimonial_name">Joe Robillard</p>
<p class="testimonial_job">MBA Full-Stack Developer </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>