Text

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

Overview

Resources

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 type="body">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"> and <Text type="body"> respectively.
Make sure to include as prop for heading text, to set the text hierarchy.

Variations

All Text Types & Sizes

Body text

Size

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

Default (small)


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

xSmall

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


<Text type="body" 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.


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


<Text type="body" weight="semibold">
  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.


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

Heading	Size	When to use
Loading...	`small`	`small` and `medium` are most suitable for titles such as the page header and component headers, such as modals, drawers, and cards.
Loading...	`medium`	`small` and `medium` are most suitable for titles such as the page header and component headers, such as modals, drawers, and cards.
Loading...	`large`	`large` is commonly used in full-width page banners to call out a tagline, as well as leading body text.
Loading...	`xLarge`	`xLarge` should be used sparingly and in eye-catching situations like the header of a page upon login.
Loading...	`xxLarge`	`xxLarge` and `xxxLarge` are to only be used with marketing and brand related content, such as onboarding, billing, and retention.
Loading...	`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.


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

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

Disabled text

Disabled text is used when text appears within a disabled component. The disabled prop uses the opacity-disabled token, rather than changing the color of the text.


<Text type="body" disabled>
  The quick brown fox jumps over the lazy dog.
</Text>

Heirarchy

Text heirarchy can be set to the following HTML elements:

Headings can use h1, h1, h3, h4, h5, h6, and span
Body text can use paragraph, span, label, or any of the heading elements
Eyebrow text can use 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.


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

AI Heading

Using the ai prop with the text type heading gives an AI appearance to the heading with the AI icon.


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

`aiPlacement`

The aiPlacement prop can be used to position the AI icon before or after the text.


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

`disabled`

Sometimes, the AI heading may appear inside a component that is disabled. The disabled prop can be used to show the AI heading in a disabled state.


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