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

.kt-col

  • Theme Colours
  • kt-colvib-light
  • kt-colvib
  • kt-colvib-dark

  • kt-col1-lightest
  • kt-col1-lighter
  • kt-col1-light
  • kt-col1
  • kt-col1-dark
  • kt-col1-darker
  • kt-col1-darkest

  • kt-col2-lightest
  • kt-col2-lighter
  • kt-col2-light
  • kt-col2
  • kt-col2-dark
  • kt-col2-darker
  • kt-col2-darkest

  • kt-col3-lightest
  • kt-col3-lighter
  • kt-col3-light
  • kt-col3
  • kt-col3-dark
  • kt-col3-darker
  • kt-col3-darkest
  • Base Colours
  • kt-col-white
  • kt-col-neutral-light
  • kt-col-neutral
  • kt-col-neutral-dark
  • kt-col-black

  • kt-col-warning-light
  • kt-col-warning
  • kt-col-warning-dark

  • kt-col-alert-light
  • kt-col-alert
  • kt-col-alert-dark

  • kt-col-info-light
  • kt-col-info
  • kt-col-info-dark

  • kt-col-success-light
  • kt-col-success
  • kt-col-success-dark

.kaccordion

  • Handle 1

    Panel 1

    Plain old heading and paragraph content.

  • Handle 2

    • How about…
    • … a list …
    • … of items?
  • Handle 3

    An image in a paragraph.

  • Handle 4

    A nested list of items

    • Item 1
    • Item 2
      • Subitem 1
      • Subitem 2
      • Subitem 3
    • Item 3
    • Item 4
    • Item 5

Headings and Text

Heading 1 Strong

Heading 2 Strong

Heading 3 Strong

Heading 4 Strong

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph with class 'large': Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph with class 'small': Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Cite: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.kbox

kbox Head

kbox -light

Heading 1 Strong

Heading 2 Strong

Heading 3 Strong

Heading 4 Strong

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

kbox Mid

Heading 1 Strong

Heading 2 Strong

Heading 3 Strong

Heading 4 Strong

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

kbox -dark

Heading 1 Strong

Heading 2 Strong

Heading 3 Strong

Heading 4 Strong

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

kbox Call To Action

kbox kt-error

kbox kt-success

kbox kt-info

kbox kt-alert

.button

Buttons Sets

Radio Button Sets

Select Menu

Tabs

HTML Markup for these tabs

				    
				<div id="tab-container" class="tab-container">
				  <ul class='etabs'>
				    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
				    <li class='tab'><a href="#tabs1-js">Required JS</a></li>
				    <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
				  </ul>
				  <div id="tabs1-html">
				    <h2>HTML Markup for these tabs</h2>
				    <!-- content -->
				  </div>
				  <div id="tabs1-js">
				    <h2>JS for these tabs</h2>
				    <!-- content -->
				  </div>
				  <div id="tabs1-css">
				    <h2>CSS Styles for these tabs</h2>
				    <!-- content -->
				  </div>
				</div>
				    
				  

The HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, a collection of links for your tabs (an unordered list by default), and matching divs for your tabbed content. Make sure the tab href attributes match the id of the target panel. This is standard semantic markup for in-page anchors.

The class names above are just to make it easy to style. You can make them whatever you want, there's no magic here.

JS for these tabs

				    
				<script src="/javascripts/jquery.js" type="text/javascript"></script>
				<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
				<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>
				    
				  

Optionally include the jquery hashchange plugin (recommended) or address plugin to enable forward- and back-button functionality.

				    
				$('#tab-container').easytabs();
				    
				  

CSS Styles for these tabs

				.etabs { margin: 0; padding: 0; }
				.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
				.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
				.tab a:hover { text-decoration: underline; }
				.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
				.tab a.active { font-weight: bold; }
				.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
				    

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

 www

 up

 subtractarea

 subtract

 search

 refresh

 reception

 print

 play

 phone

 pause

 page

 nextlevel

 mobile

 login

 list

 info

 forward

 favourite

 error

 email

 draw

 down

 deletearea

 compass

 close

 bed

 bath

 basket

 back

 addarea

 add

 home

 google-plus

 twitter

 facebook

 feed

 linkedin

 google

By continuing to use this website you are agreeing to our use of cookies.