# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.one.thezero.club/guide/theme-styling/helpful-classes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.