Get in touch to talk about your project…

01582 840201

Kui Test Page

This page shows the result of style sheet settings on various theme elements.

Grid

1

2

3

4

5

6

7

8

9

10

11

12

Color

Primary

bg-primary-lightest
bg-primary-lighter
bg-primary-light
bg-primary
bg-primary-dark
bg-primary-darker
bg-primary-darkest

Secondary

bg-secondary-lightest
bg-secondary-lighter
bg-secondary-light
bg-secondary
bg-secondary-dark
bg-secondary-darker
bg-secondary-darkest

Gray

bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900

Success

bg-success-lighter
bg-success

Danger

bg-danger-lighter
bg-danger

Warning

bg-warning-lighter
bg-warning
bg-warning-darker

Info

bg-info-lighter
bg-info

Border - Primary

border-primary-lightest
border-primary-lighter
border-primary-light
border-primary
border-primary-dark
border-primary-darker
border-primary-darkest

Border - Secondary

border-secondary-lightest
border-secondary-lighter
border-secondary-light
border-secondary
border-secondary-dark
border-secondary-darker
border-secondary-darkest

Border - Gray

border-gray-100
border-gray-200
border-gray-300
border-gray-400
border-gray-500
border-gray-600

Fonts

Font Family Base

Base Extra Light (200)
Base Extra Light (200) Italic
Base Light (300)
Base Light (300) Italic
Base Normal (400)
Base Normal (400) Italic
Base Medium (500)
Base Medium (500) Italic
Base Semi Bold (600)
Base Semi Bold (600) Italic
Base Bold (700)
Base Bold (700) Italic
Base Extra Bold (800)
Base Extra Bold (800) Italic
Base Black (900)
Base Black (900) Italic

Font Family Secondary

Secondary Extra Light (200)
Secondary Extra Light (200) Italic
Secondary Light (300)
Secondary Light (300) Italic
Secondary Normal (400)
Secondary Normal (400) Italic
Secondary Medium (500)
Secondary Medium (500) Italic
Secondary Semi Bold (600)
Secondary Semi Bold (600) Italic
Secondary Bold (700)
Secondary Bold (700) Italic
Secondary Extra Bold (800)
Secondary Extra Bold (800) Italic
Secondary Black (900)
Secondary Black (900) Italic

Cards

Primary background

Lightest

H1

H2

H3

H4

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

Lighter

H1

H2

H3

H4

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

Light

H1

H2

H3

H4

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

 

H1

H2

H3

H4

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

Dark

H1

H2

H3

H4

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

Darker

H1

H2

H3

H4

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

Secondary background

Lightest

H1

H2

H3

H4

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

Lighter

H1

H2

H3

H4

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

Light

H1

H2

H3

H4

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

 

H1

H2

H3

H4

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

Dark

H1

H2

H3

H4

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

Darker

H1

H2

H3

H4

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

Alerts

Buttons

.btn

Toggle Buttons

Button Groups

kList

Base

Bullet

  • List item 1 is a longer item to test text wrap
  • List item 2 is a longer item to test text wrap

Bullet -light

  • List item 1
  • List item 2

Bullet Round

  • List item 1
  • List item 2

Bullet Large

  • List item 1
  • List item 2

Bullet Arrow

  • List item 1
  • List item 2

Bullet Arrow Right

  • List item 1
  • List item 2

Blocklist

  • List item 1
  • List item 2

.kicon

Note: not all icons will be provided for every website.

ki-add
ki-article
ki-back
ki-bedrooms
ki-broadband
ki-bullet-arrow
ki-bullet-round
ki-bullet-square
ki-calendar
ki-car-parking
ki-case-study
ki-cleaning
ki-clock-radio
ki-close
ki-cookies
ki-down
ki-email
ki-error
ki-facebook
ki-favourite
ki-feed
ki-file-download
ki-file-excel
ki-file-pdf
ki-file-word
ki-forward
ki-gallery
ki-google-plus
ki-google
ki-grid
ki-hairdryer
ki-home
ki-info
ki-ipad-charging
ki-linen
ki-link
ki-linkedin
ki-list
ki-login
ki-logout
ki-map
ki-menu
ki-mobile
ki-next-level
ki-no-smoking
ki-page
ki-pause
ki-phone
ki-pinterest
ki-play
ki-print
ki-refresh
ki-search
ki-social
ki-subtract
ki-success
ki-television
ki-trash
ki-twitter
ki-up
ki-user
ki-www
ki-youtube