Welcome to Camp,
ActiveCampaign’s Design System.

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.

Combobox

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

Drawer

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

Floating Action Bar

A persistent, contextual toolbar that floats over page content to provide quick access to key actions

Form

A collection of input fields for collecting user information.

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.

Nested Menu

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

Page Header

Popover

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

Progress Bar

A progress bar that displays the progress of a task.

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.

Toggle

Provides simple messages about an operation in a small popup.

Tooltip

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

AI Attachment

A component for displaying and managing file attachments with AI-powered features

AI Banner

ActiveCampaign’s static banners are persistent, non-obtrustive messages that sit inline with the page or modal content. They can be used for education, to let a user know that something in the system has changed, or to generally let the user know about a message that’s important to their workflow within ActiveCampaign.

AI Button

Buttons are used primarily to draw attention and initiate action, whether as a singular call to action or in groupings for the user to make a decision from.

AI Card

Cards are a versatile UI design pattern used to display content in a visually distinct and easily scannable format. This is a specialized card component designed for AI-powered interfaces

AI Chat Input

Specialized input component designed for AI chat interfaces with send button and loading states

AI Chip

Chips are compact components that provide an additional bite of information. They make content easier for the user to visually sort. There are four types of chips commonly used at ActiveCampaign:. This is a specialized chip component for displaying AI-related content and statuses

AI Data Table

Intelligent data table component for displaying and managing structured data in AI-powered interfaces

AI Dropdown

Flexible and accessible dropdown component with customizable appearance and rendering options

AI Dropzone

Drag-and-drop file upload component with AI-powered features for intuitive file handling

AI Data visualization

Comprehensive suite of AI-powered charting components for displaying data insights

AI Feedback Buttons

Capture quick thumbs up/down feedback on AI-generated content

AI Icon button

AI-powered icon buttons for intelligent actions

AI Link

Intelligent navigation component with AI-powered features and enhanced user experience

AI Input

Intelligent input component with AI-powered features and enhanced user experience

AI KPI Card

Flexible and interactive component for displaying key performance indicators with support for various metric formats and comparisons

AI Markdown Content

Renders Markdown content with GitHub Flavored Markdown support and AI-optimized styling

AI Modal

Focused overlay dialog for important actions and information in AI-powered interfaces

AI Popover

Contextual AI overlay anchored to a trigger element

AI Radio

Radio component for selecting one option from a set

AI Segmented Control

A modern, accessible component for selecting one choice from a small set of mutually exclusive options.

AI Textarea

Intelligent text input area for multi-line content with AI-powered features

AI Thinker

Animated Lottie-based component for AI processing and thinking states

AI Toggle

Toggle switch component for the ActiveIntelligence product area.

AI Toast

Event-driven, real-time notifications that provide additional information to the user.

AI Tooltip

Contextual information and guidance component for AI-powered interfaces

AI Banner

Currently available in Camp Next Gen

AI Button

Currently available in Camp 1

Card (AI appearance)

A flexible container for a variety of content.

AI Icon

Now available in the Next Gen Icon package

AI Loading Indicator

Now available in the Next Gen Loading Indicator package

AI Loading Card

AI Segmented Control

Accordion

Displays a list of items in a collapsible format.

Avatar

Displays a user's profile picture.

Color Picker

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

Date Picker

Allows users to select a date from a popup calendar.

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.

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.

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.

Pagination

Divides content into separate pages and provides navigation.

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.

Tag

A small label used to categorize or mark special items.

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.