Accordion

First item

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Second item

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Third item

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Alert

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

<div class="alert alert-primary" role="alert">
	<i class="fal fa-bell"></i>
	Primary Alert
	<i class="fal fa-times alert-close-button"></i>
</div>

<div class="alert alert-secondary" role="alert">
	<i class="far fa-star"></i>
	Secondary Alert
	<i class="fal fa-times alert-close-button"></i>
</div>

<div class="alert alert-success" role="alert">
	<i class="far fa-check"></i>
	Success Alert
	<i class="fal fa-times alert-close-button"></i>
</div>

<div class="alert alert-danger" role="alert">
	<i class="fal fa-skull"></i>
	Danger Alert
	<i class="fal fa-times alert-close-button"></i>
</div>

<div class="alert alert-warning" role="alert">
	<i class="far fa-exclamation-triangle"></i>
	Warning Alert
	<i class="fal fa-times alert-close-button"></i>
</div>

<div class="alert alert-blue" role="alert">
	<i class="far fa-info-circle"></i>
	Info Alert
	<i class="fal fa-times alert-close-button"></i>
</div>

Breadcrumb

<nav class="ls-breadcrumb" aria-label="Breadcrumbs">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">Bank</a></li>
		<li class="breadcrumb-item active" aria-current="page">Checking</li>
	</ol>
</nav>

Buttons

Solid

<button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>

Gradient

Colors for the gradients are pulled from the $primary and $secondary color choices.

<button type="button" class="btn btn-gradient-x">Gradient X</button>
    <button type="button" class="btn btn-gradient-y">Gradient Y</button>

Outline

<button type="button" class="btn btn-outline-primary">Outlined Button</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-link">Link</button>

Rounded

The btn-round class can be added to any color and type of button.

<button type="button" class="btn btn-primary btn-round">Solid</button>
    <button type="button" class="btn btn-outline-primary btn-round">Outlined</button>
    <button type="button" class="btn btn-gradient-x btn-round">Gradient X</button>
    <button type="button" class="btn btn-gradient-y btn-round">Gradient Y</button>

Disabled

<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
    <button type="button" class="btn btn-primary btn-round" disabled>Disabled Button</button>

Cards

Simple

You can use Bootstrap helper classes and style tags to get the card looking how you like. Removing or changing these in this example is encouraged.

This is a Title

This is a small paragraph about the the title, which is likely a feature or something prominent to note.

Call to action

<div class="card" style="width: 23rem">
    	<div class="card-body text-center">
    		<p class="h3 card-title">This is a Title</p>
    		<p class="card-text">
    			This is a small paragraph about the the title, which is likely a feature
    			or something prominent to note.
    		</p>
    		<a href="#" target="_self" class="btn btn-outline-primary" aria-label="Customer Sign In">
    			Call to action
    		</a>
    	</div>
    </div>

Overlap

You can use Bootstrap helper classes and style tags to get the card looking how you like. Removing or changing these in this example is encouraged.

First Card Option

Quick takeaway that sums up product USP.

$5 minimum opening balance

No minimum balance and no monthly service fee

Earn interest on entire collected balance

Transaction limitations apply ††

Six withdrawals per calendar month, including in-person, telephone, and electronic. ATM withdrawals are unlimited. ***

<div class="card overlap text-center" style="max-width:32.625rem">
    	<img src="/images/default-source/cards/[email protected]?sfvrsn=39d42e56_2" alt="Platnium@4x">
    	<div class="card-body">
    		<p class="h3 card-title mb-5">First Card Option</p>
    		<div class="card-text">
    			<p class="card-subtitle">Quick takeaway that sums up product USP.</p>
    			<p>$5 minimum opening balance</p>
    			<p>No minimum balance and no monthly service fee</p>
    			<p>Earn interest on entire collected balance</p>
    			<p>Transaction limitations apply ††</p>
    			<p>Six withdrawals per calendar month, including in-person, telephone, and electronic. ATM withdrawals are unlimited. ***</p>
    		</div>
    	</div>
    </div>

Checkbox

Disabled

<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="exampleCheckbox" />
	<label class="form-check-label" for="exampleCheckbox"> Checkbox </label>
</div>
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="exampleDisabledCheckbox" disabled />
	<label class="form-check-label" for="exampleDisabledCheckbox">
		Disabled
	</label>
</div>

Filter

All ATM Drive Thru Lobby Mortgage

<div class="ls-filter" style="max-width: 400px">
	<span class="ls-filter__item active">All</span>
	<span class="ls-filter__item">ATM</span>
	<span class="ls-filter__item">Drive Thru</span>
	<span class="ls-filter__item">Lobby</span>
	<span class="ls-filter__item">Mortgage</span>
</div>

Links

Icon

Link to Somewhere

<a href="#" class="link link-icon">
    	Link to Somewhere<i class="fal fa-angle-right"></i>
    </a>

Icon Left

Link to Somewhere

<a href="#" class="link link-icon link-icon--left">
    	<i class="fal fa-angle-left"></i>Link to Somewhere
    </a>

Lists

Ordered

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
1. Hey there nested list
Vestibulum auctor dapibus neque.
- Hey there nested list
Vestibulum auctor dapibus neque.

<ol>
    	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    	<li>
    		Aliquam tincidunt mauris eu risus.
    		<ol>
    			<li>Hey there nested list</li>
    		</ol>
    	</li>
    	<li>
    		Vestibulum auctor dapibus neque.
    		<ul>
    			<li>Hey there nested list</li>
    		</ul>
    	</li>
    	<li>Vestibulum auctor dapibus neque.</li>
    </ol>

Unordered

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
1. Hey there nested list
Vestibulum auctor dapibus neque.
- Hey there nested list
Vestibulum auctor dapibus neque.

<ul>
    	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    	<li>
    		Aliquam tincidunt mauris eu risus.
    		<ol>
    			<li>Hey there nested list</li>
    		</ol>
    	</li>
    	<li>
    		Vestibulum auctor dapibus neque.
    		<ul>
    			<li>Hey there nested list</li>
    		</ul>
    	</li>
    	<li>Vestibulum auctor dapibus neque.</li>
    </ul>

Icons

Some Title

No overdraft fees. No minimum balance requirements. No monthly service fees. No foreign transaction fees.

<div class="ls-icon-list-item">
    	<div>
    		<i class="fad fa-bezier-curve ls-icon-list-item__icon"></i>
    	</div>
    	<div class="ls-icon-list-item__content">
    		<h3>Some Title</h3>
    		<p>
    			No overdraft fees. No minimum balance requirements. No monthly service
    			fees. No foreign transaction fees.
    		</p>
    	</div>
    </div>

Location

1

Location Title

1234 Address Ln.
Town, ST 12345
123.456.7890

<div class="ls-location">
	<p class="ls-location__number">1</p>
	<h3>Location Title</h3>
	<address>
		1234 Address Ln.<br />
		Town, ST 12345<br />
		<a href="tel:1234567890">123.456.7890</a>
	</address>
</div>

Pagination

Solid

<nav aria-label="Page navigation example">
    	<ul class="pagination">
    		<li class="page-item">
    			<a class="page-link" href="#" aria-label="Previous">
    				<span aria-hidden="true"><i class="far fa-angle-left"></i></span>
    			</a>
    		</li>
    		<li class="page-item active"><a class="page-link" href="#">1</a></li>
    		<li class="page-item"><a class="page-link" href="#">2</a></li>
    		<li class="page-item"><a class="page-link" href="#">3</a></li>
    		<li class="page-item">
    			<a class="page-link" href="#" aria-label="Next">
    				<span aria-hidden="true"><i class="far fa-angle-right"></i></span>
    			</a>
    		</li>
    	</ul>
    </nav>

Outline

<nav aria-label="Page navigation example">
    	<ul class="pagination pagination-outline">
    		<li class="page-item">
    			<a class="page-link" href="#" aria-label="Previous">
    				<span aria-hidden="true"><i class="far fa-angle-left"></i></span>
    			</a>
    		</li>
    		<li class="page-item active"><a class="page-link" href="#">1</a></li>
    		<li class="page-item"><a class="page-link" href="#">2</a></li>
    		<li class="page-item"><a class="page-link" href="#">3</a></li>
    		<li class="page-item">
    			<a class="page-link" href="#" aria-label="Next">
    				<span aria-hidden="true"><i class="far fa-angle-right"></i></span>
    			</a>
    		</li>
    	</ul>
    </nav>

Link

<nav aria-label="Page navigation example">
    	<ul class="pagination pagination-link">
    		<li class="page-item">
    			<a class="page-link" href="#" aria-label="Previous">
    				<span aria-hidden="true"><i class="far fa-angle-left"></i></span>
    			</a>
    		</li>
    		<li class="page-item active"><a class="page-link" href="#">1</a></li>
    		<li class="page-item"><a class="page-link" href="#">2</a></li>
    		<li class="page-item"><a class="page-link" href="#">3</a></li>
    		<li class="page-item">
    			<a class="page-link" href="#" aria-label="Next">
    				<span aria-hidden="true"><i class="far fa-angle-right"></i></span>
    			</a>
    		</li>
    	</ul>
    </nav>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>
	Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
	Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget
	urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor
	mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
	dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus
	auctor fringilla. Donec id elit non mi porta gravida at eget metus.
</p>

Radio

Default radio

Default checked radio

Disabled radio

<div class="form-check">
	<input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio1" />
	<label class="form-check-label" for="exampleRadio1"> Default radio </label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio2" checked />
	<label class="form-check-label" for="exampleRadio2">
		Default checked radio
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio3" disabled />
	<label class="form-check-label" for="exampleRadio3"> Disabled radio </label>
</div>

Range Input

<input type="range" class="form-range" id="rangeInputExample" name="rangeInputExample" min="0" max="100" />

Select

<select class="form-select" aria-label="Default select example">
	<option selected>Open this select menu</option>
	<option value="1">One</option>
	<option value="2">Two</option>
	<option value="3">Three</option>
</select>

Switch

<div class="form-check form-switch">
	<input class="form-check-input" type="checkbox" id="exampleSwitch" />
</div>

Table

Ensure that your tables has the ls-table, table, and table-hover classes on the table element to get this style. All other Bootstrap table classes will work on these tables.

Job Title	Location	Date Posted
Manager of Strategic Initiatives	Austin, Tx	01-05-2021
Marketing Assistant	Dallas, Tx	01-12-2021
Information Technology Manager	Austin, Tx	02-05-2021
Administrative Assistant	Austin, Tx	02-02-2021
Graphic Designer	Dallas, Tx	02-02-2021
Project Manager	Austin, Tx	02-02-2021

<table class="ls-table table table-striped table-hover table-borderless">
	<thead>
		<tr>
			<th scope="col" aria-label="Action Buttons"></th>
			<th scope="col" class="ls-table__title">Job Title</th>
			<th scope="col">Location</th>
			<th scope="col">Date Posted</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="ls-table__actions">
				<a href="#"><i class="fal fa-external-link"></i></a>
			</td>
			<td class="ls-table__title">
				<a href="#">Manager of Strategic Initiatives</a>
			</td>
			<td><a href="#">Austin, Tx</a></td>
			<td><a href="#">01-05-2021</a></td>
		</tr>
		<tr>
			<td class="ls-table__actions">
				<a href="#"><i class="fal fa-external-link"></i></a>
			</td>
			<td class="ls-table__title">
				<a href="#">Marketing Assistant</a>
			</td>
			<td><a href="#">Dallas, Tx</a></td>
			<td><a href="#">01-12-2021</a></td>
		</tr>
		<tr>
			<td class="ls-table__actions">
				<a href="#"><i class="fal fa-external-link"></i></a>
			</td>
			<td class="ls-table__title">
				<a href="#">Information Technology Manager</a>
			</td>
			<td><a href="#">Austin, Tx</a></td>
			<td><a href="#">02-05-2021</a></td>
		</tr>
		<tr>
			<td class="ls-table__actions">
				<a href="#"><i class="fal fa-external-link"></i></a>
			</td>
			<td class="ls-table__title">
				<a href="#">Administrative Assistant</a>
			</td>
			<td><a href="#">Austin, Tx</a></td>
			<td><a href="#">02-02-2021</a></td>
		</tr>
		<tr>
			<td class="ls-table__actions">
				<a href="#"><i class="fal fa-external-link"></i></a>
			</td>
			<td class="ls-table__title">
				<a href="#">Graphic Designer</a>
			</td>
			<td><a href="#">Dallas, Tx</a></td>
			<td><a href="#">02-02-2021</a></td>
		</tr>
		<tr>
			<td class="ls-table__actions">
				<a href="#"><i class="fal fa-external-link"></i></a>
			</td>
			<td class="ls-table__title">
				<a href="#">Project Manager</a>
			</td>
			<td><a href="#">Austin, Tx</a></td>
			<td><a href="#">02-02-2021</a></td>
		</tr>
	</tbody>
</table>

Team

Member

Soandso Smith

Title orsomething

<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>

Member Card

Soandso Smith

Title orsomething

<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>

Testimonial

Ensure that you add a wrapper class to the Content Block widget called testimonial_wrapper

"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

<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>

Text Input

Base

Label

Here is some helper text.

<label for="exampleInput" class="form-label">Label</label>
    <input type="text" class="form-control" id="exampleInput" aria-describedby="exampleInputHelp" placeholder="Placeholder text" />
    <div id="exampleInputHelp" class="form-text">Here is some helper text.</div>

Invalid

Email

A user with this email already exists.

<label for="errorExampleInput" class="form-label">Email</label>
    <input type="email" class="form-control is-invalid" id="errorExampleInput" aria-describedby="errorExampleInputFeedback" required />
    <div id="errorExampleInputFeedback" class="invalid-feedback">
    	A user with this email already exists.
    </div>

Valid

Password

Looks great!

<label for="validExampleInput" class="form-label">Password</label>
    <input type="password" class="form-control is-valid" id="validExampleInput" aria-describedby="validExampleInputFeedback" required />
    <div id="validExampleInputFeedback" class="valid-feedback">Looks great!</div>

Disabled

Name

<label for="disabledExampleInput" class="form-label">Name</label>
    <input type="text" class="form-control" id="disabledExampleInput" placeholder="Full Name" disabled />

Search

<div class="input-group ls-search-input">
    	<button class="btn btn-secondary" type="button">
    		<i class="far fa-paper-plane"></i>
    	</button>
    	<input type="text" class="form-control" id="exampleSearchInput" aria-label="Search field" placeholder="Search..." />
    	<i class="far fa-search ls-search-input__icon"></i>
    </div>

Textarea

Description

<label for="exampleTextarea" class="form-label">Description</label>
<textarea class="form-control" id="exampleTextarea" rows="6"></textarea>

Components

Accordion

Alert

Breadcrumb

Buttons

Solid

Gradient

Outline

Rounded

Disabled

Cards

Simple

Overlap

Checkbox

Filter

Links

Icon

Icon Left

Lists

Ordered

Unordered

Icons

Some Title

Location

Location Title

Pagination

Solid

Outline

Link

Paragraph

Radio

Range Input

Select

Switch

Table

Team

Member

Member Card

Testimonial

Text Input

Base

Invalid

Valid

Disabled

Search

Textarea