Components

Buttons

Variations of buttons including colours, small, large, block level, two lined, thumbnail and two lined with thumbnail/icon font. All buttons should have at least ONE modifier class on them, the default button colour (as seen on the .c-btn--small and .c-btn--large) is not part of the main colour set, therefore it is advised to use the primary button or another color variation that suits.

Note: <a> elements should be used when a new page is loaded from a button while the <button> elements should be used when a dynamic action is carried out.

Action

.c-btn--primary

Primary button color

Action

.c-btn--danger

Danger button color

Action

.c-btn--warning

Warning button color

Action

.c-btn--success

Success button color

Action

.c-btn--info

Info button color

Action

.c-btn--dark

Dark button color

Action

.c-btn--inverse

Inverse button color

Action

.c-btn--large

Large button

Action

.c-btn--small

Small button

Action

.c-btn--block

Block level button

Action

.is-disabled

Disabled button needs html5 attribute "disabled"

Action

<a class="c-btn [modifier class]" href="#0">Action</a>

Buttons with icon

Button which has an icon font.

<a class="c-btn c-btn--primary" href="#0">
  Register your attendance<span class="ua-icon-group"><span class="u-hidden-text">hidden icon descriptive text</span></span>
</a>

Two line buttons

A button which has two lines of text.

<a class="c-btn c-btn--primary c-btn--two-line" href="#0">
  <span class="c-btn__title">Register</span>
  <span class="c-btn__caption">for more info</span>
</a>

Thumbnail buttons

A button which contains a thumbnail image.

<a class="c-btn c-btn--primary c-btn--thumb" href="#0">
  <div class="c-btn__image">
    <img src="/kss-assets/images/placeholder/100x100.jpg" alt="Placeholder image">
  </div>
  <div class="c-btn__content">
    Register your attendance
  </div>
</a>

Two line thumbnail buttons

A button which has two lines of text and a thumbnail image.

<a class="c-btn c-btn--primary c-btn--thumb c-btn--two-line" href="#0">
  <div class="c-btn__image">
    <img src="/kss-assets/images/placeholder/100x100.jpg" alt="Placeholder image">
  </div>
  <div class="c-btn__content">
    <span class="c-btn__title">Register your attendance</span>
    <span class="c-btn__caption">for a pre-application briefing</span>
  </div>
</a>