Split view is used to navigate between records in a list while staying on the same screen.

Sorted by:Lead Score- Descending

About Split View#

Accessibility#

The list component of the Split View consists of an ARIA Listbox, and as such must abide by the following rules:

Each option can only be a single actionable element. No child actions are allowed
Must implement the keyboard interaction as described by the ARIA Authoring Practices
For each open workspace tab, the corresponding option should be set to aria-selected="true"

Base#

Sorted by:Lead Score- Descending

<div class="slds-split-view_container slds-is-open">
  <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">
    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>

States#

Selected Item#

Sorted by:Lead Score- Descending

<div class="slds-split-view_container slds-is-open">
  <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">
    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>

Overflow#

Sorted by:Lead Score- Descending

<div class="slds-split-view_container slds-is-open">
  <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">
    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>

Unread Items#

Sorted by:Lead Score- Descending

<div class="slds-split-view_container slds-is-open">
  <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-open" aria-controls="split-view-id" aria-expanded="true" title="Close Split View">
    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>

Collapsed Panel#

Sorted by:Lead Score- Descending

<div class="slds-split-view_container slds-is-closed">
  <button class="slds-button slds-button_icon slds-button_icon slds-split-view__toggle-button slds-is-closed" aria-controls="split-view-id" aria-expanded="false" title="Open Split View">
    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-split-view_container`
Summary	Wrapper of split view
Support	dev-ready
Restrict	`div`
Variant	True

Selector	`.slds-is-closed`
Summary	Modifier to rotate the left arrow icon on close
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Selector	`.slds-is-open`
Summary	Toggles open/close state of split view container
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Selector	`.slds-split-view`
Summary
Restrict	`.slds-split-view_container article`

Selector	`.slds-split-view__header`
Summary	Header of split view
Restrict	`.slds-split-view header`

Selector	`.slds-split-view__list-header`
Summary	Column headers
Restrict	`.slds-split-view div`

Selector	`.slds-split-view__list-item`
Summary	Each row of the list of split view
Restrict	`.slds-split-view li`

Selector	`.slds-indicator_unread`
Summary	Unread states
Restrict	`.slds-split-view__list-item abbr`

Selector	`.slds-split-view__list-item-action`
Summary	Actionable row of split view
Restrict	`.slds-split-view__list-item a`

Selector	`.slds-split-view__toggle-button`
Summary	Expand/Collapse button to toggle open/close state of split view
Restrict	`.slds-split-view_container button`

Selector	`.slds-is-closed`
Summary	Modifier to rotate the left arrow icon on close
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Selector	`.slds-is-open`
Summary	Toggles open/close state of split view container
Restrict	`.slds-split-view_container, .slds-split-view__toggle-button`
Modifier	True

Split View Release Notes

2.15.0

Changed

For indicating the selected item in the list, aria-selected has been replaced with aria-current="page".

2.8.0

Changed

Increased font size to 14px, applied bold font weight, and updated line-height in slds-split-view__list-header.

Removed

Removed slds-text-title_caps split view list headers.

2.7.0

Changed

Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting

Sections

About Split View#

Accessibility#

Base#

States#

Selected Item#

Overflow#

Unread Items#

Collapsed Panel#

Overview of CSS Classes#

What are these categories?

Split View Release Notes

2.15.0

Changed

2.8.0

Changed

Removed

2.7.0

Changed