<div class="efl-article-info">
<div class="article-header">
<div class="article-header__category" data-category="Get Started">Interview</div>
<h1><span class="jumpTohide">Gareth Southgate: I want the players to play with freedom</span></h1>
<p>Gareth Southgate tells Peter Glynn that he wants young english players to have the freedom to express themselves</p>
</div>
<div class="tag-cloud--container">
<div class="tag-cloud">
<div class="tag-cloud__item">
<span>Article</span>
</div>
<div class="tag-cloud__item">
<span>All ages</span>
</div>
<div class="tag-cloud__item">
<span>Guide</span>
</div>
<div class="tag-cloud__item">
<span>Physical</span>
</div>
<div class="tag-cloud__item">
<span>Psychological</span>
</div>
<div class="tag-cloud__item">
<span>Social</span>
</div>
</div>
</div>
<div class="article-author article-author--crest">
<div class="article-author__inner">
<h4>William Dalton</h4>
<p>10 min read - 10 Mar 2020</p>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
.efl-article-info {
@include rte();
display: flex;
flex-direction: column;
position: relative;
h4 {
margin-bottom: 0;
}
+ .global-rte-content {
border-top: 1px solid $grey-light;
padding-top: 2.6rem;
}
+ .jump-to-section--container:not(.sticky) {
padding-top: 2.4rem;
}
.article-header {
p {
font-weight: 700;
}
}
hr {
display: block;
width: 100%;
height: auto;
border-bottom: 0.1rem solid $grey-light;
border-top: none;
}
@media screen and (min-width: $mq-medium) {
gap: 1.6rem;
.efl-learner-profile-in-page-bookmark__list {
right: 5rem;
}
}
@media screen and (max-width: $mq-medium) {
.article-header,
.tag-cloud--container {
margin-bottom: 1.2rem;
}
}
}
<div class="efl-article-info">
{{render '@article-header'}}
{{render '@tag-cloud'}}
{{render '@article-author'}}
{{render '@efl-learner-profile-in-page-bookmark'}}
</div>