England Football

Membership Signpost 

<!-- Default -->
<section class="signpost membership-signpost   ">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>

        </div>
    </a href="#">
</section>


<!-- With Button -->
<section class="signpost membership-signpost   ">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">Sign Up Now</span>

        </div>
    </a href="#">
</section>


<!-- With Invert Layout And Button -->
<section class="signpost membership-signpost  membership-signpost--invert   ">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">Sign Up Now</span>

        </div>
    </a href="#">
</section>


<!-- Branded -->
<section class="signpost membership-signpost   membership-signpost--branded">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>

        </div>
    </a href="#">
</section>


<!-- Without Cta -->
<section class="signpost membership-signpost   ">

    <div class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
        </div>
    </div>
</section>


<!-- Efl White -->
<section class="signpost membership-signpost   membership-signpost--efl-white">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>

        </div>
    </a href="#">
</section>


<!-- Efl Blue -->
<section class="signpost membership-signpost  membership-signpost--invert   membership-signpost--efl-blue">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.</p>

            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>

        </div>
    </a href="#">
</section>


<!-- Efl Promotional White -->
<section class="signpost membership-signpost   membership-signpost--efl-promotional membership-signpost--efl-promotional-white">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Here’s a powerful tag line about futsal coaching</p>
            <p class="signpost__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>

        </div>
    </a href="#">
</section>


<!-- Efl Promotional Grey -->
<section class="signpost membership-signpost   membership-signpost--efl-promotional membership-signpost--efl-promotional-grey">

    <a href="#" class="signpost__outer">
        <div class="signpost__image-wrapper">
            <img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
        </div>
        <div class="signpost__info">
            <h3 class="signpost__heading">Course Availability</h3>
            <p class="signpost__subheading">Here’s a powerful tag line about futsal coaching</p>
            <p class="signpost__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
            <hr />
            <span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>

        </div>
    </a href="#">
</section>

No notes defined.

/* Default */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  }
}


/* With Button */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "Sign Up Now",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  }
}


/* With Invert Layout And Button */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "Sign Up Now",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "invert-layout": true
}


/* Branded */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "branded": true
}


/* Without Cta */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "ctaVisible": false
}


/* Efl White */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "ctaVisible": true,
  "eflBranding": true
}


/* Efl Blue */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum lectus a diam sagittis imperdiet. Donec sagittis mauris at nunc posuere, eu congue massa mollis.",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "ctaVisible": true,
  "invert-layout": true,
  "eflBranding": true,
  "eflBlue": true
}


/* Efl Promotional White */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Here’s a powerful tag line about futsal coaching",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "ctaVisible": true,
  "eflPromotionalBranding": true,
  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
}


/* Efl Promotional Grey */
{
  "variant": "membership-signpost",
  "heading": "Course Availability",
  "subheading": "Here’s a powerful tag line about futsal coaching",
  "cta": {
    "copy": "find a course near me",
    "href": "#",
    "modifier": "primary",
    "id": "find-course-near-me",
    "disabled": true,
    "additionalClass": ""
  },
  "ctaVisible": true,
  "eflPromotionalBranding": true,
  "eflGrey": true,
  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
}


{{render '@signpost' this merge=true}}