Components

Display Wrapper

Use the Display Wrapper component to show and hide content based on the developer's session status.

Usage

Use the Display Wrapper component to show and hide content based on the developer's session status in the Dev Portal (i.e. if the developer is authenticated or unauthenticated).

Important
The host Page or Snippet visibility setting always takes precedence over the Display Wrapper audience prop. If the Page or Snippet visibility is set to private and a developer is not authenticated, the Page or Snippet will not be shown regardless of the Display Wrapper component's audience prop value.

As an example, you may have a Page Hero encouraging developers to register for an account on your public homepage that you only want to show to unauthenticated developers (meaning once the developer logs in, you do not want to show the content).

::display-wrapper
---
audience: "unauthenticated"
---
  :::page-hero
  ---
  background-color: "#000933"
  title-font-size: "44px"
  title-line-height: "48px"
  padding: "60px 40px"
  ---
  #title
  Sign up to start building today!

  #description
  Explore API documentation and OpenAPI specs

  #actions
    ::::button{ size="large" to="#sign-up" }
    Create an account
    ::::
  :::
::

Props

audience

In addition to defining a Page or Snippet's visibility property via the Portal Editor or API, you may want more fine-grain control for components and content throughout your Dev Portal.

Use the audience prop to show or hide the MDC content in a Page or Snippet based on the developer's current session status.

  • Type: 'all' | 'unauthenticated' | 'authenticated' | 'none'
    • all: Always shown
    • unauthenticated: Shown only to unauthenticated developers
    • authenticated: Shown only to authenticated developers
    • none: Never shown
  • Default: 'all'

Slots

default

Use the #default slot for the content you want to conditionally show or hide.