Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Third party plugins
  • Templates
  • Access Control Banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • 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 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>

Copyright © 2021 W3C - generated 28 Apr 2023, 07:53:30 UTC

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