@coopdigital/shared-component--membership/src/membership.html

Co-op Shared Component: Membership

{% macro render(content, cms, config = {}) %}
<aside class="coop-c-membershipmodule">
  <div class="coop-c-membershipmodule__inner coop-u-clearfix">
    <article class="coop-c-membershipmodule__content">
      {% if content.heading %}
        <header class="coop-c-membershipmodule__header">
          <h3 class="coop-c-membershipmodule__title">
            {{content.heading}}
          </h3>
        </header>
      {% endif %}
      {% if content.bodyText %}
        <div class="coop-c-membershipmodule__body">
          {{content.bodyText|markdown}}
        </div>
      {% endif %}
      <div class="coop-c-membershipmodule__btns">
        {% if content.button %}
          {% with button = cms.get_entry(content.button.sys.id) %}
            <p>
              <a href="{{button.fields.url.data}}" class="coop-btn coop-btn--primary" data-contenttype="Membership module" data-contentparent="{{content.heading}}" data-linktext="{{button.fields.title.data|safe}}">
                {{button.fields.title.data|safe}}
              </a>
            </p>
          {% endwith %}
        {% endif %}
      </div>
      <div class="coop-c-membershipmodule__links">
        {% if content.links|length == 1 %}
          {% with linkEntry = cms.get_entry(content.links[0].sys.id) %}
            {% if linkEntry.data.fields.page %}
              {% set url = cms.get_entry(linkEntry.data.fields.page.sys.id).full_url_path %}
            {% else %}
              {% set url = linkEntry.fields.url.data %}
            {% endif %}
            <p>
              <a href="{{url}}" data-contenttype="Membership module" data-contentparent="{{content.heading}}" data-linktext="{{linkEntry.fields.title.data|safe}}">
                {{linkEntry.fields.title.data|markdown}}
              </a>
            </p>
          {% endwith %}
        {% else %}
          <ul class="coop-c-membershipmodule__list">
            {% for membershipLink in content.links %}
              {% with linkEntry = cms.get_entry(membershipLink.sys.id) %}
                {% if linkEntry.data.fields.page %}
                  {% set url = cms.get_entry(linkEntry.data.fields.page.sys.id).full_url_path %}
                {% else %}
                  {% set url = linkEntry.fields.url.data %}
                {% endif %}
                <li class="coop-c-membershipmodule__item">
                  <a class="coop-c-membershipmodule__link" href="{{url}}" data-contenttype="Membership module" data-contentparent="{{content.heading}}" data-linktext="{{linkEntry.fields.title.data|safe}}">
                    {{linkEntry.fields.title.data|safe}}
                  </a>
                </li>
              {% endwith %}
            {% endfor %}
          </ul>
        {% endif %}
      </div>
  </article>

    <div class="coop-c-membershipmodule__media">
      <svg class="coop-c-membershipmodule__graphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 224" aria-hidden="true" focusable="false">
        <path class="coop-c-membershipmodule__card" d="M145 224H5c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h140c2.76 0 5 2.24 5 5v214c0 2.76-2.24 5-5 5z"/>
        <path class="coop-c-membershipmodule__logo" d="M122.24 34.91c-1.36-4.34-4.62-7.87-8.82-9.5a39.794 39.794 0 00-26.34 0c-4.34 1.63-7.6 5.16-8.82 9.5a40.272 40.272 0 000 21.99c1.36 4.34 4.62 7.87 8.82 9.5 4.21 1.49 8.69 2.31 13.17 2.17 4.48 0 8.96-.81 13.17-2.17 4.34-1.63 7.6-5.16 8.82-9.5.95-3.67 1.49-7.33 1.49-11s-.54-7.33-1.49-10.99zM108.67 51.2c-.68 2.31-2.72 4.07-5.16 4.62-2.31.41-4.62.41-6.79 0-2.44-.41-4.34-2.17-5.16-4.62a17.98 17.98 0 010-10.72c.68-2.31 2.72-4.07 5.16-4.62 2.31-.41 4.62-.41 6.79 0 2.44.41 4.34 2.17 5.16 4.62.54 1.76.81 3.67.81 5.43s-.27 3.66-.81 5.29zM71.61 83.64c-1.36-4.34-4.62-7.87-8.82-9.5a39.794 39.794 0 00-26.34 0c-4.34 1.63-7.6 5.16-8.82 9.5a40.272 40.272 0 000 21.99c1.36 4.34 4.62 7.87 8.82 9.5a39.794 39.794 0 0026.34 0c4.21-1.49 7.6-5.02 8.82-9.5a40.462 40.462 0 000-21.99zm-13.58 16.43c-.68 2.31-2.72 4.07-5.16 4.62-2.31.41-4.62.41-6.79 0-2.44-.41-4.34-2.17-5.16-4.62a17.98 17.98 0 010-10.72c.68-2.31 2.72-4.07 5.16-4.62 2.31-.41 4.62-.41 6.79 0 2.44.41 4.34 2.17 5.16 4.62.54 1.76.81 3.53.81 5.43.01 1.76-.27 3.66-.81 5.29zm.82-54.3H73.1c0-3.67-.54-7.33-1.49-10.86-1.36-4.34-4.62-7.87-8.82-9.5a39.794 39.794 0 00-26.34 0c-4.34 1.63-7.6 5.16-8.82 9.5a40.272 40.272 0 000 21.99c1.36 4.34 4.62 7.87 8.82 9.5 4.21 1.49 8.69 2.17 13.17 2.17s8.96-.81 13.17-2.17c4.34-1.63 7.6-5.16 8.82-9.5.14-.54.27-1.22.54-1.9l-13.44-6.24c-.14.81-.27 1.63-.54 2.44-.68 2.31-2.72 4.07-5.16 4.62-2.31.41-4.62.41-6.79 0-2.44-.41-4.34-2.17-5.16-4.62a17.98 17.98 0 010-10.72c.68-2.31 2.72-4.07 5.16-4.62 2.31-.41 4.62-.41 6.79 0 2.44.41 4.34 2.17 5.16 4.62.4 1.76.68 3.52.68 5.29m19.14 37.6c-.95 3.53-1.49 7.19-1.49 11v32.17h14.25V94.37c0-1.76.27-3.67.81-5.29.68-2.31 2.72-4.07 5.16-4.62 2.31-.41 4.62-.41 6.79 0 2.44.41 4.34 2.17 5.16 4.62a17.98 17.98 0 010 10.72c-.68 2.31-2.72 4.07-5.02 4.62-2.31.41-4.62.41-6.79 0-.41-.14-.95-.27-1.36-.41l4.89 13.3c4.48 0 8.96-.81 13.17-2.17 4.34-1.63 7.6-5.16 8.82-9.5 2.04-7.19 2.04-14.8 0-21.99-1.36-4.34-4.62-7.87-8.82-9.5a39.794 39.794 0 00-26.34 0c-4.62 1.35-7.88 4.88-9.23 9.22"/>
      </svg>

      <div class="coop-c-membershipmodule__connector">
        <svg class="coop-c-membershipmodule__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 304" aria-hidden="true" focusable="false">
          <path class="coop-c-membershipmodule__path" d="M0 4h72c39.76 0 72 32.24 72 72v152c0 39.77 32.24 72 72 72h72" stroke-width="8" vector-effect="non-scaling-stroke"/>
        </svg>
      </div>
    </div>
  </div>
</aside>

{% endmacro %}