UXG Test page

Building form

Buttons

Disabled coloring buttons

Inverted buttons

Dropdown arrow

Button group

Labels & badges

Default Label
Success Label
Warning Label
Alert Label
Info Label
Gray Label
1
2
3
4
5
99+
Above Tip
Below Tip
Left Tip
Right Tip
Colored Tip
Hollow Tip

Headers

h1. This is a very large header.

h2. This is a large header.

h2. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Subeaders

h1.subheader This is a very large header.

h2.subheader This is a large header.

h2.subheader This is a medium header.

h4.subheader This is a moderate header.

h5.subheader This is a small header.
h6.subheader This is a tiny header.

Lists

Unordered list

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Ordered lists

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

Definition lists

Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move.

Blockquotes

Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov

Abbreviations

In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

Code

Remember to escape angle brackets when printing HTML: <div> Mon code </div>

Basic menu + active item

Top bar

Pagination

Breadcrumbs

Cards

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes... Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit. Content Goes Here Content Goes Here

Grid list

A
c-primary
c-primary-perceptive-luminance
bg-primary
bg-primary-light
bg-primary-xlight
bg-primary-dark
A
c-secondary
c-secondary-perceptive-luminance
bg-secondary
bg-secondary-light
bg-secondary-xlight
bg-secondary-dark
A
c-default
c-default-perceptive-luminance
bg-default
bg-default-light
bg-default-xlight
bg-default-dark
A
c-success
c-success-perceptive-luminance
bg-success
bg-success-light
bg-success-xlight
bg-success-dark
A
c-warning
c-warning-perceptive-luminance
bg-warning
bg-warning-light
bg-warning-xlight
bg-warning-dark
A
c-alert
c-alert-perceptive-luminance
bg-alert
bg-alert-light
bg-alert-xlight
bg-alert-dark
A
c-info
c-info-perceptive-luminance
bg-info
bg-info-light
bg-info-xlight
bg-info-dark
A
c-filter
c-filter-perceptive-luminance
bg-filter
bg-filter-light
bg-filter-xlight
bg-filter-dark
A
c-simulation
c-simulation-perceptive-luminance
bg-simulation
bg-simulation-light
bg-simulation-xlight
bg-simulation-dark
A
c-finact
c-finact-perceptive-luminance
bg-finact
bg-finact-light
bg-finact-xlight
bg-finact-dark
A
c-fairways
c-fairways-perceptive-luminance
bg-fairways
bg-fairways-light
bg-fairways-xlight
bg-fairways-dark
A
c-insito
c-insito-perceptive-luminance
bg-insito
bg-insito-light
bg-insito-xlight
bg-insito-dark
A
c-violet
c-violet-perceptive-luminance
bg-violet
bg-violet-light
bg-violet-xlight
bg-violet-dark
A
c-neutral
c-neutral-perceptive-luminance
bg-neutral
bg-neutral-light
bg-neutral-xlight
bg-neutral-dark
A
c-white
c-white-perceptive-luminance
bg-white
bg-white-light
bg-white-xlight
bg-white-dark
A
c-very-light-gray
c-very-light-gray-perceptive-luminance
bg-very-light-gray
bg-very-light-gray-light
bg-very-light-gray-xlight
bg-very-light-gray-dark
A
c-light-gray
c-light-gray-perceptive-luminance
bg-light-gray
bg-light-gray-light
bg-light-gray-xlight
bg-light-gray-dark
A
c-gray
c-gray-perceptive-luminance
bg-gray
bg-gray-light
bg-gray-xlight
bg-gray-dark
A
c-medium-gray
c-medium-gray-perceptive-luminance
bg-medium-gray
bg-medium-gray-light
bg-medium-gray-xlight
bg-medium-gray-dark
A
c-dark-gray
c-dark-gray-perceptive-luminance
bg-dark-gray
bg-dark-gray-light
bg-dark-gray-xlight
bg-dark-gray-dark
A
c-black
c-black-perceptive-luminance
bg-black
bg-black-light
bg-black-xlight
bg-black-dark

Grid list

primary
secondary
default
success
warning
alert
info
filter
simulation
finact
fairways
insito
violet
neutral
white
very-light-gray
light-gray
gray
medium-gray
dark-gray
black

Callouts & notifications

This is a primary callout
This is a secondary callout
This is a success callout
This is a warning callout
This is a alert callout
Notification Primary
Notification Secondary
Notification Info
Notification Success
Notification Warning
Notification Alert
Notification Fairways
Notification Insito
Notification Finact
Notification Filter
Notification Transparent
Notification Simulation

This is just a title

This is just some content

Custom icons

fwico-fx-utils-excel
fwico-fx-utils-simple_risk
fwico-fx-utils-trade
Transaction EDIT
Trade Date 2015-07-01
Principal 1,000,000.00 SEK
Rounding Rule -
Amortization Type Bullet
Transaction EDIT
Start Date 2015-07-01
Maturity Date (Unadjusted) 2017-07-01
Maturity Date 2017-07-01
First Roll Date -