Developer's Guide
Search the component library

Developer's Guide

Components are being hosted on NPM under the @pearson-components organization. The majority will be available in public scope, but some will be privately scoped and require credentials to install.

Elements SDK

We offer an SDK which packages together a set of commonly used components together for easy installation and usage.

Elements SDK consists of pure CSS (precompiled from SCSS) and includes the core set of components for setting up a website with Elemental Design. This list includes components such as:

  • Buttons
  • Colors
  • Forms
  • Typography
  • Breakpoints
  • Icons
  • Inputs
  • Responsive-utilities

Elements SDK also provides a number of React (transpiled from ES6) based components that enhance the design specifications with certain functionalities that allow them to be dropped into an application. These components are based upon the React library, but are also designed to work within any application framework. These components assume that the CSS portion of the Element SDK is also being implemented.
The list of React components includes:

  • Calendar
  • Dropdown
  • Footer
  • StaticAlert
  • Tabs
  • loadingSpinner
  • Table
  • DatePicker
  • TimePicker
  • Buttons
  • Input fields (e.g. text input, radio/check group, select, etc.)

In addition to the compiled CSS, Elements also installs the source SCSS files (and assets) in case you want to integrate it more directly into your existing build process. This also allows you to access some of the SCSS features in your own styles, such as the predefined color variables. Read more on Github or in the developer documentation.

Web Components

The current library of components that is based on React is being rewritten as web components. These are in progress and will continue to be released as they are completed. See the Web Component project on Github for more details.

Help with React