Access Control Banner

Access Control Banners are used to display information about the page access restrictions. They are an enhancement of the banner component, and thus are placed in a .global-header element.

Different types of access control banners are available:

access-control-banner--member - for member-only pages
access-control-banner--team - for team-only pages
access-control-banner--user - for pages restricted to the current user
access-control-banner--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>