Text

Text keeps ActiveCampaign’s fonts, weights, and sizes consistent.

Loading...

Overview

Resources

Loading...

Loading...

Loading...

Loading...

Loading...

Install


yarn add @camp/text

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🔄 Unified component with type prop: Removal of dot notation for more flexibility in the text component. The type prop makes it easy to change the type of text from heading to body to eyebrow.

💻 Improved accessibility: Enforcing the as prop on headings ensures that screen readers can properly parse a web page.

Previous implementation


import Text from "@activecampaign/camp-components-text";
 
// Body text
<Text.Body>I am some text</Text.Body>
 
// Heading text
<Text.Heading>I am some text</Text.Heading>
 
// Eyebrow text (used sparingly)
<Text.Eyebrow>I am some text</Text.Eyebrow>

New implementation


import {Text} from "@camp/text";
 
// Body text
<Text>I am some text</Text>
 
// Heading text
<Text type="heading" as="H3">I am some text</Text>
 
// Eyebrow text (used sparingly)
<Text type="eyebrow">I am some text</Text>

Migration steps

Update import statements: replace import Text from '@activecampaign/camp-components-text' with import {Text} from '@camp/text'
Update references: Update references such as <Text.Heading> and <Text.Body> to use the type prop <Text type="Heading">. Body text can be written simply as <Text>
Make sure to include as prop for heading text, to set the text hierarchy.

Usage

Body text

Size

Use the default body text for most paragraph text in ActiveCampaign.

Default (small)

The quick brown fox jumps over the lazy dog.


<Text>
The quick brown fox jumps over the lazy dog.
</Text>

xSmall

Use xSmall body text sparingly, for helper text and legal text.

The quick brown fox jumps over the lazy dog.


<Text
size="xSmall"
>
The quick brown fox jumps over the lazy dog.
</Text>

Weight

By default, body text is regular weight. For UI elements such as labels on inputs, dropdowns, etc., use medium weight. For emphasis, use semiBold weight.

The quick brown fox jumps over the lazy dog.


<Text
weight="medium"
>
The quick brown fox jumps over the lazy dog.
</Text>

Heading text

Heading text should be used for titles across the ActiveCampaign platform. Unlike body text, heading text includes weight baked into the size - weight does not need to be specified for heading text.

Size

Heading text comes in various sizes and styles to meet the needs of the page content.

The quick brown fox jumps over the lazy dog.


<Text
type="body"
size="medium"
as="H3"
>
The quick brown fox jumps over the lazy dog.
</Text>

Heading	Size	When to use
I am a heading	`small`	`small` and `medium` are most suitable for titles such as the page header and component headers, such as modals, drawers, and cards.
I am a heading	`medium`	`small` and `medium` are most suitable for titles such as the page header and component headers, such as modals, drawers, and cards.
I am a heading	`large`	`large` is commonly used in full-width page banners to call out a tagline, as well as leading body text.
I am a heading	`xxLarge`	`xxLarge` and `xxxLarge` are to only be used with marketing and brand related content, such as onboarding, billing, and retention.
I am a heading	`xxxLarge`	`xxLarge` and `xxxLarge` are to only be used with marketing and brand related content, such as onboarding, billing, and retention.

Text color

Color can optionally be applied to text to give text additional meaning. By default, text color is text-default.

The quick brown fox jumps over the lazy dog.


<Text color="text-destructive">The quick brown fox jumps over the lazy dog.</Text>

Text	Color	When to use
I am some text	`text-default`	Used for text most of the time.
I am some text	`text-supportive`	Used for supportive text, such as helper text. For best accessibility, this should be used on a white background.
I am some text	`text-disabled`	Used for text within a UI element when that element is disabled.
I am some text	`text-success`	Used to indicate success.
I am some text	`text-on-emphasis`	Used for text on dark or bright backgrounds.
I am some text	`text-primary`	Used primary, AC Blue text.
I am some text	`text-destructive`	Used for text that indicates a destructive action, or an error or invalid state.

Heirarchy

Text heigharchy can be set to either H1, H2, H3, H4, H5, H6, paragraph, or span. By default, text is set to span. Setting the heirarchy is important for accessibility - it helps ensure a page can be properly parsed by screen readers. Please note that this prop does not change the text visually; it sets the wrapping element on the text.

The quick brown fox jumps over the lazy dog.


<Text
type="heading"
size="medium"
as="H3"
>
The quick brown fox jumps over the lazy dog.
</Text>

Last updated on March 20, 2025