Definition

name: Hello world
icon: image_text
settings:
- id: title
  label: Title
  type: string
- id: background_image
  label: Background
  type: image_picker
blocks: []

{
  "name": "Hello world",
  "icon": "image_text",
    "settings": [
    {
      "id": "title",
      "label": "Title",
      "type": "string"
    },
    {
      "id": "background_image",
      "label": "Background",
      "type": "image_picker"
    }    
  ],
  "blocks": []
}

---
name: Kitchen Sink
settings:
- label: Title
  id: title
  type: text
---
<h1>{{ section.settings.title }}</h1>

---
name: Kitchen Sink
settings:
- label: Body
  id: body
  type: text
  html: true
---
<h1>Some text typed in a rich text editor</h1>
<div>{{ section.settings.body }}</div>

---
name: Kitchen Sink
settings:
- label: Image
  id: image
  type: image_picker
  compress:
    quality: 0.7
---
<h1>A cat?</h1>
<img src="{{ section.settings.image }}" />
<img src="{{ section.settings.image | resize: '60x60#' }}" />

---
name: Kitchen Sink
settings:
- label: Background image
  id: image
  type: image_picker
  height: '1920'
  width: '1240'
---
<div class="hero-with-banner" style="background-url: url({{ section.settings.image }})">
  <h1>My Hero</h1>
</div>

---
name: Kitchen Sink
settings:
- label: Call to action
  id: cta_link
  type: url
---
<a href="{{ section.settings.cta_link }} {{ section.settings.cta_link.new_window_attribute }}">Get started!</a>

---
name: Kitchen Sink
settings:
- label: Movie category
  id: movie_category
  type: select
  options:
  - label: Drama
    value: Drama
  - label: Fantastic
    value: Fantastic
  - label: Comedy
    value: Comedy
---
<p>Movie category: {{ section.settings.category }}</p>

---
name: Kitchen Sink
settings:
- label: Display title?
  id: has_title
  type: checkbox
---
{% if section.settings.has_title %}
<h1>My awesome site</h1>
{% endif %}

---
name: Kitchen Sink
settings:
- label: Season
  id: season
  type: radio
  options:
  - label: Winter
    value: winter
  - label: Spring
    value: spring
  - label: Summer
    value: summer
  - label: Autumn
    value: autumn
---
<p>
  {% case section.settings.season %}
    {% when 'winter' %}
    <img src="/samples/winter.png" />
  {% when 'spring' %}
    <img src="/samples/spring.png" />
  {% when 'summer' %}
    <img src="/samples/summer.png" />
  {% when 'autumn' %}
    <img src="/samples/autumn.png" />
  {% endcase %}
</p>

---
name: Kitchen Sink
settings:
- label: List of projects
  id: projects
  type: content_type
---
<h1>Nothing displayed, just a shortcut in the editor to the screen managing the projects</h1>

---
name: Kitchen Sink
settings:
- label: Title
  id: title
  type: text
  html: true
  line_break: true
---
<h1>{{ section.settings.title }}</h1>

---
name: Kitchen Sink
settings:
- label: Here is a help displayed in the editor
  id: some_help
  type: hint
---
<h1>Nothing displayed</h1>

blocks:
- name: Menu item
  type: menu_item
  settings:
  - label: Title
    id: title
    type: text
    default: Item
  - label: Url
    id: url
    type: url
    default: "#"

{
     "blocks": [
    {
      "name": "Menu item",
      "type": "menu_item",
      "settings": [
        {
          "label": "Title",
          "id": "title",
          "type": "text",
          "default": "Item"
        },
        {
          "label": "Url",
          "id": "url",
          "type": "url",
          "default": "#"
        }
      ]
    }
  ]
}

dropzone_presets:
- name: Mixed slider
  category: Marketing
  settings:
    title: My slider!
  blocks:
  - type: image_slide
    settings:
      title: 'Slide #1'
      description: Lorem ipsummm
      image: "/samples/bg.png"
  - type: video_slide
    settings:
      title: 'Slide #2'
      video: "//youtube/cat.mov"

{
  "dropzone_presets": [
    {
      "name": "Mixed slider",
      "category": "Marketing",
      "settings": {
        "title": "My slider!"
      },
      "blocks": [
        {
          "type": "image_slide",
          "settings": {
            "title": "Slide #1",
            "description": "Lorem ipsummm",
            "image": "/samples/bg.png"
          }
        },
        {
          "type": "video_slide",
          "settings": {
            "title": "Slide #2",
            "video": "//youtube/cat.mov"
          }
        }
      ]
    }
  ]
}

default:
  settings:
    title: Hero title goes here
    description: A description of the hero
  blocks: []

{
  "default": {
    "settings": {
      "title": "Hero title goes here",
      "description": "A description of the hero"
    },
    "blocks": []
  }
}