Components are key building blocks of the NewsKit design system.
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.
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.
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'.
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.
Used together to construct a visual grid for responsive page layout.
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.
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.
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.