Pattern Library

Widgets

The widgets in this pattern library are used to enhance the functionality and interactivity of the user experience. Listed below are the third party front-end tools used in this library.

Accordion

The accordion is a UI component that stack content vertically or horizontally. The stacked content can be hidden or revealed when clicked or selected, independently of each other. An accordion is useful for when screen real estate is limited and you need to display a lot of content. It is also appropriate for when users only need to see specific pieces of content at a time. Consider using another UI component if users need to see most or all of the information on a page or if there isn't enough content to condense.

Best Practices

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

HTML Code Snippet

CSS Code Snippet

#accordion {
	
	margin: 1.3em 0;
}

#accordion .card {
	
	
	border-radius: 0;
	border: 0;
}

#accordion .card-body {
	
	border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-link {
 	font-size: 1.1em;
}

#accordion .card-header {
	
	padding: .2em 1.25em;
}

  
#accordion .card-link::after {
	content: "\e313";
	top: 22px;
	right: 15px;
	position: absolute;
    font-family: "Material Icons";
	font-size: 28px;
	color: #58068c;
	font-weight: 300;
}

#accordion .card-link[aria-expanded="true"]::after {
	content: "\e316";
}

Alert

An alert is a UI component that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Traditional alerts are intended to provide important and potentially time-sensitive information without interfering with the user's ability to continue working. It is crucial that alerts do not affect the keyboard's focus. Alerts can be used as notifications that keep users informed of the status of the system (errors, warnings, and general updates). Alerts can also be used to validate users actions (successfully completed task etc). Consider using a different UI component (confirmation modal dialogue) when a user's a action could be destructive.

Best Practices

HTML Code Snippet

CSS Code Snippet

.alert {
	margin: 1em 0;
	border: 0;
	border-radius: 3px;
	color: #353535;
	font-weight: 500;
	font-size: 1.06em;
	padding: 1.05em 1.95em 1.05em 1.75em;
	-webkit-box-shadow: 0 1px 3px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
  	box-shadow: 0 1px 3px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
	
}

.alert.alert-info {
    background-color: #e7f6f8;
	border-left: 6px solid #00bde3;
}
	
.alert.alert-success {
    background-color: #ecf3ec;
	border-left: 6px solid #00a91c;
	}
	
 .alert.alert-warning {
    background-color: #faf3d1;
	border-left: 6px solid #ffbe2e;
}

.alert.alert-danger {
    background-color: #f4e3db;
	border-left: 6px solid #d63e04;
}

.close { opacity: 1; font-weight: 600; text-shadow:none;}

Date Picker

A date picker component is an input field that allow users to select dates through textual input or an interaction with a calendar overlay.

Best Practices

Modal Window (Dialog)

Modal windows are UI components used to interrupt a user’s current task to draw their full attention to a more important task. A modal dialog is an ideal choice for when there are steps that the user needs to do before a task can be completed (keeps the context).

Best Practices

HTML Code Snippet

CSS Code Snippet

.modal-title {
    margin-bottom: 0.8em;
}

.modal-body {
    font-weight: 400;
    padding: 0 1.5em;
}

.modal-dialog .modal-header {
    border-bottom: none;
    padding: 24px 24px 0;
}


.modal-dialog .modal-body+.modal-footer {
    padding-top: 0;
}

.modal-dialog .modal-footer button {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    width: auto;
	
}


.modal-footer {
	border-top: none;
	padding: 30px 0;
	
}

Tabs

The tab UI component provides an easy way to show large amounts of similar structured data, separated by categories. This pattern is appropriate for situations where there is limited visual space and content needs to be separated into sections.

Best Practices


HTML Code Snippet

CSS Code Snippet

/* Begin Tab Content */

#tabs{
	
	padding: 30px 0;
}

.nav-tabs {
    border-bottom:none;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {
    color: #333;
    background-color: transparent;
    border-color: transparent transparent ;
    border-top: 4px solid #58086c !important;
    font-size: 1em;
    font-weight: 500;
	padding: 12px;
	background: #fff;
	border-radius: 3px;
	
}
.nav-tabs .nav-link {
    border:none;
	padding-top: 1rem;
    border-radius: 0;
    color: #58068c;
 
}

.nav-link {
    display: block;
    padding: .5rem 0;
	margin-right: 2rem;
}

.tab-pane, .tab-content {
	
	padding: 20px 15px;
	background: #fff;
	border-radius: 3px;
	margin-bottom: 35px;
}

/* End Tab Content */

Pagination

This pattern is most applicable when users need to find an item in a large lists items and the items are too numerous to fit on one page. The items are typically ordered and the users are likely to find their desired item somewhere near the start, for example in Search Results where this pattern is most used.

Best Practices

HTML Code Snippet

CSS Code Snippet

ul.page-pagination  {
	margin: 20px 0 20px -4px;
    padding: 0;
    list-style: none;
	display: flex;
	display: -webkit-box;
    display: -ms-flexbox;
	-webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
    -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	overflow: hidden;
	
}

.page-pagination .page-number {
  height: 24px;
  width: 28px;
  font-size: 1em;
  margin-left: 8px;	
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

}  

.page-pagination .selected  {
  
  font-weight: 400;
  color: #fff;
  border-radius: 3px;
  background-color: #58068c;
  width: 28px;
  height: 26px;
  padding: 10px 0 8px;
 
  }

.page-pagination .disabled .material-icons {
  margin-right: 4px;
  color: #666 !important;
  
}

.page-pagination .next, .page-pagination .prev  {
  line-height: 1 !important;
  
}
.page-pagination .next {
	 margin-left: 20px;
}


.page-pagination .prev {
	 margin-right: 15px;
}


.page-pagination .next .material-icons, .page-pagination .prev .material-icons {
	
	color: #58068c;
	font-size: 2.1em;
	display: block;
	
}