Welcome to Camp,
ActiveCampaign’s Design System.

Camp is our visual language and design foundation, uniting brand identity and platform. It empowers us to create consistent, scalable experiences across our products, with a toolkit of components, styles, and resources for designers and engineers alike.

Components

Next Gen Components 🚀

Next Generation components are sleek and extra performant, with improved developer experience and the latest look and feel of ActiveCampaign.

Banner

Displays an important, succinct message, and provides actions for users to address.

Breadcrumbs

Indicates the current page's location within a navigational hierarchy.

Button

Triggers an action when clicked.

Chip

Represents an input, attribute, or action.

Fullscreen Takeover

A full screen modal that takes over the entire screen to focus on more complex tasks.

Icon

A small graphical representation of a program or function.

Icon Button

A button that displays an icon instead of text.

Link

Navigational element that allows users to click through to another page or a different part of the same page.

Loading Indicator

Provides visual feedback for processes that take a noticeable amount of time to complete.

Popover

A transient view that shows on top of other content onscreen when requested.

Tabs

Allows users to switch between different views or functional aspects of an application.

Text

Used to display text in UI, supports various styles and options.

Tooltip

A small informational box that appears when hovering over an element.

All Components

Accordion

Displays a list of items in a collapsible format.

AI

Integrates artificial intelligence features.

Avatar

Displays a user's profile picture.

Banner

Displays an important, succinct message, and provides actions for users to address.

Breadcrumbs

Indicates the current page's location within a navigational hierarchy.

Button

Triggers an action when clicked.

Card

A flexible container for a variety of content.

Checkbox

Allows users to select one or more items from a set.

Chip

Represents an input, attribute, or action.

Color Picker

Allows users to select a color from a range of colors.

Combobox

A combination of a text input field and a dropdown list.

Date Picker

Allows users to select a date from a popup calendar.

Drawer

A panel that slides in from the edge of the screen to display options or information.

Dropdown

Allows users to select an option from a dropdown menu.

Flex

A layout model providing a more efficient way to lay out, align and distribute space among items in a container.

Fullscreen Takeover

A full screen modal that takes over the entire screen to focus on more complex tasks.

Icon

A small graphical representation of a program or function.

Icon Button

A button that displays an icon instead of text.

Illustration

Artistic imagery used to convey a specific message or theme.

Input

Allows users to enter text into a UI. It's a component that handles user input.

KPI Card

Displays key performance indicators (KPIs) to help users understand complex data at a glance.

Link

Navigational element that allows users to click through to another page or a different part of the same page.

Loading Indicator

Provides visual feedback for processes that take a noticeable amount of time to complete.

Modal

A modal window creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it.

Nested Menu

Categories and their list items available for selection from a popover menu.

Pagination

Divides content into separate pages and provides navigation.

Popover

A transient view that shows on top of other content onscreen when requested.

Radio Button

Allows the user to select one option from a set.

Rich Text Editor

Enables the user to create rich text using a WYSIWYG editor.

Segmented Control

Displays different views or functionalities of your app that are related, yet distinct.

Skeleton

Provides a placeholder preview of your content before the data gets loaded.

Slider

Allows users to select a value from a range by sliding a handle.

Steps

Provides a visual representation of a user's progress through a sequence of steps.

Styled

Applies custom styles to components or HTML elements.

Table

Organizes data in rows and columns, making it easier to compare and analyze.

Tabs

Allows users to switch between different views or functional aspects of an application.

Tag

A small label used to categorize or mark special items.

Text

Used to display text in UI, supports various styles and options.

Textarea

A multi-line text input field that allows users to enter longer form content.

Toast

Provides simple messages about an operation in a small popup.

Toggle

Provides simple messages about an operation in a small popup.

Tooltip

A small informational box that appears when hovering over an element.