Helpful classes
Helpful classes you can use inside Kirby textarea or Kirby Editor.
Last updated
Was this helpful?
Helpful classes you can use inside Kirby textarea or Kirby Editor.
Last updated
Was this helpful?
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
Many useful classes, check
Check
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.
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.
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.
You can see some examples of how to use these classes at
Also, many useful classes can be found at