Zero One Documentation
Search…
Helpful classes
Helpful classes you can use inside Kirby textarea or Kirby Editor.
Button
You can convert any link in
Kirby markdown to the button with these classes Classes to add
Button style.
.uk-button .uk-button-defaultDefault color
.uk-button .uk-button-primaryPrimary color
.uk-button .uk-button-secondarySecondary color
.uk.button .uk-button-dangerIndicates a dangerous or negative action.
.uk-button .uk-button-textApplies an alternative, typographic style.
.uk-button .uk-button-default .uk-button-largeMake button larger
.uk-button .uk-button-default .uk-button-smallMake button smaller
Margin
Padding
Align
Useful for images.
Class
Description
.uk-align-leftFloats the element to the left and creates right and bottom margin.
.uk-align-rightFloats the element to the right and creates the left and bottom margin.
.uk-align-centerCenters the element and creates the bottom margin.
Width
Class
Description
.uk-width-1-1Fills 100% of the available width.
.uk-width-1-2The element takes up halves of its parent container.
.uk-width-1-3 to .uk-width-2-3The element takes up thirds of its parent container.
.uk-width-1-4 to .uk-width-3-4The element takes up fourths of its parent container.
.uk-width-1-5 to .uk-width-4-5The element takes up fifths of its parent container.
.uk-width-1-6 to .uk-width-5-6The element takes up sixths of its parent container.
Height
Class
Description
.uk-height-1-1This class applies a height of 100%. This only works if the parent element has a set height.
.uk-height-small .uk-height-max-smallThese classes apply a height or max-height of 150px.
.uk-height-medium .uk-height-max-mediumThese classes apply a height or max-height of 300px.
.uk-height-large .uk-height-max-largeThese classes apply a height or max-height of 450px.
Utility
Tricks
You can see some examples of how to use these classes at
Last modified 7mo ago