Newskit Logo
Newskit Logo
View Github


Components are key building blocks of the NewsKit design system.

Actions & Inputs

Components that allow users to take action on a feature or enable users to input data.


Allows users to take actions, and make choices, with a single tap.

Checkboxes are selection controls that allow users to select one or multiple items from a group of options. They typically appear in forms.

Forms allow users to enter and edit text content into a UI.

Radio Buttons are selection controls that are typically used in forms

Select components allow users to select one option from a list.

Used anywhere a user would like to easily share something with social media.

Allows users to choose a single value or range between min and max values by sliding a thumb.

Text Fields allow users to enter and edit text content into a UI. They typically appear in forms.

Lets users enter and edit text.

Feedback & Status

Components that provide users with system or user feedback & status.

Demonstrates the progress of a system action e.g. waiting for a page to load.

Indicates the status of content e.g. ’new’ or ’updated’.

Demonstrates the progress of a system action e.g. waiting for a page to load.

A Toast communicates confirmation of an action or a low-priority message that does not need to completely interrupt the user experience.

An Inline message communicates contextual information. They are positioned inline, in close proximity to the element they are adding context to.


Components that help to define the fundamental spacial structure of a feature or page.

The aspect ratio of an image.

A simple container component that can take margin, padding, and style presets.

Contain preview content and actions about a single subject.

A thin line that separates content.

A layout panel that slides out the side of the screen revealing content like navigation or filters.

The Fieldset is used to provide contextual information around a group of form controls in a web form.

Used together to construct a visual grid for responsive page layout.

Used to construct a visual grid for responsive page layout. A Proxy for CSS grid.

A Modal is a layout panel that presents critical information or requests users input without navigating away from the current page.

A low-level foundational component used to layout items in a horizontal or vertical stack.

The Structured List is a layout component that groups similar or related content.

A pair of components which can be used to show and hide content at different breakpoints.


Components that provide or control rich media.

Used to embed sound content in web and app interfaces.

Small SVG shapes, ranging from basic UI shapes to brand logos.

An element of media.

Allows user to mute, increase or lower audio volume.


Components that enable users to move between pages or content.

Allows user to jump to a new location when clicked.

A Menu displays a list of navigational items. They are displayed either at the top of a screen, or at the side where space allows.

Enables a user to scroll a number of interface elements.

Allows users to alternate between views within the same context.

Used as a way of classifying content, typically using keywords. When clicked it will take a user to content of the same category.

Provides context and actions related to a particular section of content that follows below on the screen.


Components that display specific written content.

A small line of text which lists the authors of an article, along with their titles if provided.

A sentence often added to an image or video to describe or explain what the image or video is showing.

Element for displaying dates, usually publication dates on news articles.

A simple component that is comprised of two elements a Kicker, and a Heading.

Typically is a numbered list of items.

An introductory paragraph in an article, which summarises the article’s content.

A paragraph, which can be used to summarize any text content.

Typically is a bulleted list of items.

Third Party Integrations

Components that interact with a third-party service.

Non-visual component which embeds the consent management script.

A link which opens the consent manager dialog, requires the Consent component.

Non-visual component which embeds the client-side experimentation script.

Non-visual component which embeds the Tealium tag manager script.