> For the complete documentation index, see [llms.txt](https://www.one.thezero.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.one.thezero.club/guide/theme-styling/helpful-classes.md).

# Helpful classes

### 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. |
| <p><code>.uk-height-small</code> </p><p><code>.uk-height-max-small</code></p>   | These classes apply a height or max-height of *150px*.                                       |
| <p><code>.uk-height-medium</code> </p><p><code>.uk-height-max-medium</code></p> | These classes apply a height or max-height of *300px*.                                       |
| <p><code>.uk-height-large</code> </p><p><code>.uk-height-max-large</code></p>   | 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>