Activity Indicators

Size & Color

On Buttons

Loading Text

Your results are loading

Loading menu

My Name Goes Here

Alert

This is a default alert (warning alert).

This is a success alert. Normally should be set with 'closeable: true' option.

This is an error alert.

This is an info alert.

Multi-line Alert

Alert Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

List Item 1
List Item 2
List Item 3

Default Alert

I am a default alert with one line of text, and was created in the DOM.

Alerts are slim by defualt. This info alert is closeable.

This alert is removed from the DOM when closed. Set options removable: true

Overlay Alert

Overlay alerts should only be used on certain tree viewer or record pages. This alert is typically only used on page load.

I am an overlay alert. I should only be used on certain tree viewer and records pages.

This is a section alert (info). Alert was set with no icon.

Section Alert in `.con`

This is a section alert inside of .con. The alert must be the first element inside .conHeader.

<p class="alert alertInfo alertNoIcon alertSection alertCloseable">Alert content.</p>

Toast Notification

Click below to view toast notifications inside a container. Container must be set to "position: relative".

Autocomplete

Autocomplete Example

Pulling all JSON at once so the results are filtered client-side rather than the default server-side filtration. Also shows how to do a custom callback when a result is selected

Raw JSON - iTunes Ex: ger, rkm

Using the customDisplay method allows you to add custom text next to each of the results.

Custom Display - Names Ex: Ma, Ri, Mariah Molligan

The autocomplete can be used with any type of formatted response. You can convert these custom formats into a standard json format needed for the autocomplete by using the conversionHandler method.

Custom XML Conversion Ex: Joh, Johnik

If you need to inject content before or after the displayed results you can use the onOpen method. These also shows the method alwaysOpenOnFocus

Content Injection Ex: Bos, Zhw

Same source, called as a Group

Pulling all JSON at once so the results are filtered client-side rather than the default server-side filtration. Also shows how to do a custom callback when a result is selected

Grouped 1 Grouped 2 Ex: Bos, Zhw, Provo

Search Names from Pre-loaded data

If you already have the array of results (don't need to ajax), you can use this option.

Ex: Jason, Carl

Autocomplete in a modal

Autocomplete in a callout

Find a person in this tree

Autocomplete with Badges

Capture the "selected" value and create a badge with it

Search for names of FEDs

Autogrow

Buttons

Default Buttons

Vertically Connected Buttons

Icon Only Buttons

Full-Width Buttons

Different Element Types

Anchor

Carousel

Full-width Carousel

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, obcaecati quisquam quibusdam earum distinctio. Fugiat, odit, unde, veniam nemo tempore voluptate tempora enim voluptatem sint eaque quos porro architecto beatae!

Full-width Carousel with Previews

Gallery Carousel

This is a carousel overlay (see Helpers).
This sample carousel uses the .photo for content. This is not part of carousels, but illustrates how a gallery can be easily created.

slidesPerScroll

This is a carousel overlay (see Helpers).
This sample carousel uses the .photo for content. This is not part of carousels, but illustrates how a gallery can be easily created.

Gallery with Previews

This is a carousel overlay (see Helpers).
This sample carousel uses the .photo for content. This is not part of carousels, but illustrates how a gallery can be easily created.

Pagination with Dots

Slideshow

Varied Heights

Load dynamc content with onSlideChange & onSlideLoad.

Infinite Carousel

onAfterSlideChange returns html strings to create new slides.

onAfterSlideChange returns html elements to create new slides.

onAfterSlideChange returns an empty string. New slides are created and added following custom logic within onAfterSlideChange.

Finite Carousel - Used when slides need to be added dynamically to the carousel but the total number of slides is initially unknown (not infinite).

slide 1

slide 2

slide 3

slide 4

slide 5

slide 6

Paging

Simple Hash Change

Custom Hash Change

Simple URL Change

Complex URL Change

Right Aligned Paging with Results per Page Option

per page

Two Sets of (Hash Only Url Change) Pagination Components Bound Together with Callback

This table lists each available setting for the pagination widget.
Id	Lorem
Id	Lorem

URL CHANGE

Server Pagination Creating the Dom with Url Pattern

This table lists each available setting for the pagination widget.
Id	Lorem
Id	Lorem

per page

Tabs

Connected tabs

Content for tab #1

Content for tab #2

Content for tab #3

Page level tabs

...My Title Cotainer Stuff...

...This is longer title Container Stuff...

...A normal title Container Stuff...

...Short Container Stuff...

Container level tabs

Container #1

Container #2

Container #3

Vertical tabs

Container #1

Container #2

Container #3

Vertical tabs responsive on mobile

Container #1

Container #2

Container #3

Anchor tabs

First Title Second Title Third Title

The tabbed version only works on main content containers (con class). This example breaks down in the 320-479px range.

Content for the second tab goes here.

Content for the third tab goes here.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed sapiente, dicta doloremque repellat deleniti quo quae optio. Repudiandae soluta, et, ad quam, obcaecati repellat esse quibusdam est, harum architecto corporis?

Lots of tabs (scrollable)

1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quo fugit maxime sed molestiae atque cum perferendis nisi quae consequatur adipisci voluptatibus libero, doloribus velit quidem voluptatem qui vero earum.

2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quaerat modi consequatur atque enim beatae, neque architecto quod ratione sunt quae sapiente vitae tenetur id at eligendi nobis, accusamus similique.

3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In veniam repellat reiciendis totam, neque soluta excepturi perspiciatis, temporibus consequuntur nihil dolore molestias eos iusto voluptatum placeat nulla at ex incidunt.

4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quam dolorem, culpa impedit voluptas esse animi quo pariatur eaque sint qui repellat. Maiores provident ducimus placeat quisquam officia explicabo enim!

5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint voluptatem, ut odio labore earum amet accusantium voluptate nostrum illum totam, ullam molestiae sequi debitis recusandae natus consectetur quam maxime illo.

6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quisquam quis, dolorum, quaerat possimus inventore repellendus reiciendis accusamus, nihil aut consequatur maiores, nesciunt omnis non laboriosam! Nostrum, dolor, quam. Asperiores.

7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sunt quasi beatae in modi natus repellendus ipsam consequatur, soluta nam, id similique, inventore, repellat praesentium aut. Molestias, aperiam! Nulla, ad.

8 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est deleniti nulla natus eveniet ea nesciunt quas neque esse molestias. Cum, voluptatibus voluptate! Accusantium blanditiis repellendus deleniti cumque, illo, incidunt eaque!

9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus porro, officia quod consequatur dolor aspernatur totam, dolores natus aut veniam, vitae eius labore sapiente adipisci ex quia odio. Molestiae.

Container level tabs

The tabbed version only works on main content containers (con class). This example breaks down in the 320-479px range.

Content for the second tab goes here.

Content for the third tab goes here.

Content for the fourth tab goes here.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tables

Default Tabular Data Example

Example of a standard table with no breakpoint
Full Name	Relationship to You
John Smith	Brother
Samantha Smith	Sister
Joshua McMullin	Cousin
Lohn Smith Has A Really Long Name	Brother
Samantha Smith	Sister
Joshua McMullin	Cousin
John Smith	Brother
Samantha Smith	Sister
Joshua McMullin	Cousin

Sortable Striped Table

Table with Striped Rows.
Sorted by Name	Sort by Count
1790 United States Federal Census	1
1800 United States Federal Census	1
1810 United States Federal Census	14
1830 United States Federal Census	81
1851 Census of Canada East, Canada West, New Brunswick, and Nova Scotia	64
1841 England Census	234
1841 Scotland Census	5

Responsive at 480px

Table that breaks in the 767px-480px range.
Full Name	Relationship to You	Birth Date	Death Date
Full Name	Relationship to You	Birth Date	Death Date
John Smith	Brother	8 October 1980	8 October 2007
Samantha Smith	Sister	12 December 1982	8 October 2007
Joshua McMullin	Cousin	7 January 1978	8 October 2007
Lohn Smith Has A Really Long Name	Brother	8 October 1980	8 October 2007
Samantha Smith	Sister	12 December 1982	8 October 2005
Joshua McMullin	Cousin	7 January 1978	10 October 2007
John Smith	Brother	8 October 1980	11 October 2007
Samantha Smith	Sister	12 December 1982	12 October 2007

Responsive at 320px

Table that breaks in the 320-479px range.
Full Name	Relationship to You	Location
John Smith	Brother	Lehi, UT
Samantha Smith	Sister	Lehi, UT
Joshua McMullin	Cousin	Lehi, UT
LongJohnSmithHasAReallyLongNameLongJohnSmithHasAReallyLongNameLongJohnSmithHasAReallyLongNameLongJohnSmithHasAReallyLongNameLongJohnSmithHasAReallyLongNameLongJohnSmithHasAReallyLongName	Brother	Lehi, UT
Samantha Smith	Sister	Lehi, UT
Joshua McMullin	Cousin	Lehi, UT
John Smith	Brother	Lehi, UT
Samantha Smith	Sister	Lehi, UT
Joshua McMullin	Cousin	Lehi, UT