Pipeline - Call to Action section

call-to-action.liquid

{%- assign alignment = section.settings.alignment -%}
{%- assign heading = section.settings.title -%}

<div data-section-id="{{ section.id }}" class="{{ section.settings.cta_bg_color }} {{section.settings.alignment}}" style="padding:{{ section.settings.section_padding | times:2 }}em">
  
  {%- if heading != blank -%}
    {% case section.settings.heading_style %}
      {% when 3 %}
        <h1 class="title--flex">{{ heading }}</h1>
      {% when 2 %}
        <h2 class="title--flex home__title">{{ heading }}</h2>
      {% when 1 %}
		{% if section.settings.alignment == "text-center" %}        
          <h4 class="home__subtitle">{{ heading }}</h4>
  		{% else %}
          <h4>{{ heading }}</h4>
  		{% endif %}
    {% endcase %}
  {%- endif -%}

  {% for block in section.blocks %}
    {% unless block.settings.link_text == '' %}

          <a class="{{ block.settings.button_style }}" href="{{ block.settings.link }}">{{ block.settings.link_text | escape }}</a>

    {% endunless %}
  {% endfor %}
  
</div>


{% schema %}
  {
    "name": "Call to action",
    "class": "index-section",
    "max_blocks": 3,
    "settings": [
      {
        "type": "header",
        "content": "Heading"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Title"
      },
      {
        "type": "select",
        "id": "cta_bg_color",
        "label": "Background color",
        "default": "homepage--white",
        "options": [
          { "value": "homepage--white", "label": "White"},
          { "value": "homepage--light", "label": "Light"},
          { "value": "homepage--splash", "label": "Accent"},
          { "value": "homepage--dark", "label": "Dark"}
        ]
      },
      {
        "type": "select",
        "id": "alignment",
        "label": "Alignment",
        "default": "text-center",
        "options": [
          {
            "value": "text-left",
            "label": "Left"
          },
          {
            "value": "text-center",
            "label": "Center"
          },
          {
            "value": "text-right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "range",
        "id": "heading_style",
        "label": "Heading size",
        "min": 1,
        "max": 3,
        "default": 1
      },
      {
        "type": "range",
        "id": "section_padding",
        "label": "Section spacing",
        "min": 1,
        "max": 6,
        "default": 3
      }
    ],
    "blocks": [
    {
      "type": "select",
      "name":	"Button",
      "settings":[
		{
		  "type": "url",
		  "id": "link",
		  "label": "Link"
		},
        {
          "type": "text",
          "id": "link_text",
          "label": "Text",
          "default": "Learn more"
        },
		{
		  "type": "select",
		  "id": "button_style",
		  "label": "Button style",
		  "default": "btn btn--large btn--clear btn--square uppercase",
		  "options": [
			{ "value": "btn btn--large btn--splash uppercase", "label": "Round"},
			{ "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
			{ "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
			{ "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
			{ "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
		  ]
		}
      ]
    }
    ],
    "presets": [
      {
        "name": "Call to Action",
        "category": "Button",
        "blocks": [
          {
            "type": "select"
          }
        ]
      }
    ]
  }
{% endschema %}