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