# Elements

### **Action**

Displays a dropdown that lets the user choose what action a link takes. Depending on a section it then displays another field for them to direct the action.

```yaml
{
  "type": "action",
  "id": "link_action",
  "label": "Link Action",
  "default": "http://www.kajabi.com"
}
```

### **Assessment**

Displays a dropdown of all the assessments in the users account.

```yaml
{
  "type": "assessment",
  "id": "assessment_id",
  "label": "Assessment"
}
```

### **Checkbox**

Displays a checkbox within the Theme Settings, allowing for a Boolean true / false setting.

```yaml
{
  "type": "checkbox",
  "id": "show",
  "label": "Show",
  "default": "true"
}
```

### **Color**

Displays a color-picker that returns a hex value.

```yaml
{
  "type": "color",
  "label": "Color",
  "id": "color",
  "allow_blank": true
}
```

### **Date Time**

Displays a date\_time picker.

```yaml
{
  "type": "date_time",
  "label": "Date & Time",
  "id": "date_time"
}
```

### **Divider**

Does not display an input but instead shows a divider between other settings. Great for breaking settings into sub sections.

```yaml
{
  "type": "divider"
}
```

### **Event**

Displays a list of the events in the users account.

```yaml
{
  "type": "event",
  "id": "event_id",
  "label": "Select Your Event"
}
```

### **Font Select**

Displays a custom dropdown with google fonts pre loaded in visually in their respective fonts.

```yaml
{
  "type": "font_select",
  "label": "Font Family",
  "id": "font_family",
  "default": "Montserrat",
  "preset": "google_fonts",
  "options": []
}
```

### **Form**

Displays a list of the forms in the users account.

```yaml
{
  "type": "form",
  "id": "form",
  "label": "Form",
  "default": "default",
  "allow_blank": true
}
```

### **Header**

Does not display an input instead displays a heading that can be used to label sub sections. The style setting set to subheading can be used to shrink the font size.

```yaml
{
  "type": "header",
  "content": "Your Heading"
}
```

### **Image Picker**

Displays an option to select a previous image or upload a new image.

```yaml
{
  "type": "image_picker",
  "id": "image",
  "label": "Image",
  "fit": "max",
  "width": 3000,
  "height": 3000
}
```

### **Link List**

Displays a list of the link lists ( navigation menus ) in the users account.

```yaml
{
  "type": "link_list",
  "id": "menu",
  "label": "Menu",
  "default": "footer"
}
```

### **Offer**

Displays a list of the offers in the users account.

```yaml
{
  "type": "offer",
  "id": "offer_id",
  "label": "Offer"
}
```

### **Option**

Displays a list of options for a user to select from.

```yaml
{
  "type": "radio",
  "id": "alignment",
  "label": "Alignment",
  "default": "center",
  "options": [
    {"value": "left", "label": "Left"},
    {"value": "center", "label": "Centered"},
    {"value": "right", "label": "Right"}
  ]
}
```

### **Post**

Displays a list of the posts in a users account.

```yaml
{
  "type": "post",
  "id": "postr_id",
  "label": "Post"
}
```

### **Radio**

Displays a list of radio buttons for the user to select from.

```yaml
{
  "type": "radio",
  "id": "style",
  "label": "Style",
  "default": "solid",
  "options": [
    { "label": "Solid", "value": "solid" },
    { "label": "Outline", "value": "outline" }
  ]
}
```

### **Rich Text**

Displays a full WYSIWYG editor for the user to use to create rich text layouts.

```yaml
{
  "type": "rich_text",
  "label": "Text",
  "id": "text"
}
```

### **Select**

Displays a dropdown select box for the user to choose from.

```yaml
{
  "type": "select",
  "id": "width",
  "label": "width",
  "default": "col-md-6",
  "options": [
    { "value": "col-md-3", "label": "25%" },
    { "value": "col-md-6", "label": "50%" },
    { "value": "col-md-8", "label": "75%" },
    { "value": "col-md-12", "label": "100%" }
  ]
}
```

### **Text**

Displays a one line text input for users to put short text strings in.

```yaml
{
  "type": "text",
  "id": "text",
  "label": "Text",
  "default": "Your Text"
}
```

### **Video**

Displays a video uploader for users to upload their videos or choose recently uploaded videos.

```yaml
{
  "type": "video",
  "id": "video",
  "label": "Video"
}
```


---

# 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://themes.kajabi.com/liquid/core-concepts/elements.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.