Key Information Block: Social Media 

<div class="key-information-block" data-module="keyInformationBlock">
    <div class="grid-x">
        <div class="cell key-information-block__item key-information-block__item--heading">
            <h3 class="key-information-block__title">Explore our social media</h3>
        </div>
        <div class="cell key-information-block__item">
            <div class="key-information-item__icon"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
                    <path d='M12 3.802c2.672 0 2.985.012 4.041.06.977.044 1.505.206 1.858.345.469.183.802.397 1.151.747.35.349.568.682.747 1.15.135.354.302.882.345 1.859.048 1.056.06 1.37.06 4.041 0 2.672-.012 2.985-.06 4.041-.043.977-.206 1.505-.345 1.858a3.103 3.103 0 01-.747 1.151c-.349.35-.682.568-1.15.747-.354.135-.882.301-1.859.345-1.056.048-1.37.06-4.041.06-2.672 0-2.985-.012-4.041-.06-.977-.044-1.505-.206-1.858-.345a3.104 3.104 0 01-1.151-.747 3.055 3.055 0 01-.747-1.15c-.135-.354-.301-.882-.345-1.859-.048-1.056-.06-1.37-.06-4.041 0-2.672.012-2.985.06-4.041.044-.977.206-1.505.345-1.858.183-.469.397-.802.747-1.151.349-.35.682-.568 1.15-.747.354-.135.882-.301 1.859-.345 1.056-.052 1.373-.06 4.041-.06zM12 2c-2.715 0-3.057.012-4.125.06-1.064.047-1.79.218-2.425.464-.66.254-1.215.6-1.77 1.155a4.96 4.96 0 00-1.156 1.77c-.246.636-.417 1.362-.464 2.43C2.012 8.943 2 9.285 2 12c0 2.715.012 3.057.06 4.125.047 1.064.218 1.79.464 2.43.254.658.6 1.214 1.155 1.77a4.961 4.961 0 001.77 1.155c.636.246 1.362.417 2.43.464 1.068.048 1.406.06 4.125.06 2.72 0 3.057-.012 4.125-.06 1.064-.047 1.79-.218 2.43-.464a4.874 4.874 0 001.77-1.155 4.959 4.959 0 001.155-1.77c.246-.636.417-1.363.464-2.43.048-1.068.06-1.406.06-4.125 0-2.72-.012-3.057-.06-4.125-.047-1.064-.218-1.79-.464-2.43a4.873 4.873 0 00-1.155-1.77 4.96 4.96 0 00-1.77-1.155c-.636-.246-1.363-.417-2.43-.464C15.057 2.012 14.715 2 12 2z' />
                    <path d='M12 6.867a5.138 5.138 0 10.002 10.276A5.138 5.138 0 0012 6.867zm0 8.468a3.334 3.334 0 110-6.669 3.334 3.334 0 010 6.669zM17.34 7.859a1.199 1.199 0 100-2.398 1.199 1.199 0 000 2.398z' />
                </svg></div>
            <a class="key-information-item__link" href="#" target="_blank" rel="noopener">Instagram</a>
        </div>
        <div class="cell key-information-block__item">
            <div class="key-information-item__icon"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
                    <path d='M13.24 8.553l.004-1.725c0-.9.063-1.38 1.346-1.38h2.374V2h-3.402c-3.3 0-4.06 1.711-4.06 4.522l.003 2.03L7 8.555V12h2.505v10h3.736l.002-10 3.392-.001L17 8.553h-3.76z' />
                </svg></div>
            <a class="key-information-item__link" href="#" target="_blank" rel="noopener">Facebook</a>
        </div>
        <div class="cell key-information-block__item">
            <div class="key-information-item__icon"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
                    <path d='M22 5.888c-.749.327-1.5.574-2.334.657a4.381 4.381 0 001.833-2.218c-.834.494-1.667.82-2.582.987C18.084 4.494 17 4 15.835 4c-2.253 0-4.086 1.804-4.086 4.02 0 .33 0 .656.085.903C8.416 8.76 5.418 7.2 3.416 4.737c-.417.577-.583 1.314-.583 2.051 0 1.398.749 2.629 1.833 3.366-.667-.084-1.331-.247-1.833-.494v.084c0 1.967 1.416 3.609 3.249 3.939-.332.08-.664.163-1.08.163-.251 0-.502 0-.753-.083.502 1.64 2.002 2.792 3.835 2.792a8.415 8.415 0 01-5.085 1.72c-.332 0-.667 0-.999-.08A11.81 11.81 0 008.25 20c7.585 0 11.667-6.154 11.667-11.487v-.494c.833-.573 1.5-1.31 2.083-2.131z' />
                </svg></div>
            <a class="key-information-item__link" href="#" target="_blank" rel="noopener">Twitter</a>
        </div>
        <div class="cell key-information-block__item">
            <div class="key-information-item__icon"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
                    <path d='M12 2C6.477 2 2 6.477 2 12c0 4.239 2.634 7.86 6.354 9.317-.09-.79-.165-2.008.033-2.873.18-.781 1.169-4.97 1.169-4.97s-.297-.602-.297-1.482c0-1.391.807-2.428 1.811-2.428.856 0 1.267.642 1.267 1.407 0 .856-.543 2.14-.83 3.334-.24.995.501 1.81 1.48 1.81 1.778 0 3.145-1.876 3.145-4.576 0-2.395-1.72-4.066-4.181-4.066-2.848 0-4.519 2.132-4.519 4.338 0 .856.33 1.777.74 2.28.083.098.091.189.067.288-.074.312-.247.995-.28 1.135-.041.181-.148.223-.338.132-1.25-.584-2.033-2.403-2.033-3.877 0-3.152 2.289-6.049 6.61-6.049 3.465 0 6.164 2.47 6.164 5.778 0 3.449-2.173 6.222-5.185 6.222-1.012 0-1.967-.527-2.288-1.152l-.626 2.378c-.222.873-.83 1.96-1.242 2.626.938.288 1.925.445 2.962.445 5.523 0 10-4.478 10-10A9.98 9.98 0 0012 2z' />
                </svg></div>
            <a class="key-information-item__link" href="#" target="_blank" rel="noopener">Pinterest</a>
        </div>
    </div>
</div>
 
<div class="key-information-block" data-module="keyInformationBlock">
    <div class="grid-x">
        {{#if title}}
            <div class="cell key-information-block__item key-information-block__item--heading">
                <h3 class="key-information-block__title">{{title}}</h3>
            </div>
        {{/if}}
        {{#if address}}
            <div class="cell key-information-block__item"><div class="key-information-item__icon"><svg xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 5c-2.669 0-5 2.426-5 5.636 0 .9.309 1.947.84 3.06.526 1.104 1.238 2.205 1.965 3.193a32.821 32.821 0 002.191 2.656l.195-.216a33.808 33.808 0 002.003-2.466c.728-.993 1.44-2.097 1.966-3.198.532-1.113.84-2.15.84-3.029C17 7.426 14.669 5 12 5zm0 16l-.703.711-.006-.006-.015-.015-.055-.055a31.929 31.929 0 01-.902-.962 34.826 34.826 0 01-2.124-2.598c-.773-1.049-1.561-2.262-2.16-3.518C5.44 13.312 5 11.955 5 10.636 5 6.516 8.042 3 12 3s7 3.516 7 7.636c0 1.303-.442 2.652-1.035 3.892-.599 1.251-1.387 2.466-2.159 3.518a35.798 35.798 0 01-3.023 3.584l-.055.056-.014.015-.006.005L12 21zm0 0l.707.707a1 1 0 01-1.41.004L12 21z"></path></svg></div><div class="key-information-item__title">{{address}}</div></div>
        {{/if}}
        {{#if telephone}}
            <div class="cell key-information-block__item"><div class="key-information-item__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.495 18.111c-.424-.72-.964-1.44-1.503-2.084-.309-.379-.655-.758-1.08-1.023-.5-.265-1.232-.417-1.733-.076-.232.152-.424.266-.656.417-.192.152-.423.265-.616.417-.578.379-1.08.152-1.503-.265-1.08-1.023-2.12-2.084-3.045-3.259-.347-.417-2.389-2.652-1.81-3.22.038-.039.076-.077.115-.114l.27-.266.539-.53.54-.53c.424-.418.424-1.175.27-1.706-.155-.455-.502-.871-.81-1.25-.54-.644-1.156-1.326-1.811-1.857-.463-.379-1.002-.72-1.58-.758a1.374 1.374 0 00-1.002.303c-.193.152-.386.341-.578.53-.617.645-1.08 1.516-1.31 2.35a5.268 5.268 0 00-.155 2.046c.154 1.781.925 3.335 1.85 4.813 1.002 1.629 2.12 3.22 3.391 4.66 1.812 2.009 4.201 4.282 6.899 5.04.655.19 1.387.303 2.08.227.887-.038 1.812-.34 2.583-.796.23-.151.462-.303.655-.454.27-.227.462-.569.5-.91.04-.644-.192-1.212-.5-1.705z"></path></svg></div><div class="key-information-item__title">{{telephone}}</div></div>
        {{/if}}
        {{#if items}}
            {{#each items}}
                <div class="cell key-information-block__item">
                    {{#if link}}
                        {{> @cp-key-information-link }}
                    {{else}}
                        {{> @cp-key-information-item }}
                    {{/if}}
                </div>
            {{/each}}
        {{/if}}
        {{#if button}}
            <div class="cell key-information-block__item">
                {{> @cp-button-primary target=button.target url=button.url text=button.text modifier="with-icon-external" }}
            </div>
        {{/if}}
    </div>
</div>
 
{
  "title": "Explore our social media",
  "items": [
    {
      "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.802c2.672 0 2.985.012 4.041.06.977.044 1.505.206 1.858.345.469.183.802.397 1.151.747.35.349.568.682.747 1.15.135.354.302.882.345 1.859.048 1.056.06 1.37.06 4.041 0 2.672-.012 2.985-.06 4.041-.043.977-.206 1.505-.345 1.858a3.103 3.103 0 01-.747 1.151c-.349.35-.682.568-1.15.747-.354.135-.882.301-1.859.345-1.056.048-1.37.06-4.041.06-2.672 0-2.985-.012-4.041-.06-.977-.044-1.505-.206-1.858-.345a3.104 3.104 0 01-1.151-.747 3.055 3.055 0 01-.747-1.15c-.135-.354-.301-.882-.345-1.859-.048-1.056-.06-1.37-.06-4.041 0-2.672.012-2.985.06-4.041.044-.977.206-1.505.345-1.858.183-.469.397-.802.747-1.151.349-.35.682-.568 1.15-.747.354-.135.882-.301 1.859-.345 1.056-.052 1.373-.06 4.041-.06zM12 2c-2.715 0-3.057.012-4.125.06-1.064.047-1.79.218-2.425.464-.66.254-1.215.6-1.77 1.155a4.96 4.96 0 00-1.156 1.77c-.246.636-.417 1.362-.464 2.43C2.012 8.943 2 9.285 2 12c0 2.715.012 3.057.06 4.125.047 1.064.218 1.79.464 2.43.254.658.6 1.214 1.155 1.77a4.961 4.961 0 001.77 1.155c.636.246 1.362.417 2.43.464 1.068.048 1.406.06 4.125.06 2.72 0 3.057-.012 4.125-.06 1.064-.047 1.79-.218 2.43-.464a4.874 4.874 0 001.77-1.155 4.959 4.959 0 001.155-1.77c.246-.636.417-1.363.464-2.43.048-1.068.06-1.406.06-4.125 0-2.72-.012-3.057-.06-4.125-.047-1.064-.218-1.79-.464-2.43a4.873 4.873 0 00-1.155-1.77 4.96 4.96 0 00-1.77-1.155c-.636-.246-1.363-.417-2.43-.464C15.057 2.012 14.715 2 12 2z' /><path d='M12 6.867a5.138 5.138 0 10.002 10.276A5.138 5.138 0 0012 6.867zm0 8.468a3.334 3.334 0 110-6.669 3.334 3.334 0 010 6.669zM17.34 7.859a1.199 1.199 0 100-2.398 1.199 1.199 0 000 2.398z'/></svg>",
      "link": {
        "text": "Instagram",
        "url": "#",
        "isExternal": true,
        "target": "_blank",
        "isEmail": false
      }
    },
    {
      "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.24 8.553l.004-1.725c0-.9.063-1.38 1.346-1.38h2.374V2h-3.402c-3.3 0-4.06 1.711-4.06 4.522l.003 2.03L7 8.555V12h2.505v10h3.736l.002-10 3.392-.001L17 8.553h-3.76z'/></svg>",
      "link": {
        "text": "Facebook",
        "url": "#",
        "isExternal": true,
        "target": "_blank",
        "isEmail": false
      }
    },
    {
      "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 5.888c-.749.327-1.5.574-2.334.657a4.381 4.381 0 001.833-2.218c-.834.494-1.667.82-2.582.987C18.084 4.494 17 4 15.835 4c-2.253 0-4.086 1.804-4.086 4.02 0 .33 0 .656.085.903C8.416 8.76 5.418 7.2 3.416 4.737c-.417.577-.583 1.314-.583 2.051 0 1.398.749 2.629 1.833 3.366-.667-.084-1.331-.247-1.833-.494v.084c0 1.967 1.416 3.609 3.249 3.939-.332.08-.664.163-1.08.163-.251 0-.502 0-.753-.083.502 1.64 2.002 2.792 3.835 2.792a8.415 8.415 0 01-5.085 1.72c-.332 0-.667 0-.999-.08A11.81 11.81 0 008.25 20c7.585 0 11.667-6.154 11.667-11.487v-.494c.833-.573 1.5-1.31 2.083-2.131z' /></svg>",
      "link": {
        "text": "Twitter",
        "url": "#",
        "isExternal": true,
        "target": "_blank"
      }
    },
    {
      "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.477 2 2 6.477 2 12c0 4.239 2.634 7.86 6.354 9.317-.09-.79-.165-2.008.033-2.873.18-.781 1.169-4.97 1.169-4.97s-.297-.602-.297-1.482c0-1.391.807-2.428 1.811-2.428.856 0 1.267.642 1.267 1.407 0 .856-.543 2.14-.83 3.334-.24.995.501 1.81 1.48 1.81 1.778 0 3.145-1.876 3.145-4.576 0-2.395-1.72-4.066-4.181-4.066-2.848 0-4.519 2.132-4.519 4.338 0 .856.33 1.777.74 2.28.083.098.091.189.067.288-.074.312-.247.995-.28 1.135-.041.181-.148.223-.338.132-1.25-.584-2.033-2.403-2.033-3.877 0-3.152 2.289-6.049 6.61-6.049 3.465 0 6.164 2.47 6.164 5.778 0 3.449-2.173 6.222-5.185 6.222-1.012 0-1.967-.527-2.288-1.152l-.626 2.378c-.222.873-.83 1.96-1.242 2.626.938.288 1.925.445 2.962.445 5.523 0 10-4.478 10-10A9.98 9.98 0 0012 2z'/></svg>",
      "link": {
        "text": "Pinterest",
        "url": "#",
        "isExternal": true,
        "target": "_blank",
        "isEmail": false
      }
    }
  ]
}

There are no notes for this item.