Helpful classes
Helpful classes you can use inside Kirby textarea or Kirby Editor.
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 |
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
Last modified 1yr ago