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​

Customizing elements

Next - Guide

Page types

Last modified 1yr ago

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.

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

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.