Profile Hero 

<div class="profile-hero" data-module="profileHero">
    <div class="grid-container grid-layout__row">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-3 ">
                <div class="profile-hero__background profile-hero__background--desktop"></div>
            </div>
            <div class="cell medium-6">
                <div class="profile-hero__content">
                    <h2 class="profile-hero__title">Create an account?</h2>
                    <div class="profile-hero__description">
                        <div class="profile-hero__background profile-hero__background--mobile"></div>
                        <p class="profile-hero__subtitle">Access My Ireland across all of your devices by logging in. <a href='#'>Find out more</a></p>
                    </div>
                    <ul class="profile-hero__ctas">
                        <li> <a href="#" class="button-p1  js-overlay-login-button " role="button" target="_self">Log in</a>
                        </li>
                        <li> <a href="#" class="button-p2 button-p2--text-with-icon js-overlay-sign-up-button " role="button" target="_self">Register</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="profile-hero" data-module="profileHero">
    <div class="grid-container grid-layout__row">
        <div class="grid-x {{#unless center}}grid-padding-x{{/unless}}">
            <div class="cell medium-3 {{#if center}}medium-offset-1{{/if}}">
                 <div class="profile-hero__background profile-hero__background--desktop"></div>
             </div>
            <div class="cell medium-6">
                <div class="profile-hero__content">
                    <h2 class="profile-hero__title">{{ title }}</h2>
                    <div class="profile-hero__description">
                        <div class="profile-hero__background profile-hero__background--mobile"></div>
                        <p class="profile-hero__subtitle">{{{ subtitle }}}</p>
                    </div>
                    <ul class="profile-hero__ctas">
                        <li>{{> @cp-button-primary target=loginButton.target url=loginButton.url text=loginButton.text cssClasses="js-overlay-login-button" }}</li>
                        <li>{{> @cp-button-secondary target=registerButton.target url=registerButton.url text=registerButton.text modifier="text-with-icon" cssClasses="js-overlay-sign-up-button" }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "preload": true,
  "title": "Create an account?",
  "subtitle": "Access My Ireland across all of your devices by logging in. <a href='#'>Find out more</a>",
  "loginButton": {
    "target": "_self",
    "text": "Log in",
    "url": "#"
  },
  "registerButton": {
    "target": "_self",
    "text": "Register",
    "url": "#"
  }
}

There are no notes for this item.