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.

• Front-end framework: HTML5 + CSS3 + Bootstrap 4
• Fonts and Icons: Google Fonts + Material Icons
• JavaScript library: jQuery 3.2.1
• Calendar: flatpickr4
• Accessibility testing tools: axe for Web | Wave | Colour Contrast Analyser | NYU Recommended Tools

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

• Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse.
• Code header areas in the accordion as buttons. Buttons are the best semantic option, and they assure that accordions are usable with both screen readers and keyboards.
• If the accordion panel associated with an accordion header is visible, the header button element aria-expanded should be set to true. If the panel is not visible, aria-expanded should be set to false.
• Use unique ids. Each button has a unique name aria-controls="id" that associates the control to the appropriate region by referencing the controlled element’s id.

#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

• Be polite. Be polite in error messages — don’t use language that blames the user.
• Use alerts sparingly. Overwhelming users with alerts dilutes their importance and annoys users.
• Use alerts for: Awareness, Error prevention, Imminent problem, Risky action confirmation, Unintended consequence confirmations, Clarifications.
• Allow users to dismiss a notification wherever appropriate.
• Use clear simple language that help users understand what's required of them.
• Use the proper ARIA role. If the message is not interactive, use the ARIA role="alert" to inform assistive technologies of a time-sensitive and important message. If the message is interactive, use the ARIA role="alertdialog"instead.

.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

• Use date formats that are familiar to your users.
• Provide a layout of a calendar where users can navigate years, months and days within one screen.
• Use an accessible label to enclose the date input element.

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

• When a modal is activated, focus MUST be placed on it.
• Once inside a modal, focus MUST be maintained within it.
• The modal MUST be provided with a method to dismiss or close it.
• Once a modal is dismissed or closed, focus MUST return to its trigger.
• Do NOT use modals to show error, success, or warning messages.
• Use modals sparingly. Modals disrupts the user's flow and can take them out of the context of a given task. This can lead to frustration and annoyance.

.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

• Put the most important content in the first tab.
• You should never have only one tab.
• Make sure the controls within a pane (the area that the tab applies to) only affect content in the same pane.
• Don't wrap tabs to a new line.
• Keep your tab names relatively short.
• Do not use when the content inside each pane would function just as well in its own separate page.
• All the tab controls should have an aria role='tab'.
• Each tab control has a unique id and href which is associated with a tab panel’s id.
• Every tab control should have an aria-selected attribute that is set to either true or false.
• All the tab panels should have an aria role='tabpanel'.

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

• The pager navigation SHOULD be placed in a nav element.
• The markup SHOULD include an aria-label="pagination" to describe the type of navigation.
• Add aria-disabled="true" to the link when the link is disabled.
• Add aria-current="page" to the link that points to the current page.
• Identify the current page.
• Space out page links.
• Provide Previous and Next links
• Show first and last page upfront.

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