html.liquid

{% assign pt = section.settings.padding_top | prepend: 'pt-' %}
{% assign pb = section.settings.padding_bottom | prepend: 'pb-' %}
{% assign mt = section.settings.margin_top | prepend: 'mt-' %}
{% assign mb = section.settings.margin_bottom | prepend: 'mb-' %}

<section 
    id="html-section-{{ section.id }}" 
    class="html-section {% if section.settings.light_bg %}bg-light{% endif %} {{ pt }} {{ pb }} {{ mt }} {{ mb }}">
    <div class="{% if section.settings.container %}container{% else %}container-fluid{% endif %}">

        <div class="heading-wrapper mb-3 overflow-hidden {{ section.settings.heading_alignment }}">

            <h2 class="heading mb-1 {{ section.settings.heading_size }}">
                {{ section.settings.heading }}
            </h2>

            {% unless section.settings.subheading == blank %}
                <div class="subheading rte text-muted {{ section.settings.subheading_size }}">
                    {{ section.settings.subheading }}
                </div>
            {% endunless %}

        </div>

        {{ section.settings.html }}

    </div>
</section>

{% schema %}
{
    "name": "HTML",
    "settings": [
        {
            "type": "textarea",
            "id": "html",
            "label": "HTML",
            "default": "<p class=\"alert alert-info\">Hello world!</p>"
        },
        {
            "type": "header",
            "content": "General settings"
        },
        {
            "type": "text",
            "id": "heading",
            "label": "Heading",
            "info": "Leave empty to disable",
            "default": "HTML"
        },
        {
            "type": "richtext",
            "id": "subheading",
            "label": "Subheading",
            "info": "Leave empty to disable",
            "default": "<p>Write something catchy for this section.</p>"
        },
        {
            "type": "checkbox",
            "id": "container",
            "label": "Wrap in container",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "light_bg",
            "label": "Light background",
            "default": false
        },
        {
            "type": "select",
            "id": "heading_size",
            "label": "Heading size",
            "default": "h2",
            "options": [
                {  "value": "h1", "label": "H1" },
                {  "value": "h2", "label": "H2" },
                {  "value": "h3", "label": "H3" },
                {  "value": "h4", "label": "H4" },
                {  "value": "h5", "label": "H5" },
                {  "value": "h6", "label": "H6" }
            ]
        },
        {
            "type": "select",
            "id": "subheading_size",
            "label": "Subheading size",
            "options": [
                { "value": "", "label": "Normal" },
                { "value": "lead", "label": "Large" }
            ],
            "default": ""
        },
        {
            "type": "select",
            "id": "heading_alignment",
            "label": "Heading alignment",
            "options": [
                { "value": "text-start", "label": "Left" },
                { "value": "text-center", "label": "Center" },
                { "value": "text-end", "label": "Right" }
            ],
            "default": "text-center"
        },
        {
            "type": "header",
            "content": "Spacing",
            "info": "Based on Bootstrap spacing utility classes [Learn more](https://getbootstrap.com/docs/5.0/utilities/spacing/)"
        },
        {
            "type": "range",
            "id": "padding_top",
            "label": "Padding top",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "label": "Padding bottom",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "margin_top",
            "label": "Margin top",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "margin_bottom",
            "label": "Margin bottom",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 7
        }
    ],
    "presets": [
        {
            "name": "HTML",
            "category": "Advanced"
        }
    ]
}
{% endschema %}