# 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"
}
```