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

• https://www.one.thezero.club/guide/tricks/kirbytext-link-tag-to-button

• https://www.one.thezero.club/guide/tricks/tricks-with-image-classes