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.


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


o-input o-input--base

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


o-checkbox o-checkbox--base

Radio Buttons

o-radio o-radio--base


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



base color
alt color
success color
sm size
md size


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