Access control banner

Access control banners are used to display information about the page access restrictions. They are an enhancement of the banner that is found within the header component, and thus are placed inside <header class="global-header">.

Different types of access control banners are available, using different classes:

.banner--access-control.acl-member - for member-only pages
.banner--access-control.acl-team - for team-only pages
.banner--access-control.acl-user - for pages restricted to the current user
.banner--access-control.acl-private - for other access control restrictions

Open this Access Control in a new tab

HTML:

<div class="global-header">
    <div class="banner banner--access-control acl-user">
        <div class="banner__inner l-center">
            <img class="icon" src="/dist/assets/svg/lock.svg" width="20" height="20" alt
                       aria-hidden="true"/>
            <p>This page is restricted to you</p>
        </div>
    </div>

    <div class="banner banner--access-control acl-member">
        <div class="banner__inner l-center">
            <img class="icon" src="/dist/assets/svg/lock.svg" width="20" height="20" alt
                 aria-hidden="true"/>
            <p>This page is restricted to W3C Members</p>
        </div>
    </div>

    <div class="banner banner--access-control acl-team">
        <div class="banner__inner l-center">
            <img class="icon" src="/dist/assets/svg/lock.svg" width="20" height="20" alt
                 aria-hidden="true"/>
            <p>This page is restricted to W3C Staff</p>
        </div>
    </div>

    <div class="banner banner--access-control acl-private">
        <div class="banner__inner l-center">
            <img class="icon" src="/dist/assets/svg/lock.svg" width="20" height="20" alt
                 aria-hidden="true"/>
            <p>This page is restricted</p>
        </div>
    </div>
</div>