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

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

Ex: ger, rkm

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

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.

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

Ex: Bos, Zhw

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

Ex: Bos, Zhw, Provo

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

Autocomplete with Badges

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

Autogrow

Buttons

Default Buttons

Size Variations

Larger Large Default Small

Disabled States

Disabled Disabled Disabled Disabled

Rounded Buttons

Round Round Round Round

Connected Buttons

ConnectedConnectedConnected

ConnectedConnectedConnected

Vertically Connected Buttons

Icon Only Buttons

Full-Width Buttons

Different Element Types

Anchor

Anchor

Anchor

Anchor

Anchor

Form

Choose at least 3 of these
Your Gender

Form with No Jump in Field Size

Custom methods can be added to onSubmit event

Your mom’s birth year is before your grandma’s birth year. This doesn’t seem right. Do you want to

Modal

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

Tabs with dark background

Compiled from 107 family trees
Hakan Jonsson

Tabs with badges

...My Title Cotainer Stuff...
...This is longer title Container Stuff...
...A normal title Container Stuff...
...Short Container Stuff...

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

Container #2

Container #2

Container #3

Container #3

Vertical tabs responsive on mobile


Container #1

Container #1

Container #2

Container #2

Container #3

Container #3

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

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.

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?

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

Horizontal Labels

Example of a horizontal table with no breakpoint.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania

Nested Tables

This is an example of a table within a table, which breaks in the 767px to 480px range.
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
Example of a horizontal table with no breakpoint.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania

Nested Tables with Breakpoint @480px

This is an example of a table within a table, which breaks in the 767px to 480px range.
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania
1940 United States Federal Census
Census & Voter Lists

View Image
This is the sub-level table within the parent table, and is a horizontal table.
Name John Smith
Birth about 1937 - Pennsylvania
Residence 1935 - Milford, Delaware
Residence Mount Union, Pennsylvania