Global Header - Lightning Design System

global-header

.slds-global-header_container — The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party).

base

.slds-global-header_container — Container that fixes the global header to the top of the viewport, contains global header element

.slds-global-header

.slds-global-header__item

.slds-global-header__item — A region within the global header

.slds-global-header__button_icon-actions

.slds-global-header__button_icon-actions — Button icon specifically for global actions

.global-header__icon

.global-header__icon — Deal with sizing for global header icons

.slds-global-header__button_icon-favorites

.slds-global-header__button_icon-favorites — Button icon specifically for global actions

.slds-is-selected

.slds-is-selected — Selected state for favorites button

.slds-is-disabled

.slds-is-disabled — Disabled state for favorites button

.slds-global-header__button_icon

.slds-global-header__button_icon — Button icons on the global header

.slds-global-header__logo

.slds-global-header__logo — Container of the global header logo

.slds-global-header__item_search

.slds-global-header__item_search — Region that contains the search input, handles sizing

.slds-global-search__form-element div

.slds-global-search__form-element div — Primary combobox that contains the search input, handles sizing

.slds-listbox_selection-group

.slds-listbox_selection-group — The container of pill selections found inside of a combobox group

listbox

.slds-listbox — Listbox container

.slds-listbox_inline

.slds-listbox_inline — Inline listbox

.slds-listbox_horizontal

.slds-listbox_horizontal — Horizontal listbox

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-listbox__option

.slds-listbox__option — Choosable option within listbox

.slds-media__body > :first-child

.slds-media__body > :first-child — If the listbox option is empty and slds-truncate is not present this fix the height of the option

base

.slds-chat — Root container of a chat session

.slds-chat-list

.slds-chat-list — Handles the display of chat items within a list

.slds-chat-listitem

.slds-chat-listitem — Handles spacing and direction of items in the list

.slds-chat-listitem_outbound

.slds-chat-listitem_outbound — Modifier used to style outbound message list items

inbound-message

.slds-chat-listitem_inbound — Modifier used to style inbound message list items

.slds-chat-listitem_bookend

.slds-chat-listitem_bookend — Modifier used for spacing bookend items

.slds-chat-listitem_event

.slds-chat-listitem_event — Modifier used for spacing event items

.slds-chat-message

.slds-chat-message — styles the outter part of a chat message

.slds-chat-message_faux-avatar

.slds-chat-message_faux-avatar — Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message

.slds-chat-avatar

.slds-chat-avatar — Used to style avatars in chat logs

.slds-chat-avatar__intials

.slds-chat-avatar__intials — Used to style the avatar intials for chat

.slds-chat-message__body

.slds-chat-message__body — Used to contain and align chat messages with their avatars

.slds-chat-message__image_loading

.slds-chat-message__image_loading — true

.slds-chat-message__text

.slds-chat-message__text — Used to style the chat text from agent or customer

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-message__text_inbound

.slds-chat-message__text_inbound — Used for any specific inbound text styling

.slds-chat-message__text_outbound

.slds-chat-message__text_outbound — Used for any specific outbound text styling

.slds-chat-message__text_outbound-agent

.slds-chat-message__text_outbound-agent — Used for any specific outbound (from another agent) text styling

unsupported

.slds-chat-message__text_unsupported-type — Used for an inbound message that is not a supported message type

delivery-failure

.slds-chat-message__text_delivery-failure — Used for an inbound message that fails to deliver

.slds-chat-message__text_delivery-failure-reason

.slds-chat-message__text_delivery-failure-reason — Element that contains feedback for why inbound message failed

.slds-chat-message__text_sneak-peek

.slds-chat-message__text_sneak-peek — Used when sneak peek is enabled for customer messages

.slds-chat-message__file

.slds-chat-message__file — true

.slds-chat-message__file_inbound

.slds-chat-message__file_inbound — Used for any specific inbound file styling

.slds-chat-message__meta

.slds-chat-message__meta — Used to style chat message meta data

.slds-chat-message__action

.slds-chat-message__action — Used to style chat message resend action

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-event

.slds-chat-event — During any chat, certain events can occur which need to be displayed to the user

.slds-chat-event__rule

.slds-chat-event__rule — Used to style the horizontal rules on an event

.slds-chat-event__body

.slds-chat-event__body — Used for styling the event body text

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-event__agent-message

.slds-chat-event__agent-message — Used to style any messages from an agent in the event

error

.slds-has-error — Modifier to indicate the event was an error

.slds-chat-bookend

.slds-chat-bookend — Used to style a chat bookend

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

stop

.slds-chat-bookend_stop — Modifier for bookends which stop a chat session

past

.slds-chat_past — Apply when displaying chat logs that appeared in the past

.slds-chat-message__text_delivery-failure-reason

.slds-chat-message__text_delivery-failure-reason — Element that contains feedback for why inbound message failed

error

.slds-has-error — Modifier to indicate the event was an error

listbox

.slds-listbox — Listbox container

base

.slds-dynamic-menu

.slds-dynamic-menu__header

.slds-dynamic-menu__header — Headers styles for dynamic menu

.slds-global-search__form-element div

.slds-global-search__form-element div — Primary combobox that contains the search input, handles sizing

.slds-is-active

.slds-is-active — Active state of an item

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.

base

.slds-popover — A dialog popover, `.slds-popover`, can be applied to all variants of a dialog popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied. A dialog popover requires at least one focusable element.

.slds-popover_edit

.slds-popover_edit — Dialog specific for inline-edit popover

.slds-form-element__label_edit

.slds-popover__meta

.slds-popover__meta — Applies styles for meta content of popover

.slds-popover__body

.slds-popover__body — Applies styles for primary content area of popover

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-popover__body_small

.slds-popover__body_small — Applies a max-height and vertical scrolling to a popover body

.slds-popover__header

.slds-popover__header — Applies styles for top area of popover

.slds-popover__footer

.slds-popover__footer — Applies styles for footer area of popover

.slds-popover__footer_form

.slds-popover__footer_form — Applies styles to center align content for footer area of a form popover

.slds-popover__close

.slds-popover__close — Close button within a popover

.slds-popover_small

.slds-popover_small — Width modifier for popover - small

.slds-popover_medium

.slds-popover_medium — Width modifier for popover - medium

.slds-popover_large

.slds-popover_large — Width modifier for popover - large

.slds-popover_full-width

.slds-popover_full-width — Modifier for popover to take 100% width

.slds-popover_hide

.slds-popover_hide — Modifier to hide a popover

.slds-popover_dark

.slds-popover_dark — Applies styles for dark variant of popover

brand

.slds-popover_brand — Initializes a brand popover

.slds-popover_brand-top

.slds-popover_brand-top — Applies popover brand styles to top

.slds-popover_brand-left

.slds-popover_brand-left — Applies popover brand styles to left

.slds-popover_brand-bottom

.slds-popover_brand-bottom — Applies popover brand styles to bottom

.slds-popover_brand-right

.slds-popover_brand-right — Applies popover brand styles to right

error

.slds-popover_error — Initializes an error non-modal dialog

.slds-popover__body_scrollable

.slds-popover__body_scrollable — Applies scrollable styles for popovers

feature

.slds-popover_feature — Initializes a feature non-modal dialog

.slds-nubbin_top

.slds-nubbin_top-left

.slds-nubbin_top-right

.slds-nubbin_bottom

.slds-nubbin_bottom-left

.slds-nubbin_bottom-right

.slds-nubbin_left

.slds-nubbin_left-top

.slds-nubbin_left-bottom

.slds-nubbin_right

.slds-nubbin_right-top

.slds-nubbin_right-bottom

.slds-nubbin_top-left-corner

.slds-nubbin_bottom-left-corner

.slds-nubbin_top-right-corner

.slds-nubbin_bottom-right-corner

.slds-nubbin_left-top-corner

.slds-nubbin_right-top-corner

.slds-nubbin_left-bottom-corner

.slds-nubbin_right-bottom-corner

panels

.slds-popover_panel

Label for panels

.slds-popover_panel__label

prompt

.slds-popover_prompt — Initializes a prompt non-modal dialog

.slds-popover_prompt__heading

.slds-popover_prompt__heading — Applies styles for heading text of prompt

.slds-popover_prompt__action-link

.slds-popover_prompt__action-link — Applies styles for the optional action link in the footer of prompt

.slds-popover_prompt_top-left

.slds-popover_prompt_top-left — Position Prompt top left

.slds-popover_prompt_top

.slds-popover_prompt_top — Position Prompt top center

.slds-popover_prompt_top-right

.slds-popover_prompt_top-right — Position Prompt top right

.slds-popover_prompt_bottom-left

.slds-popover_prompt_bottom-left — Position Prompt bottom left

.slds-popover_prompt_bottom

.slds-popover_prompt_bottom — Position Prompt bottom center

.slds-popover_prompt_bottom-right

.slds-popover_prompt_bottom-right — Position Prompt bottom right

walkthrough

.slds-popover_walkthrough — Initializes a walkthrough non-modal dialog

.slds-popover_walkthrough-alt

.slds-popover_walkthrough-alt — Alternate background for walkthrough non-modal dialog

warning

.slds-popover_warning — Initializes an warning non-modal dialog

.slds-popover__body_scrollable

.slds-popover__body_scrollable — Applies scrollable styles for popovers

einstein

.slds-popover_einstein — Initializes a Einstein non-modal dialog

base

.slds-modal_prompt — Initializes Prompt style notification

base

.slds-popover_tooltip — Initializes a tooltip

rise

.slds-rise-from-ground — Toggles on tooltip

fall

.slds-fall-into-ground — Toggles off tooltip

bottom-to-top

.slds-slide-from-bottom-to-top — Slides tooltip from bottom to top

top-to-bottom

.slds-slide-from-top-to-bottom — Slides tooltip from top to bottom

right-to-left

.slds-slide-from-right-to-left — Slides tooltip from right to left

left-to-right

.slds-slide-from-left-to-right — Slides tooltip from left to right

.slds-truncate

.slds-truncate — Creates truncated text

.slds-listbox__option-header

.slds-listbox__option-header — Header for choosable option within listbox

.slds-listbox__option-icon

.slds-listbox__option-icon — Container for listbox option icon

.slds-has-focus

.slds-has-focus — Focus state of a vertical listbox option

.slds-listbox__option_entity

.slds-listbox__option_entity — Modifies the listbox option if it contains an entity object

.slds-listbox__option_plain

.slds-listbox__option_plain — Modifies the listbox option if it contains an plain object or string

.slds-listbox__option_has-meta

.slds-listbox__option_has-meta — If the listbox option has metadata or secondary information that sits below its primary text

.slds-is-selected

.slds-is-selected — Modifier that makes selected icon visible

.slds-listbox__option-text_entity

.slds-listbox__option-text_entity — The main text of an entity listbox

.slds-listbox__option-meta

.slds-listbox__option-meta — The metadata or secondary text of an entity listbox

.slds-listbox__icon-selected

.slds-listbox__icon-selected — The icon within a plain listbox that indicates if an option has been selected or not.

.slds-listbox_vertical

.slds-listbox_vertical — Creates a vertical listbox

.slds-dropdown_length-5

.slds-dropdown_length-5 — Forces overflow scrolling after 5 list items

.slds-dropdown_length-7

.slds-dropdown_length-7 — Forces overflow scrolling after 7 list items

.slds-dropdown_length-10

.slds-dropdown_length-10 — Forces overflow scrolling after 10 list items

.slds-dropdown_length-with-icon-5

.slds-dropdown_length-with-icon-5 — Forces overflow scrolling after 5 list items with an icon

.slds-dropdown_length-with-icon-7

.slds-dropdown_length-with-icon-7 — Forces overflow scrolling after 7 list items with an icon

.slds-dropdown_length-with-icon-10

.slds-dropdown_length-with-icon-10 — Forces overflow scrolling after 10 list items with an icon

.slds-is-expanded

.slds-is-expanded — Expanded state of a selection group

.slds-listbox-toggle

.slds-listbox-toggle — Toggle button to show all of the pill selections

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.

.slds-global-actions

.slds-global-actions — Global actions component wrapper

.slds-global-actions__item

.slds-global-actions__item — List item for each global action

.slds-global-actions__item-action

.slds-global-actions__item-action — The actionable button inside of a global actions list item

.slds-global-actions__avatar

.slds-global-actions__avatar — User profile action icon

.slds-global-actions__task

.slds-global-actions__task — Task action icon

.slds-global-actions__notifications

.slds-global-actions__notifications — Notification action icon

.slds-global-actions__favorites

.slds-global-actions__favorites — Favorites action button group

.slds-global-actions__favorites-action

.slds-global-actions__favorites-action — Star icon inside of favorites button group

.slds-is-selected

.slds-is-selected — Selected/clicked state on favorites button

.slds-is-disabled

.slds-is-disabled — Disabled state on favorites button

.slds-global-actions__favorites-more

.slds-global-actions__favorites-more — More dropdown icon inside of favorites button group

.slds-notification-badge

.slds-notification-badge — Notification counter badge