Components

Components are reusable UI elements that follow a certain design language.

Alerts

Klasify provides an easy way to create predefined alert messages

<p class="warning">
  <strong>Warning!</strong> The odds are against you.
</p>

Warning! The odds are against you.

<p class="error">
  <strong>Oh no!</strong> I think something went wrong
</p>

Oh no! I think something went wrong

<p class="success">
  <strong>Our victory assured.</strong> This one's in the bag!
</p>

Our victory assured. This one's in the bag!

Box

A box is a bordered element with some padding around its content. It is similar to a card.

<div class="box">
  <div class="box-header">Basic Box</div>
  <div class="box-body">
    <p> Hello there! My name is Box </p>
    <p> You can put all sorts of things here like images, columns, buttons, and more. </p>
  </div>
  <div class="box-footer">Box Feet</div>
</div>
Basic Box

Hello there! My name is Box

You can put all sorts of things here like images, columns, buttons, and more.

Box Feet

Buttons

Klasify provides four styles of buttons

<button> Quas </button>
<button class="button-lime"> Wex </button>
<button class="button-orange"> Exort </button>
<button class="button-white"> Invoke </button>

You can also set a button to active or disable it

<button class="active">I am active</button>
<button class="disabled" disabled>I am disabled</button>

Card

A card is a flexible and extensible content container. It includes options for image caps, a wide variety of content, contextual background colors, and powerful display options.

<div class="card">
  <div class="card-image" style="background-image: url('flash.jpg')"></div>
  <div class="card-text">
    <h3>The Flash</h3>
    <p>Barry Allen</p>
    <p class="small">Central City</p>
  </div>
</div>

Robin

Damian Wayne

Gotham City

Superman

Kal-El (Clark Kent)

Metropolis

The Flash

Barry Allen

Central City

Similar to headers and footers, cards include top and bottom image caps

<div class="card">
  <div class="card-text">
    <h3>Superman</h3>
    <p>Kal-El (Clark Kent)</p>
  </div>
  <div class="card-image" style="background-image: url('superman.jpg')"></div>
</div>

The order of card-text and card-image determines where the image will be.

Superman

Kal-El (Clark Kent)