Components

100 Components

Accordions

Last update: Jan 6, 2021

Uses theBootstrap collapse functionality to toggle panels.

Activity List

Last update: Jul 17, 2020

Activity list for Personalized content.

Alerts

Last update: Oct 16, 2020

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Badges

Last update: Dec 17, 2019

Easily highlight new or unread items by adding a badge.

Block Diagram

Last update: Dec 17, 2019

SA replacement for the Interactive Block Diagram, this component uses Slick Slider to present information with hotspots over a Block Diagram.

Buttons

Last update: Dec 8, 2020

The buttons component has many available button classes to quickly create a styled button.

Carousel Interactive

Last update: Dec 17, 2019

A visual component which presents interactive buttons overlaying an image, where each button reveals relevant data (similar to Tabs).

Collapse

Last update: Jul 5, 2020

Bootstrap collapse functionality

Communities

Last update: Dec 17, 2019

The Communities component is a stylized section combining a form and media object list.

Community Support

Last update: Dec 17, 2019

Community support module.

Content Wrapper

Last update: Apr 27, 2020

Provides common wrapper classes for abstract content for consistent display.

Context Nav (Jump to)

Last update: Dec 17, 2019

An unordered list in an aside container used to navigate to a section of the current page.

Custom Forms

Last update: Dec 17, 2019

Custom forms can be used in a variety of places on the CMS and isn't a component in theory.

Custom Search

Last update: Dec 17, 2019

A cascading form that adds additional dropdown selects based on a previous selection.

Datatables

Last update: Apr 27, 2020

Technical tables with filtering and pagination

Demos

Last update: Dec 17, 2019

Description coming soon!!!

Design Resources

Last update: Dec 17, 2019

Description coming soon!!!

Design Tools

Last update: Dec 17, 2019

Description coming soon!!!

Development Boards

Last update: Dec 17, 2019

Description coming soon!!!

Download list

Last update: Dec 17, 2019

A panel provided when downloading multiple files to identify file names, sizes, and download status.

Features Accordion

Last update: Dec 17, 2019

An accordion list to display a list of features.

Features Lists

Last update: Dec 17, 2019

A simple list of features.

Flex Card One

Last update: Oct 30, 2020

Flexible card component intended to be versatile.

Flex Card Two

Last update: Dec 17, 2019

Flexible card component intended to be versatile.

Full Bleed Cards

Last update: Dec 17, 2019

Card style component with text overlaying an image.

Gated Videos

Last update: Oct 30, 2020

Gated Videos

Get Started Navigation

Last update: Dec 17, 2019

Table of contents for the Getting Started pages.

Get Started Tabs

Last update: Dec 17, 2019

Progressive navigation component used to walk a user through a process of working with a product.

Get Started (Jump Start Your Design)

Last update: Dec 17, 2019

Panel for providing resources used to get started working with a product.

Hero Lead

Last update: Aug 5, 2020

Text component used to give high level context to a problem or challenge in relation to the Hero banner.

Hero

Last update: Jul 9, 2020

Banner used to introduce the page with a page title and optional short description.

Icon Signposts

Last update: Jun 8, 2020

Provides a series of links shown below an icon.

Image Overlay

Last update: Dec 31, 2020

Provide text which overlays an image.

Images

Last update: Dec 28, 2020

General documentation for the usage of images.

Info Units in Left Nav

Last update: Dec 17, 2019

Content block to be displayed below other content in the left nav of a page template.

Info Unit

Last update: Dec 17, 2019

Legacy component used to provide additional resources related to a page.

Interactive Block Diagram

Last update: Dec 8, 2020

Provides a list of related links using a Bootstrap popover over a block diagram image.

Jump Start Your Design

Last update: Dec 17, 2019

The Jump Start Your Design component can contain a variety of content and uses hide/show functionality via bootstrap-collapse.js.

Key Parametrics

Last update: Dec 17, 2019

Table to display important data about a product.

Key Topic Cards

Last update: Apr 27, 2020

Card type component capable of providing information for a wide variety of uses, usally with an image and a call-to-action.

Labels

Last update: Dec 17, 2019

Easily append a status or message to any type element

Marketing Card

Last update: Jul 8, 2020

Ideal to place marketing content such as webinars, events, blogs, etc.

Media Flex

Last update: Dec 17, 2019

Extends the standard Bootstrap media component to be more visually rich and mobile responsive.

Megamenu My NXP

Last update: Dec 31, 2020

Megamenu pattern to be used across the NXP website.

Metadata

Last update: Apr 27, 2020

Common metadata styles to be used in a variety of situations.

Mobile Collapse

Last update: Dec 17, 2019

Wrapper to collapse simple components in mobile view with a button to toggle the display of the component.

Modals

Last update: Dec 8, 2020

Extension of Bootstrap's Modal component.

Notice Block

Last update: Dec 17, 2019

Notice block component to highlight important information to the user.

Our Partners

Last update: Dec 17, 2019

Used to display a variety of partner company logos on a page.

Overview

Last update: Oct 30, 2020

Provide an overview for the current page with an optional hide/show functionality.

Page Headline

Last update: Aug 14, 2020

Presents the page title along with additional action buttons such as print and social share icons.

Piped Navigation

Last update: Feb 12, 2020

Horizontal list of anchor links that scroll the user to a section within the current page.

Primary Topic

Last update: Dec 17, 2019

Used to display a single, important related topic to the primary page content.

Product list

Last update: Aug 5, 2020

Provide a list of related products while either highlight each product's value or some metrics to compare between them.

Reference Designs

Last update: Dec 17, 2019

Description coming soon!!!

Provide a selection of recommended products based on the user's chosen application.

Recommended by peripheral application (Peripheral Finder)

Related Products - Title Component

Last update: Dec 17, 2019

Simple title provided above a collection of recommendation components on product summary pages.

Related Products

Last update: Dec 17, 2019

Collection of complimentary products displayed within a slider.

Related Products - Similar Products

Last update: Dec 17, 2019

Suggested by our experts

Related Videos

Last update: Dec 17, 2019

Vertical list of video thumbnails with content to the right including a title that is shortened to one line, a description, the view count and the video time.

Results item

Last update: Nov 4, 2020

Reusable component to be used when dispaying a collection of results items, usually on a single page application.

Results List

Last update: Feb 12, 2020

The Results List is displayed on Single Page App's results pages, and includes the Results Item component.

Rich Media Carousel-Desktop

Last update: Dec 17, 2019

Adaptive slideshow with thumbnails and popups for videos, block diagrams and enlarged image views.

Rich Media Carousel-Mobile

Last update: Dec 8, 2020

Adaptive slideshow with thumbnails and popups for videos, block diagrams and enlarged image views.

Scrollable section

Last update: Jun 15, 2020

Framework to hold any type of long, scrollable contnet and provides links in a left column that smoothly scrolls to that section.

Secondary Topic

Last update: Sep 15, 2020

The Secondary Topic component is a way to display related content and links on a Thought Leadership page.

Section Lead

Last update: Dec 17, 2019

Provides intro text and title to any component.

Show-Hide

Last update: Feb 12, 2020

Component used to hide or show content based on a clicking on a link to toggle between states.

Side Navigation

Last update: Dec 17, 2019

For homepage and overview pages that require a left navigational menu.

Sliders

Last update: Jan 1, 2021

General framework to present many different types of content within a slider while keeping consistent styles and functionality.

SP Buy

Last update: Dec 17, 2019

SP Icons component

SP Guides

Last update: Dec 17, 2019

SP Icons component

SP Hero

Last update: Jul 5, 2020

Hero banner used to display the page name for various types of summary pages.

SP Icons

Last update: Dec 17, 2019

Common component used to display features or links presented with an icon.

SP Nested Icons List

Last update: Dec 17, 2019

Provides information in a table-like display while progressively showing content with a tab-like structure.

Filters for SPAs

Last update: Apr 9, 2020

Filters used on Single Page Apps.

Support Policy

Last update: Dec 17, 2019

Simple component to display support policy details.

Supported Devices

Last update: Dec 17, 2019

Provide a list of related supported devices.

System Requirements

Last update: Dec 17, 2019

A Simple list to display system requirements.

Table Flyout

Last update: Dec 17, 2019

Table flyout for legacy Product Selector.

Tables

Last update: Feb 27, 2020

A collection of different table formats and styles found across the NXP website.

Tabs (for summary pages)

Last update: Dec 17, 2019

Navigation that is touch-enabled and horizontal scrolling for mobile platforms and a folder-style tabbed navigation for larger devices.

Target Applications

Last update: Jan 10, 2020

Display a list of relative applications for a product which can be separated into categories to make scanning them easier.

Last update: Jan 6, 2021

Tree View

Last update: Feb 12, 2020

Display a list of highly structured, hierarchical content.

Type Callout

Last update: Dec 17, 2019

Highly marketing driven component developed for usage on Single Page Apps only.

Value Proposition

Last update: Jul 9, 2020

Promotes the value to the user in working with NXP products, applications, services, etc.

Video Embed

Last update: Dec 17, 2019

Embed video content within the page using services such as YouTube and Brightcove.

Video Filmstrip Desktop

Last update: Dec 17, 2019

Displays an adaptive slideshow with thumbnails and popups in a horizontal format.

Video Filmstrip Mobile

Last update: Dec 17, 2019

Displays an adaptive slideshow with thumbnails and popups in a horizontal format.

Video Player Interactive

Last update: Dec 8, 2020

Interactive Video Player used to play related vidoes on a single page.

Video Player

Last update: Dec 17, 2019

Provides a video player as the main focus of the page, as used on pages such as the Video Summary Page.

What's New Cards

Last update: Dec 17, 2019

Displays timely and relevant articles or info to the page content in a card format.