# UX Toolkit r.20241223 - Overview

## Buttons

### Regular (Light) Buttons

Regular anchor Button
Regular anchor Button disabled

### Regular (Light) Alternate Buttons

Regular Alternate anchor Button
Regular Alternate anchor Button disabled

### Dark Buttons

Dark anchor Button
Dark anchor Button disabled

### Details Buttons

Details anchor Button
Details anchor Button disabled

### Primary Buttons

Primary anchor Button
Primary anchor Button disabled

### Secondary Buttons

Secondary anchor Button
Secondary anchor Button disabled

### Styled Buttons

Regular anchor Button
Regular anchor Button disabled

Highlight anchor Button
Highlight anchor Button disabled

Special anchor Button
Special anchor Button disabled

Info anchor Button
Info anchor Button disabled

### Custom Buttons with Various Icons

Custom anchor Button
Custom anchor Button disabled

### Send Buttons

## Fluid Responsive Layout Grid, 12 columns, featuring screens: v=very-small ; s=small ; m=medium ; l=large

1
2
3
4
5
6
7
8
9
10
11
12

This part will occupy 12 columns on a very small screen, 6 on a small, 4 on a medium screen, and 3 on a large screen.

This part will occupy 12 columns on a very small screen, 6 on a small, 8 on a medium screen, and 9 on a large screen.

This part will occupy 12 columns on a very small screen, 6 on a small, 8 on a medium screen, and 9 on a large screen.

1
2
3
4
5
6
7
8
9
10
11
12

## Fluid (Div Based) Responsive Table

Cell 1.1
Another Line
Cell 1.2
Cell 2.1
Cell 2.2 this_is_a_very_long_word_to_display_in_the_table_cell_to_test_the_overflow
Cell 1.1
Cell 1.2
Cell 2.1
Cell 2.2
Another Line

## Misc Tables

### Default Table

# | Make | Model | Year
--- | --- | --- | ---
1 | Honda | Accord | 2009
2 | Toyota | Camry | 2012
3 | Hyundai | Elantra | 2010

### Table using width, alignment, reflow

# | Make | Model | Year
--- | --- | --- | ---
Left | Center | Right | Default
Left | Center | Right | Default
Left | Center | Right | Default

### Bordered Table

# | Make | Model | Year
--- | --- | --- | ---
1 | Honda | Accord | 2009
2 | Toyota | Camry | 2012
3 | Hyundai | Elantra | 2010

### Bordered Table with rowspan

# | Make | Model | Year
--- | --- | --- | ---
1 | Honda | Accord | 2009
Toyota | Camry | 2012
Hyundai | Elantra | 2010

### Bordered Table with colspan

# | Make | Model | Year
--- | --- | --- | ---
1 | Toyota | Camry | 2012
2 | [ redacted ]
3 | Hyundai | Elantra | 2010

### Table with Horizontal Borders

# | Make | Model | Year
--- | --- | --- | ---
1 | Honda | Accord | 2009
2 | Toyota | Camry | 2012
3 | Hyundai | Elantra | 2010

### Striped Table

# | Make | Model | Year
--- | --- | --- | ---
1 | Honda | Accord | 2009
2 | Toyota | Camry | 2012
3 | Hyundai | Elantra | 2010
4 | Ford | Focus | 2008
5 | Nissan | Sentra | 2011
6 | BMW | M3 | 2009
7 | Honda | Civic | 2010
8 | Kia | Soul | 2010

### Nth Child Striped Table

# | Make | Model | Year
--- | --- | --- | ---
1 | Honda | Accord | 2009
2 | Toyota | Camry | 2012
3 | Hyundai | Elantra | 2010
4 | Ford | Focus | 2008
5 | Nissan | Sentra | 2011
6 | BMW | M3 | 2009
7 | Honda | Civic | 2010
8 | Kia | Soul | 2010

### Nested Table

# | Make | Model | Type
--- | --- | --- | ---
1 | Honda | Accord |
Fuel | Year
--- | ---
Diesel | 2009
Petrol | 2009
2 | Toyota | Camry |
Fuel | Year
--- | ---
Diesel | 2012
Petrol | 2012
3 | Hyundai | Elantra |
Fuel | Year
--- | ---
Diesel | 2010
Petrol | 2010

## Form Elements

### Date Input

### Form Elements outside a form, centered

### Form Input normalization

An inline form. Check for alignment and input/select sizing.
This is some text ...

### Default Form

A default inline form. Remember me

### Multi-Column Form with Grids

Legend
First Name
E-Mail * (required)
City
State
I've read the terms and conditions

### Stacked Form

Legend First Name E-Mail
This is a required field.
City
This is another required field.
State
Color I've read the terms and conditions

### Aligned Form

Username
This is a `ux-form-message-inline` field.
Email Address
Here's a button
Supercalifragilistic Label
Remember Me

### Grouped Inputs

### Dynamic Grouped Inputs

### Form Input Sizing

### Invalid Form Inputs

### Disabled Form Inputs

### ReadOnly Form Inputs

### Rounded Form Inputs

Subject Message

### Form XL Fields

### Form Checkboxes and Radios

Here's option one. Here's a radio button. You can choose this one... ...Or this one!

### Form Help text

Last Name
Block help text

### Form Button

Anchor » Link
« Link

### Buttons Group

## Simple Navs

## Menu Bars

MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight
MenuBar Entry One MenuBar Entry Two
MenuBar Entry Three MenuBar Entry Four MenuBar Entry Five
MenuBar Entry Six MenuBar Entry Seven MenuBar Entry Eight

## Menus

### Horizontal Flat Menu

### Vertical Menu, with nested children

DropDown Button

- Area 1
- Link 1.1 Link 1.2
- Area 2
- Link 2.1
- Link 2.2
- Area 3
- Link 3.1 Link 3.2
- Area 4
- Link 4.1
- Link 4.2
- Area 5
- Link 5.2 Link 5.3

DropDown Area

- Area 6
- Link 6.1
- Link 6.2
- Area 7
- Link 7.2 Link 7.3
- Area 8
- Link 8.1 Link 8.2
- Area 9
- Link 9.1
- Link 9.2

## Breadcrumbs

## Tabs

- Tab One
- Tab Two
- Tab Three

#### Tab One (Light)

Tab #1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

#### Tab Two (Light)

Tab #2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

#### Tab Three (Light)

Tab #3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

- Dark Tab One
- Dark Tab Two
- Dark Tab Three

#### Tab One (Dark)

Tab #1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

#### Tab Two (Dark)

Tab #2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

#### Tab Three (Dark)

Tab #3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

## Collapsibles

Open multiple (with Light Theme)

Label One

Area #1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Label Two

Area #2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Label Three

Area #3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Open single (with Dark Theme)

Label One

Area #1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Label Two

Area #2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Label Three

Area #3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

## Step Bars

Browse Compare Order Confirmation Checkout
Browse Compare Order Confirmation Checkout

# # END