Components

Accordion

Base

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. 

<div class="accordion accordion-flush" id="accordionExample">
    	<div class="accordion-item border-gray-300 bg-gray-light">
    		<h3 class="accordion-header" id="headingOne">
    			<button class="accordion-button bg-gray-light text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    				Accordion Item #1
    			</button>
    		</h3>
    		<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
    			<div class="accordion-body">
    				<p>
    					<strong>This is the first item's accordion body.</strong> It is hidden
    					by default, until the collapse plugin adds the appropriate classes that
    					we use to style each element. These classes control the overall
    					appearance, as well as the showing and hiding via CSS transitions. You
    					can modify any of this with custom CSS or overriding our default
    					variables. It's also worth noting that just about any HTML can go within
    					the <code>.accordion-body</code>, though the transition does limit
    					overflow.
    				</p>
    			</div>
    		</div>
    	</div>
    	<div class="accordion-item border-gray-300 bg-gray-light">
    		<h3 class="accordion-header" id="headingTwo">
    			<button class="accordion-button collapsed bg-gray-light text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    				Accordion Item #2
    			</button>
    		</h3>
    		<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
    			<div class="accordion-body">
    				<p>
    					<strong>This is the second item's accordion body.</strong> It is hidden
    					by default, until the collapse plugin adds the appropriate classes that
    					we use to style each element. These classes control the overall
    					appearance, as well as the showing and hiding via CSS transitions. You
    					can modify any of this with custom CSS or overriding our default
    					variables. It's also worth noting that just about any HTML can go within
    					the <code>.accordion-body</code>, though the transition does limit
    					overflow.
    				</p>
    			</div>
    		</div>
    	</div>
    	<div class="accordion-item border-gray-300 bg-gray-light">
    		<h3 class="accordion-header" id="headingThree">
    			<button class="accordion-button collapsed bg-gray-light text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    				Accordion Item #3
    			</button>
    		</h3>
    		<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
    			<div class="accordion-body">
    				<p>
    					<strong>This is the third item's accordion body.</strong> It is hidden
    					by default, until the collapse plugin adds the appropriate classes that
    					we use to style each element. These classes control the overall
    					appearance, as well as the showing and hiding via CSS transitions. You
    					can modify any of this with custom CSS or overriding our default
    					variables. It's also worth noting that just about any HTML can go within
    					the <code>.accordion-body</code>, though the transition does limit
    					overflow.
    				</p>
    			</div>
    		</div>
    	</div>
    </div>

Alert

<div class="d-flex alert bg-primary fade show w-100 m-0 h-100" role="alert">
	<img src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/Bell.svg" alt="person">
	<div class="px-3">
		<p>primary alert</p>
	</div>
</div>

<div class="d-flex alert bg-secondary fade show w-100 m-0 h-100" role="alert">
	<img src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/Calendar.svg" alt="person">
	<div class="px-3">
		<p>secondary alert</p>
	</div>
</div>

<div class="d-flex alert bg-accent fade show w-100 m-0 h-100" role="alert">
	<img src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/Bells.svg" alt="person">
	<div class="px-3">
		<p>accent alert</p>
	</div>
</div>

<div class="d-flex alert bg-dark fade show w-100 m-0 h-100" role="alert">
	<img src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/Bell.svg" alt="person">
	<div class="px-3">
		<p>dark alert</p>
	</div>
</div>

<div class="d-flex alert bg-light fade show w-100 m-0 h-100" role="alert">
	<img src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/Calendar.svg" alt="person">
	<div class="px-3">
		<p>light alert</p>
	</div>
</div>

Blogpost

Blog Post Card

Man at computer Payment Hub
Feb 21, 2022

Short Blog Title test

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

 
<div class="blog-list">
    	<div class="d-flex h-100 bg-white" style="width: 25rem;">
    		<a class="text-decoration-none" href="#">
    			<div class="blog-image position-relative">
    				<img class="w-100" src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/people_001.jpg" alt="Man at computer">
    				<span class="text-white bg-primary px-3 py-1 position-absolute">Payment Hub</span>
    			</div>
    			<div class="p-5 p-lg-4">
    				<span class="text-dark">Feb 21, 2022</span>
    				<p class="lg text-primary mt-3 mb-2">Short Blog Title test</p>
    				<p class="m-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
    			</div>
    		</a>
    	</div>
    </div>

Blog Post Featured

Man at computer 365 Business Central
Feb 28, 2022

QA Blog Post 123

This is a blog summary.

Continue QA Blog Post 123 
<div class="blog-list">
    	<div class="row featured-post mx-0">
    		<div class="featured-post_blog-image p-0 col-lg-6 order-lg-last position-relative">
    			<img class="w-100" src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/people_001.jpg" alt="Man at computer">
    			<span class="text-white bg-primary px-3 py-1 position-absolute">365 Business Central</span>
    		</div>
    		<div class="col-lg-6 p-0 order-lg-first">
    			<a class="text-decoration-none" href="#">
    				<div class="bg-primary featured-post_content h-100 d-flex flex-column" data-type="365 Business Central">
    					<span class="text-white">Feb 28, 2022</span>
    					<h3 class="lg text-secondary mt-3">QA Blog Post 123</h3>
    					<p class="mt-0 text-white">This is a blog summary.</p>
    					<span class="text-end text-secondary flex-grow-1 d-flex align-items-end justify-content-end">
    						Continue QA Blog Post 123
    						<i class="fas fa-arrow-right ps-2"></i>
    					</span>
    				</div>
    			</a>
    		</div>
    	</div>
    </div>

Buttons

Solid

Primary Secondary Secondary Light Accent Light Dark
<a role="button" href="#" class="btn btn-primary">Primary</a>
    <a role="button" href="#" class="btn btn-secondary">Secondary</a>
    <a role="button" href="#" class="btn btn-secondary-300">Secondary Light</a>
    <a role="button" href="#" class="btn btn-accent">Accent</a>
    <a role="button" href="#" class="btn btn-light">Light</a>
    <a role="button" href="#" class="btn btn-dark">Dark</a>

Outline

Primary Secondary Secondary Light Accent Dark
<a role="button" href="#" class="btn btn-outline-primary">Primary</a>
    <a role="button" href="#" class="btn btn-outline-secondary">Secondary</a>
    <a role="button" href="#" class="btn btn-outline-secondary-300">Secondary Light</a>
    <a role="button" href="#" class="btn btn-outline-accent">Accent</a>
    <a role="button" href="#" class="btn btn-outline-dark">Dark</a>

Cards

Basic

If you decide to copy the markup from here make sure to remove the style attribute from the wrapping element.

image
Reduce processing costs 
<p class="lg">If you decide to copy the markup from here make sure to remove the style attribute from the wrapping element.</p>
    
    <div class="h-100 card bg-white text-center" style="width: 20rem;">
    	<div class="mt-4 pt-2 mb-3 pt-lg-3 mb-lg-4">
    		<img alt="image" src="/design-system/assets/toolkit/images/icons/011-cellphone.svg" />
    	</div>
    	<div class="pb-4 mb-3 mx-3 mb-lg-0 pb-lg-5 px-4 mx-lg-4">
    		<div class="d-block card_content">
    			Reduce processing costs
    		</div>
    	</div>
    </div>

Long Card

image
This will be some test text 
<div class="my-2 card-border-bottom bg-white" style="width: 42rem;">
    	<div class="image-wrapper">
    		<img alt="image" src="/design-system/assets/toolkit/images/icons/011-cellphone.svg" />
    	</div>
    	<div class="content-wrapper">
    		<div class="d-block card_content text-left">
    			This will be some test text
    		</div>
    	</div>
    </div>

Card With Text

Signature icon

Maximize Efficiency & Go Paperless

Our Enhanced ePayment connector is fully integrated with Dynamics GP and Mekorma software. You can continue your AP process with familiar functionality - minus the need to print payments. No more printing of physical checks, laborious hours stuffing envelopes, applying stamps, or paying vendors via snail mail. You retain the option to print physical checks - when you need to - with Mekorma Payment Hubs MICR technology! 

<div class="d-flex" style="width: 40rem;">
    	<img class="justify-content-start h-100 me-2 me-lg-4" src="/design-system/assets/toolkit/images/icons/011-cellphone.svg" alt="Signature icon" title="Signature image">
    	<div class="d-block">
    		<p class="fw-bold lg text-primary mt-0 mb-1 mb-lg-2">Maximize Efficiency &amp; Go Paperless</p>
    		<p class="m-0">
    			Our Enhanced ePayment connector is fully integrated with Dynamics GP and Mekorma software. You can continue your AP process with familiar functionality - minus the need to print payments. No more printing of physical checks, laborious hours stuffing
    			envelopes, applying stamps, or paying vendors via snail mail. You retain the option to print physical checks - when you need to - with Mekorma Payment Hubs MICR technology!
    		</p>
    	</div>
    </div>

Contact Card

support

Phone

U.S. and Canada

888-MEKORMA (635-6762)

International

408-419-4773

<div class="d-flex mb-4 mb-lg-0" style="width: 20rem;">
    	<div class="pe-3 pe-lg-4">
    		<img src="/design-system/assets/toolkit/images/icons/031-support.svg" title="031-support" alt="support">
    	</div>
    	<div>
    		<h3 class="mb-lg-3">Phone</h3>
    		<p class="m-0"><strong>U.S. and Canada</strong></p>
    		<p class="m-0">888-MEKORMA (635-6762)</p>
    		<p class="m-0"><strong>International</strong></p>
    		<p class="m-0">408-419-4773</p>
    	</div>
    </div>

Mekorma Card

The recommended height of the card is 566px. The card will take the height of the image provided in the widget designer, so make sure to keep these consistent when mulitple cards are used in a row.

Industry

Cleaning and Waste Processing Services

Industry

Cleaning and Waste Processing Services

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Action Text 
<div class="hover-card d-flex flex-column position-relative" style="height: 566px; width: 456px; background-image: url('/ResourcePackages/MekormaSite/src/assets/toolkit/images/recycling-01.png'); ">
    	<div class="heading p-2 p-lg-4 position-absolute bottom-0 w-100">
    		<span class="text-secondary text-uppercase"><strong><i class="fa fa-angle-right fs-6 me-1"></i>Industry</strong></span>
    		<h3 class="text-white m-0">Cleaning and Waste Processing Services</h3>
    	</div>
    	<div class="hidden-block p-2 p-lg-4 d-flex flex-column h-100 d-none">
    		<span class="text-secondary text-uppercase"><strong><i class="fa fa-angle-right fs-6 me-1"></i>Industry</strong></span>
    		<h3 class="text-white">Cleaning and Waste Processing Services</h3>
    		<div class="text-white hidden-block_content">
    			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. Duis aute irure dolor in reprehenderit in voluptate
    			velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    			occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    			mollit anim id est laborum.
    		</div>
    		<div class="flex-grow-1 d-flex align-items-end">
    			<a class="btn btn-secondary" target="_self" href="/support">Action Text</a>
    		</div>
    	</div>
    </div>

Checkbox

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

Events

Event Card

Wednesday

Dec 22, 2021

1:00pm-2:00pm CST

Microsoft Dynamics GP

Different Topic Title That is Quite a Bit Longer Than Other Titles

Small blurb that would likely be a description about what is covered in this demo

Webinar

Learn More

 
<div class="event-card d-flex h-100" style="width:28rem;">
    	<div>
    		<div class="event-header">
    			<div class="mb-4 pb-lg-2">
    				<p class="event-day">Wednesday</p>
    				<p>Dec 22, 2021</p>
    			</div>
    			<p id="eventItem0" class="event-time">1:00pm-2:00pm CST</p>
    		</div>
    		<div class="event-body">
    			<h5 class="mb-2">Microsoft Dynamics GP</h5>
    			<p class="event-subtitle">Different Topic Title That is Quite a Bit Longer Than Other Titles</p>
    			<div class="event-blurb mt-3 pt-1 pt-lg-0 mt-lg-4">
    				Small blurb that would likely be a description about what is covered in this demo
    			</div>
    		</div>
    	</div>
    	<div class="event-footer flex-grow-1 align-items-end">
    		<div class="d-flex align-items-center event-icon">
    			<p>Webinar</p>
    
    		</div>
    		<a role="button" aria-label="Different Topic Title That’s Quite a Bit Longer Than Other Titles" href="#">
    			<p>Learn More</p>
    			<i class="fas fa-arrow-right"></i>
    		</a>
    	</div>
    </div>

Event Card With Image

Microsoft Dynamics GP

Tuesday

Jan 04, 2022

Payment Hub and Action Board

Small blurb that would likely be a description about what is covered in this demo, frequently asked questions, what to expect, etc

Webinar

<div class="event-card event-list d-flex h-100" style="width: 28rem;">
    	<div class="thumbnail" style="background-image: url(/ResourcePackages/MekormaSite/src/assets/toolkit/images/people_001.jpg);">
    		<p class="category">Microsoft Dynamics GP</p>
    
    	</div>
    	<div class="event-card_content flex-grow-1">
    		<div class="d-flex flex-column h-100">
    			<div class="event-header mb-4">
    				<div>
    					<p class="event-day">Tuesday</p>
    					<p>Jan 04, 2022</p>
    				</div>
    			</div>
    			<div class="event-body">
    				<p class="event-subtitle mb-2">Payment Hub and Action Board</p>
    				<div class="event-blurb">
    					Small blurb that would likely be a description about what is covered in this demo, frequently asked questions, what to expect, etc
    				</div>
    			</div>
    			<div class="event-footer flex-grow-1 align-items-end">
    				<div class="d-flex event-icon">
    					<p>Webinar</p>
    				</div>
    				<div>
    					<a role="button" class="call-to-action" target="_blank" rel="noopener noreferrer" href="#">
    						Register
    						<i class="fas fa-arrow-right"></i>
    					</a>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

Filter

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

Lists

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
    1. Hey there nested list
  3. Vestibulum auctor dapibus neque.
    • Hey there nested list
  4. 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>

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

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

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>

Team

Member Card

person

Test Person with lots of text

Job Title
This is a small bio paragraph for each member of the leadership team. This will only be 350 characters max, and will only have maybe 55 words maximum. This will not be too terribly long, but now that I am seeing it typed out, I was thinking the other set up for the team members might be best. This is a small bio paragraph for each member of the leader.
Email Location 
<div class="people-list">
    	<div class="d-lg-flex w-100 pb-4 pb-lg-0 bg-white">
    		<div class="people-list_person pb-4 pb-lg-0 mb-2 mb-lg-0">
    			<img src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/people_001.jpg" alt="person">
    		</div>
    		<div class="people-list_person-content bg-white w-100 position-relative pb-2 pb-lg-0">
    			<h3 class="m-0 pb-2 pb-lg-0 fw-normal">Test Person with lots of text</h3>
    			<strong class="text-dark ps-1">Job Title</strong>
    			<div class="d-block">This is a small bio paragraph for each member of the leadership team. This will only be 350 characters max, and will only have maybe 55 words maximum. This will not be too terribly long, but now that I am seeing it typed out, I was thinking the other set up for the team members might be best. This is a small bio paragraph for each member of the leader.</div>
    			<div class="people-list_secondary-details">
    				<span class="text-primary pe-1"><a class="text-decoration-none" href="mailto:Email">Email</a></span> <span class="text-primary border-start border-primary ps-2">Location</span>
    			</div>
    		</div>
    	</div>
    </div>

Testimonial

quotes

This is a test quote.

Name | Position , Company

Location

quotes

56 406504654560564 0 65405 6406540654a 065465465465465 4664656565654 56 406504654560564 0 65405 6406540654a 065465465465465 4664656565654 56 406504654560564 0 65405 6406540654a 065465465465465 4664656565654

lklklkjlkjlkjlkjlkjlkj | poipoipoipoipoipipo , hkjhkjkjhkj hkjjhkjhkj kjhkjhk

kljjlkjljlkjlk

quotes

Mekorma is totally reliable and we know we can always count on them. This is going to look bad if there is a large amount of variance between quote length.

Name Name | Testing , Testing

Lubbock TX

quotes

Mekorma is totally reliable and we know we can always count on them. This is going to look bad if there is a large amount of variance between quote length.

Testing Name | Test , Test

Test Location

<div class="card-quote bg-white border-bottom border-accent border-5 p-5">
	<div class="swiper h-100 w-100 quotesSwiper swiper-initialized swiper-horizontal swiper-pointer-events">
		<div class="swiper-wrapper" style="transform: translate3d(-1725px, 0px, 0px); transition-duration: 0ms;">
			<div class="swiper-slide" style="width: 575px;">
				<div class="quote-container d-flex h-100">
					<div class="quote-icon">
						<img alt="quotes" src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/icons/quote.svg">
					</div>
					<div class="d-flex flex-column justify-content-end position-relative">
						<div class="quote flex-grow-1">
							<p>This is a test quote.</p>
						</div>
						<div>
							<p class="lg author text-primary mb-0">Name | Position , Company</p>
							<p class="location m-0 pb-lg-5">Location</p>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide" style="width: 575px;">
				<div class="quote-container d-flex h-100">
					<div class="quote-icon">
						<img alt="quotes" src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/icons/quote.svg">
					</div>
					<div class="d-flex flex-column justify-content-end position-relative">
						<div class="quote flex-grow-1">
							<p>56 406504654560564 0 65405 6406540654a 065465465465465 4664656565654&nbsp;56 406504654560564 0 65405 6406540654a 065465465465465 4664656565654&nbsp;56 406504654560564 0 65405 6406540654a 065465465465465 4664656565654</p>
						</div>
						<div>
							<p class="lg author text-primary mb-0">lklklkjlkjlkjlkjlkjlkj | poipoipoipoipoipipo , hkjhkjkjhkj hkjjhkjhkj kjhkjhk</p>
							<p class="location m-0 pb-lg-5">kljjlkjljlkjlk</p>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide swiper-slide-prev" style="width: 575px;">
				<div class="quote-container d-flex h-100">
					<div class="quote-icon">
						<img alt="quotes" src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/icons/quote.svg">
					</div>
					<div class="d-flex flex-column justify-content-end position-relative">
						<div class="quote flex-grow-1">
							<p>Mekorma is <strong>totally reliable</strong> and we know we can always count on them. This is going to look bad if there is a large amount of <strong>variance</strong> between quote length.<br><br></p>
						</div>
						<div>
							<p class="lg author text-primary mb-0">Name Name | Testing , Testing</p>
							<p class="location m-0 pb-lg-5">Lubbock TX</p>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide swiper-slide-active" style="width: 575px;">
				<div class="quote-container d-flex h-100">
					<div class="quote-icon">
						<img alt="quotes" src="/ResourcePackages/MekormaSite/src/assets/toolkit/images/icons/quote.svg">
					</div>
					<div class="d-flex flex-column justify-content-end position-relative">
						<div class="quote flex-grow-1">
							<p>Mekorma is totally reliable and we know we can always count on them. This is going to look bad if there is a large amount of variance between quote length.<br></p>
						</div>
						<div>
							<p class="lg author text-primary mb-0">Testing Name | Test , Test</p>
							<p class="location m-0 pb-lg-5">Test Location</p>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>
	</div>
</div>

Text Input

Base

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

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

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

<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 lp-search-input">
    	<input type="text" class="form-control" id="exampleSearchInput" aria-label="Search field" placeholder="Search..." />
    	<button class="btn" type="button">
    		<i class="fas fa-search"></i>
    	</button>
    	<span id='hello' aria-hidden="true" hidden>When autocomplete results are available use up and down arrows to review and enter to select.</span>
    </div>

Textarea

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