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. |
| Default color |
| Primary color |
| Secondary color |
| Indicates a dangerous or negative action. |
| Applies an alternative, typographic style. |
| Make button larger |
| 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 |
| Floats the element to the left and creates right and bottom margin. |
| Floats the element to the right and creates the left and bottom margin. |
| Centers the element and creates the bottom margin. |
Width
Class | Description |
| Fills 100% of the available width. |
| The element takes up halves of its parent container. |
| The element takes up thirds of its parent container. |
| The element takes up fourths of its parent container. |
| The element takes up fifths of its parent container. |
| The element takes up sixths of its parent container. |
Height
Class | Description |
| This class applies a height of 100%. This only works if the parent element has a set height. |
| These classes apply a height or max-height of 150px. |
| These classes apply a height or max-height of 300px. |
| 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