Membership banner

The Co-op membership banner is used as a call to action to attact new members. It has a signed in version that displays commonly used links.

Example

Example

HTML

                                    <aside class="coop-c-membershipmodule">
  <div class="coop-c-membershipmodule__inner coop-u-clearfix">
    <article class="coop-c-membershipmodule__content">
      <header class="coop-c-membershipmodule__header">
        <h3 class="coop-c-membershipmodule__title">
          Become a Co-op member
        </h3>
      </header>
      <div class="coop-c-membershipmodule__body">
        <p>To get involved in the next Big Co-op Payout, sign up to become a member for £1 and choose a local cause to support in your community.</p>
        <p>You’ll also earn rewards when you buy selected Co‑op branded products and services.</p>
      </div>
      <div class="coop-c-membershipmodule__btns">
        <p>
          <a href="https://membership.coop.co.uk/register" class="coop-btn coop-btn--primary" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="Become a Co-op Member">
            Become a Co-op Member
          </a>
        </p>
      </div>
      <div class="coop-c-membershipmodule__links">
        <p>
          <a href="https://membership.coop.co.uk/sign-in" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="Sign into your Membership account">
            Sign into your Membership account
          </a>
        </p>
      </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>

<aside class="coop-c-membershipmodule">
  <div class="coop-c-membershipmodule__inner coop-u-clearfix">
    <article class="coop-c-membershipmodule__content">
      <header class="coop-c-membershipmodule__header">
        <h3 class="coop-c-membershipmodule__title">
          Co-op membership
        </h3>
      </header>
      <div class="coop-c-membershipmodule__body">
        <p>Choose your offers, check your balance and help your community</p>
      </div>
      <div class="coop-c-membershipmodule__btns">
        <p>
          <a href="https://membership.coop.co.uk/register" class="coop-btn coop-btn--primary" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="Become a Co-op Member">
            Go to your membership account
          </a>
        </p>
      </div>
      <div class="coop-c-membershipmodule__links">
        <ul class="coop-c-membershipmodule__list">
          <li class="coop-c-membershipmodule__item">
            <a class="coop-c-membershipmodule__link" href="https://membership.coop.co.uk/claim-rewards" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="Add a missed receipt">
              Add a missed receipt
            </a>
          </li>
          <li class="coop-c-membershipmodule__item">
            <a class="coop-c-membershipmodule__link" href="https://membership.coop.co.uk" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="Get a replacement card">
              Get a replacement card
            </a>
          </li>
          <li class="coop-c-membershipmodule__item">
            <a class="coop-c-membershipmodule__link" href="https://membership.coop.co.uk/details" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="Change your details">
              Change your details
            </a>
          </li>
          <li class="coop-c-membershipmodule__item">
            <a class="coop-c-membershipmodule__link" href="membership" data-contenttype="Membership module" data-contentparent="Become a member" data-linktext="About Co-op Membership">
              About <span class="coop-u-nowrap">Co-op</span> Membership
            </a>
          </li>
        </ul>
      </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>

                                    

Design and content

Coming soon.