Component Categorization

Colors

Type

Icons

• .sap-icon

Core

Elements

• html, body
• h1, h2, h3, h4, h5, h6
• blockquote, figure, ol, p, table, ul
• code, pre
• img
• a, button, input[type=submit]
• input[type=checkbox], input[type=radio], input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea
• select
• fieldset

Layout

Templating

• .fd-ui, .fd-app
• .fd-page
• .fd-section

Containers

• .fd-panel-grid, .fd-panel
• .fd-container, .fd-col

Components

Application

• .fd-global-nav
• .fd-mega-menu
• .fd-side-nav
• .fd-breadcrumb
• .fd-action-bar

Navigation

• .fd-tabs
• .fd-dropdown, .fd-contextual-menu
• .fd-link
• .fd-nav
• .fd-pagination

Actions

• .fd-button, .fd-button-group
• .fd-toolbar

Inputs

• .fd-form > .fd-form__group
• .fd-input-group
• .fd-toggle

Lists

• .fd-list-group
• .fd-table
• .fd-tree
• .fd-tile-grid, .fd-tile, .fd-product-tile

Messages

• .fd-modal
• .fd-alert

Indicators

• .fd-badge, .fd-label
• .fd-identifier
• .fd-image
• .fd-spinner
• .fd-tag

Assistance

• .fd-inline-help

Helpers