Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

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>

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.