Objects

Objects (.o-) are the smallest building blocks of a website:

  • Always use (.o-) prefix.
  • Objects cannot contain other modules or components. But can contain other objects
  • They are context independent.

Buttons

The button is an essential element of any design. It's meant to look and behave as an interactive element of your page. This object can be used on anchor links, form buttons, submit inputs, reset submit inputs.

Button colors Class:
btn base o-btn o-btn--base o-btn--inp
btn alt o-btn o-btn--alt o-btn--inp
o-btn o-btn--base o-btn--inp o-btn--squared o-btn--round
o-btn o-btn--alt o-btn--inp o-btn--squared o-btn--round
outlined base o-btn o-btn--base o-btn--inp o-btn--outlined
outlined alt o-btn o-btn--alt o-btn--inp o-btn--outlined
Link transparent o-btn o-btn--transparent
Button sizes Class:
btn inp o-btn o-btn--base o-btn--inp
btn sm o-btn o-btn--base o-btn--sm
btn md o-btn o-btn--base o-btn--md
o-btn o-btn--base o-btn--inp o-btn--round
o-btn o-btn--base o-btn--sm o-btn--round
o-btn o-btn--base o-btn--md o-btn--round
fullwidth inp o-btn o-btn--base o-btn--inp o-btn--fullwidth
fullwidth sm o-btn o-btn--base o-btn--sm o-btn--fullwidth
fullwidth md o-btn o-btn--base o-btn--md o-btn--fullwidth

Inputs

o-input o-input--base

o-input o-input--base o-input--icon

Checkboxes:

o-checkbox o-checkbox--base

Radio Buttons

o-radio o-radio--base

Switches

Switch Class:
o-switch o-switch--base
o-switch o-switch--base
o-switch o-switch--base
o-switch o-switch--alt
o-switch o-switch--alt
o-switch o-switch--alt
o-switch o-switch--opt
o-switch o-switch--opt
o-switch o-switch--opt

Select

Loaders

base color
alt color
success color
sm size
md size

Tables

Cumo.js Variable
border-collapse collapse
padding 3% 4%
min-width 10rem
base [object Object]
This page is generated automatically by C.U.M.O.
Use the force of utility classes, Luke...

©