Icon & Text

Description

Used On

• Bundle
• Course Landing
• Site Landing

Template Markup

<section class="text-icon {% if section.settings.background_color_preset != 'none' %}{{ section.settings.background_color_preset | append: '-section-color-preset' }}{% endif %}" data-preview-item="text-icon">
  <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="text-icon__list">
      {% for block in section.blocks %}
        <div class="text-icon__list-item">
          <i class="fa {{ block.settings.ti_icon }}"></i>
          <h4>{{ block.settings.ti_name }}</h4>
          <p>{{ block.settings.ti_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.text-icon {

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

Schema

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

{
  "label": "Icon & Text",
  "settings": [
    {
      "label": "Headings",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": ""
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": ""
        },
        {
          "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 Icon & Text",
    "limit": 3,
    "types": [
      {
        "type": "icon_text",
        "label": "",
        "settings": [
          {
            "type": "text",
            "id": "ti_icon",
            "label": "Icon"
          },
          {
            "type": "text",
            "id": "ti_name",
            "label": "Name"
          },
          {
            "type": "richtext",
            "id": "ti_body",
            "label": "Text"
          }
        ]
      }
    ],
    "defaults": [
      {
        "type": "icon_text",
        "values": {
          "ti_icon": "fa-gears",
          "ti_name": "Improve your skills",
          "ti_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, nunc ac tincidunt venenatis, mauris elit tempus est, id vulputate ipsum sapien quis nisl. Fusce porta magna mi, eu efficitur velit pulvinar a. Nullam et arcu viverra, tincidunt libero in, efficitur diam."
        }
      },
      {
        "type": "icon_text",
        "values": {
          "ti_icon": "fa-certificate",
          "ti_name": "Expert Instructors",
          "ti_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, nunc ac tincidunt venenatis, mauris elit tempus est, id vulputate ipsum sapien quis nisl. Fusce porta magna mi, eu efficitur velit pulvinar a. Nullam et arcu viverra, tincidunt libero in, efficitur diam."
        }
      },
      {
        "type": "icon_text",
        "values": {
          "ti_icon": "fa-lightbulb-o",
          "ti_name": "Informative",
          "ti_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, nunc ac tincidunt venenatis, mauris elit tempus est, id vulputate ipsum sapien quis nisl. Fusce porta magna mi, eu efficitur velit pulvinar a. Nullam et arcu viverra, tincidunt libero in, efficitur diam."
        }
      }
    ]
  }
}