Notifications Panel Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Notifications Panel wireframe exposes the variables below. Use them inside any <velt-notifications-panel-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	`<velt-data field="var" />`	`<velt-data field="notification.title" />`
Hide / show conditionally	`velt-if="{var}"`	`velt-if="{settingsOpen}"`
Toggle a CSS class	`velt-class="'cls': {var}"`	`velt-class="'tab-{selectedTab}': true"`

All variables are mapped — reference them by their short name. You do not need the componentConfig. prefix.

Data State

Per-feature data: the four notification groupings, the active settings tree, and the current document name.

Variable	Type	Description	Example
`notificationsForYouInSession`	`Notification[]` \| `null`	Notifications matched to the current user.	`<velt-data field="notificationsForYouInSession.length" />`
`notificationsInSession`	`Notification[]` \| `null`	All in-session notifications (combined feed).	`<velt-data field="notificationsInSession.length" />`
`notificationsByUserMap`	`Record<string, { user: User; notifications: Notification[] }>`	Notifications grouped by user email.	`<velt-data field="notificationsByUserMap[notification.from.email].notifications.length" />`
`notificationsByDocumentId`	`{ documentId: string; notifications: Notification[] }[]` \| `null`	Notifications grouped by document.	`<velt-data field="notificationsByDocumentId.0.documentId" />`
`notificationsByDate`	`{ date: string; displayName: string; notifications: Notification[] }[]` \| `null`	Notifications grouped by date bucket.	`<velt-data field="notificationsByDate.0.displayName" />`
`currentDocumentName`	`string`	Display name of the current document.	`<velt-data field="currentDocumentName" />`
`unreadNotificationsForYou`	`number`	Unread-count badge for the For-you tab (also exposed by the notifications-tool).	`<velt-data field="unreadNotificationsForYou" />`
`settingsConfig`	`NotificationInitialSettingsConfig[]`	Settings-tree configuration for the in-panel settings view.	`<velt-data field="settingsConfig.length" />`
`settingsSelectedOption`	`Record<string,` `NotificationConfigValue>`	Selected option per accordion.	`<velt-data field="settingsSelectedOption.inbox" />`

UI State

Per-instance UI flags driven by the panel itself.

Variable	Type	Description	Example
`selectedTab`	`'forYou'` \| `'people'` \| `'documents'` \| `'all'`	Active tab id.	`velt-class="'tab-{selectedTab}': true"`
`tabConfig`	`NotificationTabConfig` \| `null`	Per-tab visibility config (`forYou`, `people`, `documents`, `all`).	`velt-if="{tabConfig.forYou}"`
`TABS`	`{ ForYou: 'forYou'; People: 'people'; Documents: 'documents'; All: 'all' }`	Constant tab-id map. Useful when comparing to `selectedTab`.	`velt-class="'is-foryou': '{selectedTab} === {TABS.ForYou}'"`
`tabPage`	`{ forYou: number; people: number; documents: number; all: number }`	Pagination cursor per tab.	`<velt-data field="tabPage.forYou" />`
`pageSize`	`number`	Page size (default `5`).	`<velt-data field="pageSize" />`
`panelOpenMode`	`'popover'` \| `'sidebar'` \| …	Layout mode for the panel.	`velt-class="'mode-{panelOpenMode}': true"`
`settingsOpen`	`boolean`	Settings view is open.	`velt-class="'settings-open': {settingsOpen}"`
`settingsAccordionExpanded`	`Record<string, boolean>`	Per-accordion expanded state, keyed by setting id.	`velt-class="'inbox-open': {settingsAccordionExpanded.inbox}"`
`settingsMutedAll`	`boolean`	Master “mute all” toggle state.	`velt-class="'muted-all': {settingsMutedAll}"`
`settingsItemRecentlyClosed`	`boolean`	Triggers the close animation.	`velt-class="'recently-closed': {settingsItemRecentlyClosed}"`
`settingsLayout`	`'accordion'` \| …	Settings UI layout.	`velt-class="'layout-{settingsLayout}': true"`
`tabCount`	`number`	Number of visible tabs.	`<velt-data field="tabCount" />`
`usersExpanded`	`Record<string, boolean>`	Per-user accordion expanded state, keyed by email.	`velt-class="'expanded': {usersExpanded[notification.from.email]}"`
`documentExpanded`	`Record<string, boolean>`	Per-document accordion expanded state, keyed by document id.	`velt-class="'expanded': {documentExpanded[notification.documentId]}"`
`shadowDom`	`boolean`	Shadow-DOM wrapping flag.	Host config — set via element attribute.
`notificationsPanelVisible`	`boolean`	Panel itself is currently visible (also exposed by the notifications-tool).	`velt-class="'panel-visible': {notificationsPanelVisible}"`
`darkMode`	`boolean`	Dark mode is active.	`velt-class="'theme-dark': {darkMode}"`
`variant`	`string`	Per-instance variant tag set on the host element.	`<velt-data field="variant" />`

Feature State

Capability flags toggled via SDK config.

Variable	Type	Description	Example
`settingsEnabled`	`boolean`	Settings view is available.	`velt-if="{settingsEnabled}"`

Common Props

Every Notifications Panel primitive accepts:

React Prop	HTML Attribute	Type	Default	Description
`defaultCondition`	`default-condition`	`boolean \| "true" \| "false"`	`true`	When `false`, the component always renders regardless of internal state.

Signal inputs (for parent-child component composition):

[componentConfigSignal] — shared per-feature config signal (notification groupings, tab config, settings).
[parentLocalUIState] — per-instance UI state signal (darkMode, variant).

Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the Available in column. Each is injected by the iteration primitive that owns the tag.

Variable	Type	Available in	Example
`notification`	`Notification`	`<velt-notifications-panel-content-list-wireframe>` and descendants	`<velt-data field="notification.title" />`
`notifications`	`Notification[]`	`-content-list`, `-content-load-more`	`<velt-data field="notifications.length" />`
`isLoadMoreVisible`	`boolean`	`*-content-load-more`	`velt-if="{isLoadMoreVisible}"`
`isAllRead`	`boolean`	`*-content-all-read-container`	`velt-if="{isAllRead}"`

Type Reference

Types referenced by the variables above are documented in Data Models:

Type	Description
`Notification`	A single notification (id, title, message, from, to, documentId, createdAt, read, link, metadata).
`User`	Identified end-user object (used by `notification.from`, `notification.to`).
`NotificationInitialSettingsConfig`	One row of the settings tree (id, name, type, options).
`NotificationConfigValue`	A selectable value inside a settings dropdown.
`NotificationTabConfig`	Per-tab visibility flags (`forYou`, `people`, `documents`, `all`).

Subcomponents

Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the shouldShow condition, and host CSS classes.

`notifications-panel` (root)

The root primitive — the <velt-notifications-panel> element customers place in their app.

Public element: <velt-notifications-panel>
Wireframe tag: <velt-notifications-panel-wireframe>

Property	Value
Extra variables	None — root only sees common variables.
Host class	`v-notifications-panel-container velt-notifications-panel`
Conditional classes	`bottom-sheet` (when `bottomSheetMode`), `velt-notifications-panel--sidebar-panel` (when `panelOpenMode === 'sidebar'`)

React / Next.js
Other Frameworks

<VeltNotificationsPanelWireframe>
  <VeltNotificationsPanelWireframe.Title />
  <VeltNotificationsPanelWireframe.Header />
  <VeltNotificationsPanelWireframe.Content />
  <VeltNotificationsPanelWireframe.Settings velt-if="{settingsOpen}" />
</VeltNotificationsPanelWireframe>

<velt-notifications-panel-wireframe>
  <velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
  <velt-notifications-panel-header-wireframe></velt-notifications-panel-header-wireframe>
  <velt-notifications-panel-content-wireframe></velt-notifications-panel-content-wireframe>
  <velt-notifications-panel-settings-wireframe velt-if="{settingsOpen}"></velt-notifications-panel-settings-wireframe>
</velt-notifications-panel-wireframe>

`notifications-panel-title`

The panel title bar (heading + actions toolbar).

Public element: <velt-notifications-panel-title>
Wireframe tag: <velt-notifications-panel-title-wireframe>
Children: *-title-text, *-close-button, *-settings-button, *-read-all-button, *-view-all-button.

Property	Value
Extra variables	None beyond common variables.
Host classes	`velt-notification-panel--title` (heading), `velt-notification-panel--actions` (actions toolbar)

`notifications-panel-title-text`

The text inside the title heading. Defaults to “Notifications”.

Public element: <velt-notifications-panel-title-text>
Wireframe tag: <velt-notifications-panel-title-text-wireframe>

Property	Value
Extra variables	None.

`notifications-panel-close-button`

Close button — clicking calls componentConfig.closeNotificationsPanel().

Public element: <velt-notifications-panel-close-button>
Wireframe tag: <velt-notifications-panel-close-button-wireframe>

Property	Value
Extra variables	None.
Host class	`velt-notification-panel--close-button`

`notifications-panel-settings-button`

Gear-icon button that opens the settings view.

Public element: <velt-notifications-panel-settings-button>
Wireframe tag: <velt-notifications-panel-settings-button-wireframe>

Property	Value
Extra variables	None.
`shouldShow`	Parent gates rendering on `settingsEnabled === true`.
Host classes	`velt-notifications-panel--settings-button-container` (outer wrapper), `velt-notifications-panel--settings-button` (inner button)

`notifications-panel-read-all-button`

“Mark all as read” button.

Public element: <velt-notifications-panel-read-all-button>
Wireframe tag: <velt-notifications-panel-read-all-button-wireframe>

Property	Value
Extra variables	None.
Host class	`v-read-all-btn velt-notifications-panel--read-all-button`

`notifications-panel-view-all-button`

“View all” link that takes the user to the full notifications history.

Public element: <velt-notifications-panel-view-all-button>
Wireframe tag: <velt-notifications-panel-view-all-button-wireframe>

Property	Value
Extra variables	None.
Host class	`all-notifications-view-all-btn velt-notifications-panel--view-all-button`

`notifications-panel-skeleton`

Skeleton loader shown while notifications are being fetched.

Public element: <velt-notifications-panel-skeleton>
Wireframe tag: <velt-notifications-panel-skeleton-wireframe>

Property	Value
Extra variables	None.
`shouldShow`	Driven by parent — renders while `isLoading === true`.
Host classes	`skeleton skeleton-item-card` (card), `shine skeleton-item-avatar` (avatar shimmer), `skeleton-item-info` / `skeleton-iten-name-info` / `skeleton-item-body-info` (layout pieces)

`notifications-panel-header`

Tab strip across the top of the panel. Renders the four tab children.

Public element: <velt-notifications-panel-header>
Wireframe tag: <velt-notifications-panel-header-wireframe>
Children: *-tab-for-you, *-tab-people, *-tab-documents, *-tab-all.

Property	Value
Extra variables	None at the header level.
Host classes	`v-notifications-panel-header velt-notifications-panel--header` (wrapper), `v-tabs-container velt-notifications-panel--tabs-container` (tabs container)

`notifications-panel-header-tab-for-you` / `-tab-people` / `-tab-documents` / `-tab-all`

The four tab buttons. Same shape; differ only in which selectedTab value they highlight.

Public elements: <velt-notifications-panel-header-tab-for-you>, <velt-notifications-panel-header-tab-people>, <velt-notifications-panel-header-tab-documents>, <velt-notifications-panel-header-tab-all>
Wireframe tags: <velt-notifications-panel-header-tab-for-you-wireframe> (and the three analogous tags).

Property	Value
Extra variables	None.
`shouldShow`	Each tab is gated on `tabConfig.<tabId>` being truthy. The `selected` modifier class is applied when `selectedTab === TABS.<TabId>`.
Host class	`v-tab velt-notifications-panel--tab`
Conditional class	`selected` / `velt-notifications-panel--tab-selected` (when `selectedTab === TABS.<TabId>`)

`notifications-panel-content`

The body container. Renders one of four content children based on selectedTab.

Public element: <velt-notifications-panel-content>
Wireframe tag: <velt-notifications-panel-content-wireframe>
Children: *-content-for-you, *-content-people, *-content-documents, *-content-all, *-content-list, *-content-load-more, *-content-all-read-container.

Property	Value
Extra variables	None at the container level.

`notifications-panel-content-for-you` / `-content-all`

Tab body for the For-you / All tabs. Both render a chronological list (notificationsByDate for All, notificationsForYouInSession for For-you).

Wireframe tags: <velt-notifications-panel-content-for-you-wireframe>, <velt-notifications-panel-content-all-wireframe>.

Property	Value
Extra variables	None at the container level — descendants receive `notification` per iteration.
`shouldShow`	Gated by parent on `selectedTab` matching this tab id.
Host class	`v-notifications velt-notifications-panel-content`
Conditional class	`velt-notifications-panel-content--sidebar-panel` (when `panelOpenMode === 'sidebar'`)

`notifications-panel-content-people`

Tab body for the People tab. Iterates notificationsByUserMap.

Wireframe tag: <velt-notifications-panel-content-people-wireframe>.

Property	Value
Extra variables	None at the container level — list-item descendants receive `user` and `userNotifications` per row.
`shouldShow`	Gated by parent on `selectedTab === 'people'`.
Host class	`v-users velt-notifications-panel-content--people`

`notifications-panel-content-documents`

Tab body for the Documents tab. Iterates notificationsByDocumentId.

Wireframe tag: <velt-notifications-panel-content-documents-wireframe>.

Property	Value
Extra variables	None at the container level — list-item descendants receive `documentId`, `documentName`, `documentNotifications`.
`shouldShow`	Gated by parent on `selectedTab === 'documents'`.
Host class	`v-documents velt-notifications-panel-content--document`

`notifications-panel-content-list`

Iteration primitive that renders one row per notification. Injected with the per-tab notifications array.

Public element: <velt-notifications-panel-content-list>
Wireframe tag: <velt-notifications-panel-content-list-wireframe>

Variable	Type	Example
`notification`	`Notification`	`<velt-data field="notification.title" />`
`notifications`	`Notification[]`	`<velt-data field="notifications.length" />`

React / Next.js
Other Frameworks

<VeltNotificationsPanelWireframe.Content.List>
  <article
    className="my-notif"
    velt-class="'is-unread': '!{notification.read}'">
    <velt-data field="notification.from.name" />
    <velt-data field="notification.title" />
    <time><velt-data field="notification.createdAt" /></time>
  </article>
</VeltNotificationsPanelWireframe.Content.List>

<velt-notifications-panel-content-list-wireframe>
  <article class="my-notif" velt-class="'is-unread': '!{notification.read}'">
    <velt-data field="notification.from.name"></velt-data>
    <velt-data field="notification.title"></velt-data>
    <time><velt-data field="notification.createdAt"></velt-data></time>
  </article>
</velt-notifications-panel-content-list-wireframe>

`notifications-panel-content-load-more`

“Load more” button at the bottom of paginated lists.

Public element: <velt-notifications-panel-content-load-more>
Wireframe tag: <velt-notifications-panel-content-load-more-wireframe>

Variable	Type	Example
`notifications`	`Notification[]`	`<velt-data field="notifications.length" />`
`isLoadMoreVisible`	`boolean`	`velt-if="{isLoadMoreVisible}"`

Property	Value
`shouldShow`	`isLoadMoreVisible === true`
Host class	`v-load-more-btn velt-notifications-panel--content-load-more`

`notifications-panel-content-all-read-container`

Empty-state shown when the user has no unread notifications.

Public element: <velt-notifications-panel-content-all-read-container>
Wireframe tag: <velt-notifications-panel-content-all-read-container-wireframe>

Variable	Type	Example
`isAllRead`	`boolean`	`velt-if="{isAllRead}"`

Property	Value
`shouldShow`	`isAllRead === true`
Host classes	`all-notifications-read-container velt-notifications-panel--all-read-container` (wrapper), `notifications-read-emoji velt-notifications-panel--emoji` (emoji icon), `all-notifications-read-message velt-notifications-panel--message` (message text)

`notifications-panel-settings`

The settings view inside the panel. Renders header + accordion list + footer (mute-all section). Visible when the user clicks the settings button.

Public element: <velt-notifications-panel-settings>
Wireframe tag: <velt-notifications-panel-settings-wireframe>
Children: *-settings-header, *-settings-back-button, *-settings-title, *-settings-description, *-settings-accordion, *-settings-list, *-settings-footer, *-settings-mute-all-title, *-settings-mute-all-description, *-settings-mute-all-toggle.

Property	Value
Extra variables	None at the container level — accordion descendants receive `setting` and `option` per iteration.
`shouldShow`	`settingsOpen === true`. The button-rendering parent additionally requires `settingsEnabled === true`.
Host classes	`velt-notification-panel--settings` (wrapper), `velt-notification-panel--settings-section` (each section)

Deeply-Nested Wireframe Tags

The four tab content primitives + per-tab list-items + the settings accordion all decompose further. Each tag below has its own <velt-notifications-panel-...-wireframe> registration and inherits context variables from its parent.

Tab header explicit tags

Tag	Notes	Example
`<velt-notifications-panel-header-tab-for-you-wireframe>`	For-you tab.	`velt-class="'selected': '{selectedTab} === {TABS.ForYou}'"`
`<velt-notifications-panel-header-tab-people-wireframe>`	People tab.	`velt-class="'selected': '{selectedTab} === {TABS.People}'"`
`<velt-notifications-panel-header-tab-documents-wireframe>`	Documents tab.	`velt-class="'selected': '{selectedTab} === {TABS.Documents}'"`
`<velt-notifications-panel-header-tab-all-wireframe>`	All tab.	`velt-class="'selected': '{selectedTab} === {TABS.All}'"`

For-you / generic list-item tags

Inside each, notification is the per-iteration variable.

Tag	Notes	Example
`<velt-notifications-panel-content-list-item-wireframe>`	A single notification row.	`velt-class="'is-unread': '!{notification.read}'"`
`<velt-notifications-panel-content-list-item-avatar-wireframe>`	Avatar of `notification.from`.	`<velt-data field="notification.from.photoUrl" />`
`<velt-notifications-panel-content-list-item-headline-wireframe>`	Headline text.	`<velt-data field="notification.title" />`
`<velt-notifications-panel-content-list-item-body-wireframe>`	Body text.	`<velt-data field="notification.message" />`
`<velt-notifications-panel-content-list-item-file-name-wireframe>`	Document-name fragment.	`<velt-data field="notification.documentName" />`
`<velt-notifications-panel-content-list-item-time-wireframe>`	Relative timestamp.	`<velt-data field="notification.createdAt" />`
`<velt-notifications-panel-content-list-item-unread-wireframe>`	Unread indicator dot.	`velt-if="!{notification.read}"`

People-tab list-item tags

Each row represents a user with their notifications grouped under them.

Tag	Notes	Example
`<velt-notifications-panel-content-people-list-wireframe>`	The list wrapper.	(iterates `notificationsByUserMap`)
`<velt-notifications-panel-content-people-list-item-wireframe>`	A single user row.	`velt-class="'expanded': {usersExpanded[user.email]}"`
`<velt-notifications-panel-content-people-list-item-avatar-wireframe>`	User avatar.	`<velt-data field="user.photoUrl" />`
`<velt-notifications-panel-content-people-list-item-name-wireframe>`	User name.	`<velt-data field="user.name" />`
`<velt-notifications-panel-content-people-list-item-content-wireframe>`	Expanded notification list under this user.	(composes generic list-items)
`<velt-notifications-panel-content-people-list-item-count-wireframe>`	Unread-count badge for this user.	`<velt-data field="userNotifications.length" />`

Documents-tab list-item tags

Tag	Notes	Example
`<velt-notifications-panel-content-documents-list-item-wireframe>`	A single document row.	`velt-class="'expanded': {documentExpanded[documentId]}"`
`<velt-notifications-panel-content-documents-list-item-name-wireframe>`	Document name.	`<velt-data field="documentName" />`
`<velt-notifications-panel-content-documents-list-item-content-wireframe>`	Expanded notification list under this document.	(composes generic list-items)
`<velt-notifications-panel-content-documents-list-item-count-wireframe>`	Notification count for this document.	`<velt-data field="documentNotifications.length" />`
`<velt-notifications-panel-content-documents-list-item-unread-wireframe>`	Unread indicator.	`velt-if="{hasUnread}"`

All-tab list-item tags

Tag	Notes	Example
`<velt-notifications-panel-content-all-list-wireframe>`	The list wrapper. Iterates `notificationsByDate`.	(composes per-date rows)
`<velt-notifications-panel-content-all-list-item-wireframe>`	A single date-group row.	`<velt-data field="dateGroup.displayName" />`
`<velt-notifications-panel-content-all-list-item-content-wireframe>`	Notification list within a date group.	(composes generic list-items)
`<velt-notifications-panel-content-all-list-item-label-wireframe>`	Date label.	`<velt-data field="dateGroup.displayName" />`

Settings tags

The settings view’s accordion decomposes per row. setting and option are per-iteration variables.

Tag	Notes	Example
`<velt-notifications-panel-settings-header-wireframe>`	Header bar of the settings view.	(composes back-button + title)
`<velt-notifications-panel-settings-header-title-wireframe>`	Header title.	(static label)
`<velt-notifications-panel-settings-back-button-wireframe>`	Back button.	(click handler closes the settings view)
`<velt-notifications-panel-settings-title-wireframe>`	Section title.	(static label)
`<velt-notifications-panel-settings-description-wireframe>`	Section description.	(static label)
`<velt-notifications-panel-settings-list-wireframe>`	Accordion list wrapper.	(iterates `settingsConfig`)
`<velt-notifications-panel-settings-accordion-wireframe>`	A single accordion row.	`velt-class="'expanded': {settingsAccordionExpanded[setting.id]}"`
`<velt-notifications-panel-settings-accordion-trigger-wireframe>`	Trigger of an accordion row.	(click handler)
`<velt-notifications-panel-settings-accordion-trigger-icon-wireframe>`	Trigger icon.	`<velt-data field="setting.icon" />`
`<velt-notifications-panel-settings-accordion-trigger-label-wireframe>`	Trigger label.	`<velt-data field="setting.name" />`
`<velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>`	Currently-selected value displayed on the trigger.	`<velt-data field="settingsSelectedOption[setting.id]" />`
`<velt-notifications-panel-settings-accordion-content-wireframe>`	Expanded content (option list).	(iterates `setting.options`)
`<velt-notifications-panel-settings-accordion-content-item-wireframe>`	Per-option row.	`velt-class="'selected': '{option.value} === {settingsSelectedOption[setting.id]}'"`
`<velt-notifications-panel-settings-accordion-content-item-icon-wireframe>`	Option icon.	`<velt-data field="option.icon" />`
`<velt-notifications-panel-settings-accordion-content-item-label-wireframe>`	Option label.	`<velt-data field="option.label" />`
`<velt-notifications-panel-settings-footer-wireframe>`	Footer wrapper holding the mute-all section.	(composes mute-all children)
`<velt-notifications-panel-settings-mute-all-title-wireframe>`	”Mute all” label.	(static label)
`<velt-notifications-panel-settings-mute-all-description-wireframe>`	Description text.	(static label)
`<velt-notifications-panel-settings-mute-all-toggle-wireframe>`	Toggle switch bound to `settingsMutedAll`.	`velt-class="'on': {settingsMutedAll}"`

Putting it together

A typical panel with a tabbed header that highlights the active tab, an empty-state for the all-read case, and a per-row unread modifier:

React / Next.js
Other Frameworks

<VeltNotificationsPanelWireframe>
  <VeltNotificationsPanelWireframe.Title>
    <h2>Notifications</h2>
    <VeltNotificationsPanelWireframe.SettingsButton velt-if="{settingsEnabled}" />
    <VeltNotificationsPanelWireframe.CloseButton />
  </VeltNotificationsPanelWireframe.Title>

  <VeltNotificationsPanelWireframe.Header>
    <VeltNotificationsPanelWireframe.Header.TabForYou
      velt-class="'is-active': '{selectedTab} === {TABS.ForYou}'">
      For you
      <span velt-if="{unreadNotificationsForYou} > 0">
        <velt-data field="unreadNotificationsForYou" />
      </span>
    </VeltNotificationsPanelWireframe.Header.TabForYou>
    <VeltNotificationsPanelWireframe.Header.TabAll
      velt-class="'is-active': '{selectedTab} === {TABS.All}'">
      All
    </VeltNotificationsPanelWireframe.Header.TabAll>
  </VeltNotificationsPanelWireframe.Header>

  <VeltNotificationsPanelWireframe.Content>
    <VeltNotificationsPanelWireframe.Content.List>
      <article
        className="my-notif"
        velt-class="'is-unread': '!{notification.read}'">
        <strong><velt-data field="notification.from.name" /></strong>
        <p><velt-data field="notification.title" /></p>
      </article>
    </VeltNotificationsPanelWireframe.Content.List>

    <VeltNotificationsPanelWireframe.Content.AllReadContainer
      velt-if="{isAllRead}">
      <span>You're all caught up.</span>
    </VeltNotificationsPanelWireframe.Content.AllReadContainer>
  </VeltNotificationsPanelWireframe.Content>
</VeltNotificationsPanelWireframe>

<velt-notifications-panel-wireframe>
  <velt-notifications-panel-title-wireframe>
    <h2>Notifications</h2>
    <velt-notifications-panel-settings-button-wireframe velt-if="{settingsEnabled}"></velt-notifications-panel-settings-button-wireframe>
    <velt-notifications-panel-close-button-wireframe></velt-notifications-panel-close-button-wireframe>
  </velt-notifications-panel-title-wireframe>

  <velt-notifications-panel-header-wireframe>
    <velt-notifications-panel-header-tab-for-you-wireframe
      velt-class="'is-active': '{selectedTab} === {TABS.ForYou}'">
      For you
      <span velt-if="{unreadNotificationsForYou} > 0">
        <velt-data field="unreadNotificationsForYou"></velt-data>
      </span>
    </velt-notifications-panel-header-tab-for-you-wireframe>
    <velt-notifications-panel-header-tab-all-wireframe
      velt-class="'is-active': '{selectedTab} === {TABS.All}'">
      All
    </velt-notifications-panel-header-tab-all-wireframe>
  </velt-notifications-panel-header-wireframe>

  <velt-notifications-panel-content-wireframe>
    <velt-notifications-panel-content-list-wireframe>
      <article class="my-notif" velt-class="'is-unread': '!{notification.read}'">
        <strong><velt-data field="notification.from.name"></velt-data></strong>
        <p><velt-data field="notification.title"></velt-data></p>
      </article>
    </velt-notifications-panel-content-list-wireframe>

    <velt-notifications-panel-content-all-read-container-wireframe velt-if="{isAllRead}">
      <span>You're all caught up.</span>
    </velt-notifications-panel-content-all-read-container-wireframe>
  </velt-notifications-panel-content-wireframe>
</velt-notifications-panel-wireframe>

Notifications Panel Wireframes — composition reference for the wireframe tags themselves.
Notifications Panel Primitives — granular components if you don’t need a full wireframe.
Notifications Tool Wireframe Variables — variables for the bell-icon trigger that opens this panel (most variables are shared).
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Notifications Panel Wireframe Variables

Overview

Data State

UI State

Feature State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`notifications-panel` (root)

`notifications-panel-title`

`notifications-panel-title-text`

`notifications-panel-close-button`

`notifications-panel-settings-button`

`notifications-panel-read-all-button`

`notifications-panel-view-all-button`

`notifications-panel-skeleton`

`notifications-panel-header`

`notifications-panel-header-tab-for-you` / `-tab-people` / `-tab-documents` / `-tab-all`

`notifications-panel-content`

`notifications-panel-content-for-you` / `-content-all`

`notifications-panel-content-people`

`notifications-panel-content-documents`

`notifications-panel-content-list`

`notifications-panel-content-load-more`

`notifications-panel-content-all-read-container`

`notifications-panel-settings`

Deeply-Nested Wireframe Tags

Tab header explicit tags

For-you / generic list-item tags

People-tab list-item tags

Documents-tab list-item tags

All-tab list-item tags

Settings tags

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Data State

​UI State

​Feature State

​Common Props

​Context-Specific Variables

​Type Reference

​Subcomponents

​notifications-panel (root)

​notifications-panel-title

​notifications-panel-title-text

​notifications-panel-close-button

​notifications-panel-settings-button

​notifications-panel-read-all-button

​notifications-panel-view-all-button

​notifications-panel-skeleton

​notifications-panel-header

​notifications-panel-header-tab-for-you / -tab-people / -tab-documents / -tab-all

​notifications-panel-content

​notifications-panel-content-for-you / -content-all

​notifications-panel-content-people

​notifications-panel-content-documents

​notifications-panel-content-list

​notifications-panel-content-load-more

​notifications-panel-content-all-read-container

​notifications-panel-settings

​Deeply-Nested Wireframe Tags

​Tab header explicit tags

​For-you / generic list-item tags

​People-tab list-item tags

​Documents-tab list-item tags

​All-tab list-item tags

​Settings tags

​Putting it together

​Related

Overview

Data State

UI State

Feature State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`notifications-panel` (root)

`notifications-panel-title`

`notifications-panel-title-text`

`notifications-panel-close-button`

`notifications-panel-settings-button`

`notifications-panel-read-all-button`

`notifications-panel-view-all-button`

`notifications-panel-skeleton`

`notifications-panel-header`

`notifications-panel-header-tab-for-you` / `-tab-people` / `-tab-documents` / `-tab-all`

`notifications-panel-content`

`notifications-panel-content-for-you` / `-content-all`

`notifications-panel-content-people`

`notifications-panel-content-documents`

`notifications-panel-content-list`

`notifications-panel-content-load-more`

`notifications-panel-content-all-read-container`

`notifications-panel-settings`

Deeply-Nested Wireframe Tags

Tab header explicit tags

For-you / generic list-item tags

People-tab list-item tags

Documents-tab list-item tags

All-tab list-item tags

Settings tags

Putting it together

Related