Checklist

Description

Used On

• Bundle
• Course Landing
• Site Landing

Template Markup

<section class="checklist {% if section.settings.background_color_preset != 'none' %}{{ section.settings.background_color_preset | append: '-section-color-preset' }}{% endif %}" data-preview-item="checklist">
  <div class="container">

    <div class="section__content">

      {% if section.settings.heading != blank %}
        <h3 class="section__heading">{{ section.settings.heading }}</h3>
        {% if section.settings.subheading != blank %}
          <h4 class="section__subheading">{{ section.settings.subheading }}</h4>
        {% endif %}
      {% endif %}

      <div class="checklist__list">
      {% for block in section.blocks %}
        <div class="checklist__list-item">
          <i class="fa {{ block.settings.item_icon }}"></i>
          <h4>{{ block.settings.item_name }}</h4>
          <p>{{ block.settings.item_body }}</p>
        </div>
      {% endfor %}
      </div>

    </div>

  </div>
</section>

{% style %}
...
{% endstyle %}

{% schema %}
...
{% schema %}

Style

Alignment, Layout & Style modifiers will be encapsulated with {% style %} & {% endstyle %} tags.

section.checklist {

  .section__heading,
  .section__subheading {
    text-align: {{ section.settings.heading_alignment }};
  }
}

Schema

Schema will be encapsulated with {% schema %} & {% endschema %} tags.

{
  "label": "Checklist",
  "settings": [
    {
      "label": "Headings",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "What you'll learn"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Aliquam cursus lectus eget ante suscipit, id lacinia metus ultricies. Phasellus nisl nisi, pretium vitae suscipit a, lacinia eget magna. Sed at molestie metus, et auctor nisl. Donec eget enim dictum, facilisis enim quis, commodo nunc. Nam vehicula est ac tempus tristique. Pellentesque non tincidunt ex. Nulla blandit dapibus nibh eu tempor. Praesent eleifend massa neque, et efficitur risus pretium ac."
        },
        {
          "type": "radio",
          "id": "heading_alignment",
          "label": "Alignment",
          "description": "Headings will inherit the same alignment",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ]
        }
      ]
    },
    {
      "label": "Background",
      "settings": [
        {
          "type": "select",
          "id": "background_color_preset",
          "label": "Color Preset",
          "description": "Presets can be configured in the Colors configuration menu",
          "default": "primary",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "primary", "label": "Primary" },
            { "value": "secondary", "label": "Secondary" },
            { "value": "tertiary", "label": "Tertiary" }
          ]
        }
      ]
    }
  ],
  "blocks": {
    "label": "Add Item",
    "limit": 10,
    "types": [
      {
        "type": "item",
        "label": "",
        "settings": [
          {
            "type": "text",
            "id": "item_icon",
            "label": "",
            "default": "fa-check"
          },
          {
            "type": "text",
            "id": "item_name",
            "label": "Name"
          },
          {
            "type": "richtext",
            "id": "item_body",
            "label": "Description"
          }
        ]
      }
    ],
    "defaults": [
      {
        "type": "item",
        "values": {
          "item_icon": "fa-check",
          "item_name": "Management",
          "item_body": ""
        }
      },
      {
        "type": "item",
        "values": {
          "item_icon": "fa-check",
          "item_name": "Marketing",
          "item_body": ""
        }
      },
      {
        "type": "item",
        "values": {
          "item_icon": "fa-check",
          "item_name": "Branding",
          "item_body": ""
        }
      },
      {
        "type": "item",
        "values": {
          "item_icon": "fa-check",
          "item_name": "Social Media",
          "item_body": ""
        }
      },
      {
        "type": "item",
        "values": {
          "item_icon": "fa-check",
          "item_name": "Email marketing",
          "item_body": ""
        }
      },
      {
        "type": "item",
        "values": {
          "item_icon": "fa-check",
          "item_name": "Leadership",
          "item_body": ""
        }
      }
    ]
  }
}