Skip to main content

Selector API

Rules must target at least one .sp-* class from the tables below. Every .sp-* class in a selector must be from this list. Unknown classes are rejected at validation time.

Non-.sp- tokens are allowed as part of a selector, provided a valid .sp-* class is also present:

/* Allowed: sp- root class present, element and class descendants are fine */
.sp-topbar a { color: white; }
.sp-markdown-content h1, .sp-markdown-content h2 { color: #004831; }
.sp-sidenav-item-bg div { color: #2d406c; }

/* Rejected: no sp- class at all */
h1 { color: red; }

/* Rejected: sp-unknown not in the allowed list */
.sp-unknown { color: red; }

Generic components

Selector	Component	Notes
`.sp-app`	Consumer app root	Set `--sp-*` token variables here.
`.sp-page-bg`	Page background behind the whole consumer app	Overrides the default light and dark page background.
`.sp-dropdown`	Any dropdown wrapper	Shared Select component. All product selectors.
`.sp-dropdown-trigger`	Any dropdown trigger button
`.sp-dropdown-panel`	Any dropdown options panel	Option items are div elements. Target with `.sp-dropdown-panel div`.
`.sp-radio`	Any radio button row	Routing modal, mobile mode picker.
`.sp-badge`	Any counter badge	Search result tab counts.

Top bar

Selector	Component	Notes
`.sp-topbar`	Top navigation bar	Also applied to the profile icon button.
`.sp-topbar-logo`	Portal name and logo link
`.sp-topbar-product-selector`	Product dropdown wrapper
`.sp-topbar-product-selector-button`	Product dropdown trigger button
`.sp-topbar-product-selector-options`	Product dropdown panel
`.sp-topbar-profile-button`	Profile icon button	Use to override sp-topbar styles on the button specifically. Border rules are ignored to prevent layout overflow.
`.sp-topbar-hamburger`	Sidebar-open icon button (tablet and mobile only)	Sits inside `.sp-topbar`. Use for finer-grained control of the hamburger button.
`.sp-topbar-actions`	Right-side icon group (profile, search) on mobile	Wrapper around the icons shown at tablet and mobile breakpoints.
`.sp-accent-divider`	Colored stripe below the top bar	Override via `--sp-accent-divider-color`.

Landing page

Selector	Component	Notes
`.sp-landing-page`	Landing page outer wrapper
`.sp-landing-page-bg`	Inner section behind the product grid	Separate from `.sp-landing-page`. Must be styled independently.
`.sp-hero`	Hero section wrapper
`.sp-hero-description`	Hero text and description area	Contains a prose container.
`.sp-product-grid`	Product tile grid container
`.sp-product-tile`	Individual product card
`.sp-product-tile-accent`	Colored accent bar on tile	Override via `--sp-product-tile-accent-color`.
`.sp-product-tile-title`	Product name
`.sp-product-tile-description`	Product description text

Profile menu

Selector	Component
`.sp-profile-menu`	Profile dropdown panel
`.sp-profile-email`	User email text in desktop profile dropdown
`.sp-profile-provider-button`	Provider (single sign-on) login button
`.sp-profile-mode-panel`	Light, dark, and system mode flyout panel
`.sp-profile-mode-item`	Mode option button (Light, Dark, System)
`.sp-mode-toggle`	Mode toggle button in the top bar (logged-out only)
`.sp-mode-toggle-panel`	Dropdown panel of the logged-out Mode toggle
`.sp-mode-toggle-item`	Mode option button in logged-out dropdown
`.sp-login-button`	Log in button in the top bar (logged-out only)
`.sp-profile-mobile`	Mobile profile slide-out panel
`.sp-profile-mobile-title`	Panel heading text ("Profile")
`.sp-profile-mobile-header`	Header row (title and close button). `border-color` controls the bottom divider line.
`.sp-profile-mobile-close`	Close button
`.sp-profile-mobile-user`	User email and manage account section. `border-color` controls the bottom divider line.
`.sp-profile-mobile-email`	User email text
`.sp-profile-mobile-manage-link`	"Manage my account" link
`.sp-profile-mobile-mode`	Dark, light, and system mode picker section. `border-color` controls the bottom divider line.
`.sp-profile-mobile-mode-label`	Mode section label ("Mode" and icon)
`.sp-profile-mobile-mode-item`	Each Light, Dark, or System radio row
`.sp-profile-mobile-mode-icon`	Mode option preview image (light, dark, system)
`.sp-profile-mobile-mode-radio`	Radio input circle border color (all states)
`.sp-profile-mobile-mode-radio-dot`	Radio filled dot (shown when selected)
`.sp-profile-mobile-logout`	Logout (or login) row

Search

Selector	Component	Notes
`.sp-search-button`	Search trigger button in top bar
`.sp-search-button-key`	Keyboard shortcut hint containers
`.sp-search-input`	Search text input
`.sp-search-modal`	Search dialog container
`.sp-search-modal-exit`	Exit and close area at top of search modal (desktop)
`.sp-search-modal-close`	Close button on mobile search modal
`.sp-search-modal-dropdown`	Product filter dropdown panel
`.sp-search-modal-tabs`	All, Products, APIs tab row
`.sp-search-modal-tab-badge`	Result count badge on each tab
`.sp-search-modal-tab-scroll-arrow`	Left and right scroll arrows on the tab list when it overflows
`.sp-search-mobile-product-selector`	Product filter dropdown trigger button (mobile search view)
`.sp-search-mobile-product-selector-options`	Product filter dropdown options panel (mobile search view)
`.sp-search-result-item`	Individual result row
`.sp-search-result-highlight`	Highlighted matching text within a result
`.sp-search-empty-state`	Empty state shown before any search is performed
`.sp-search-no-results`	State shown when a search returns no results
`.sp-search-loading`	Loading indicator while results are fetching
`.sp-operation-method`	HTTP or AsyncAPI method label (GET, POST, PUB), shown in search results and the side navigation	Override `color`. Defaults come from the `--sp-method-*` CSS variables.

Side navigation

Selector	Component	Notes
`.sp-sidenav`	Side navigation panel
`.sp-sidenav-inner`	Inner scrollable area	Has its own background. Must be targeted separately from `.sp-sidenav`.
`.sp-sidenav-item`	Nav item row (outer wrapper)	Does not directly render background or text color.
`.sp-sidenav-item-bg`	Nav item inner background div	Target this for background and hover colors.
`.sp-sidenav-item--active`	Active nav item
`.sp-sidenav-api-item`	API endpoint group item
`.sp-sidenav-api-subnav`	Expanded operations panel
`.sp-sidenav-api-tag`	Tag and group header row
`.sp-sidenav-api-hover`	Hover highlight overlay
`.sp-sidenav-api-operation`	Individual operation row	Set text color on the side nav.
`.sp-sidenav-api-operation--active`	Active and selected operation
`.sp-sidenav-mobile`	Responsive side-nav drawer panel (mobile and tablet)
`.sp-sidenav-header`	Header strip at the top of the responsive side-nav
`.sp-sidenav-product-selector`	Product switcher wrapper inside the responsive side-nav header
`.sp-sidenav-product-selector-button`	Trigger button of the product switcher in the responsive side-nav
`.sp-sidenav-product-selector-options`	Dropdown options list of the product switcher in the responsive side-nav

Main content

Selector	Component	Notes
`.sp-content`	Main content wrapper
`.sp-content-breadcrumb`	Breadcrumb bar
`.sp-markdown-content`	Markdown and HTML document content
`.sp-doc-toc`	Table of contents sidebar
`.sp-doc-toc-nav`	Nav inside the sidebar	Set `min-height: 100%` to extend a left border the full page height.
`.sp-doc-toc-link`	Table of contents link
`.sp-doc-toc-link--active`	Currently visible section link
`.sp-doc-anchor-link`	Anchor copy-link button beside h2 and h3 headings	SVG icon. Use `fill` to change color, not `color`.
`.sp-doc-last-modified`	Last modified date string
`.sp-doc-divider`	Horizontal rule below document title	Use `background-color` to change color. `border-top` and `border-bottom` have no visible effect.
`.sp-doc-layout`	Doc page outer flex container
`.sp-doc-content`	Doc page inner content column

API viewer

Selector	Component	Notes
`.sp-api-viewer`	API spec renderer wrapper
`.sp-api-viewer-toolbar`	Toolbar above the spec
`.sp-api-viewer-content`	Scrollable spec content area	Use `--color-canvas` CSS variables for Stoplight Elements internal backgrounds.
`.sp-api-viewer-download-button`	Download API dropdown trigger
`.sp-api-viewer-download-options`	Download format options panel
`.sp-api-viewer-renderer-toggle`	Elements and Swagger UI toggle wrapper
`.sp-api-viewer-renderer-toggle-button`	Toggle track button
`.sp-routing-settings-button`	Try-it-out routing button
`.sp-api-viewer-explore-button`	Explore in SwaggerHub link
`.sp-api-viewer-codegen-button`	Generate Code button wrapper
`.sp-api-viewer-studio-button`	Open in Swagger Studio button
`.sp-api-viewer-edit-button`	Edit and manage content button
`.sp-api-viewer-last-modified`	Last modified date above spec

Routing modal

Selector	Component	Notes
`.sp-routing-modal`	Try-it-out routing settings dialog
`.sp-routing-modal-cancel`	Cancel button
`.sp-routing-modal-confirm`	Confirm and save button
`.sp-routing-modal-toggle`	Credentials toggle switch
`.sp-routing-modal-radio`	Radio button container	Use `.sp-routing-modal-radio input + label` to target the dot fill.

Other

Selector	Component
`.sp-tooltip`	Tooltip panel
`.sp-not-found`	404 page wrapper
`.sp-not-found-card`	404 content card
`.sp-not-found-title`	404 heading
`.sp-not-found-message`	404 body text

Footer

Selector	Component
`.sp-footer`	Footer outer wrapper
`.sp-footer-border`	Inner content wrapper. Controls the top border between footer and page content.
`.sp-footer-text`	Footer description text
`.sp-footer-links`	Footer links row
`.sp-footer-links a`	Individual footer link anchors (descendant of `.sp-footer-links`)
`.sp-footer-links span`	Divider icons between links (descendant of `.sp-footer-links`)
`.sp-footer img`	Footer logo image (descendant of `.sp-footer`)
`.sp-branding-bar`	SmartBear attribution bar

In this section: