Newskit Logo
About

Components

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.

Button

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

Used to collect information from users, and to validate fields in certain rules.

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.

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.

Layout

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.

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

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

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

Media

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.

Navigation

Components that enable users to move between pages or content.

Allows user to jump to a new location when clicked.

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.

Text

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.

Utilities