Subtitle

Subtitle

Subtitle is a minimal typography helper for secondary page and section text. It renders a styled <p> element and accepts either plain text or any React node as its content.

This component exists to keep supporting text visually consistent across pages, empty states, and detail views.

Props

Name	Type	Required	Description
text	string | ReactNode	Yes	Content rendered inside the subtitle paragraph.
className	string	No	Optional class name prepended before the built-in subtitle-section class.

Behavior

The component always renders a <p> element.

• when className is omitted, the element class is subtitle-section
• when className is provided, the final class string is <className> subtitle-section
• text is rendered directly, so strings and React elements are both supported

Because text is rendered directly, the component does not transform or sanitize the content.

Usage

import Subtitle from "@/components/core/Subtitle";

<Subtitle text="User Settings" />;
<Subtitle text={<strong>Important note</strong>} className="custom-class" />;

Styling

The component uses the .subtitle-section class from index.scss.

@use "../../../styles/variables" as vars;
@use "@carbon/type";

.subtitle-section {
  @include type.type-style("body-02");
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--#{vars.$bcgov-prefix}-text-secondary);
}

Style characteristics:

• based on Carbon body-02
• fixed 14px font size
• 20px line height
• regular 400 weight
• uses the BC Gov secondary text token for color

Testing Notes

The unit tests cover:

• string rendering
• React node rendering
• custom class name composition

These tests confirm both the DOM element type and the final class string.

When To Use

• supporting copy below a page title
• helper text inside empty states
• secondary descriptive text in cards or sections

Avoid using Subtitle as the primary heading element. It is a typography utility, not a heading component.