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-default
Default color
.uk-button .uk-button-primary
Primary color
.uk-button .uk-button-secondary
Secondary color
.uk.button .uk-button-danger
Indicates a dangerous or negative action.
.uk-button .uk-button-text
Applies an alternative, typographic style.
.uk-button .uk-button-default .uk-button-large
Make button larger
.uk-button .uk-button-default .uk-button-small
Make button smaller
Margin
Many useful classes, check https://getuikit.com/docs/margin
Padding
Check https://getuikit.com/docs/padding
Align
Useful for images.
Class
Description
.uk-align-left
Floats the element to the left and creates right and bottom margin.
.uk-align-right
Floats the element to the right and creates the left and bottom margin.
.uk-align-center
Centers the element and creates the bottom margin.
Width
Class
Description
.uk-width-1-1
Fills 100% of the available width.
.uk-width-1-2
The element takes up halves of its parent container.
.uk-width-1-3 to .uk-width-2-3
The element takes up thirds of its parent container.
.uk-width-1-4 to .uk-width-3-4
The element takes up fourths of its parent container.
.uk-width-1-5 to .uk-width-4-5
The element takes up fifths of its parent container.
.uk-width-1-6 to .uk-width-5-6
The element takes up sixths of its parent container.
Height
Class
Description
.uk-height-1-1
This class applies a height of 100%. This only works if the parent element has a set height.
.uk-height-small
.uk-height-max-small
These classes apply a height or max-height of 150px.
.uk-height-medium
.uk-height-max-medium
These classes apply a height or max-height of 300px.
.uk-height-large
.uk-height-max-large
These classes apply a height or max-height of 450px.
Utility
Also, many useful classes can be found at https://getuikit.com/docs/utility
Tricks
You can see some examples of how to use these classes at
Last updated