Migrating VCC UI Text

The VCC UI <Text> component had variant names that were difficult to learn — there was no connection between the name and the rendered output. Some variants were responsive and some were not, some allowed emphasis and some did not. The component also hid the HTML element being used, making it difficult to understand page hierarchy and use the correct element for accessibility and SEO.

The new text styles are applied using CSS class names instead of React components, with names that are easier to learn and understand.

---

New categories

As we analysed usage of the existing styles, text styles fell into natural groupings:

• Headings & statements are fluid in size depending on breakpoint and come with a font weight.
• Body text classes are named after their pixel values and remain the same across breakpoints.

Our most commonly used heading styles follow the familiar HTML convention of h1 and h2:

• cook was most commonly used as the main heading on a page → heading-1
• ootah was expanded from a single style with emphasis/standard modifiers → heading-2
• peary and yang were more rarely used and grouped into the Statement category

---

Reference table

VCC UI	CSS equivalent
<Text variant="yang">	<h1 className="statement-signature">
<Text variant="peary">	<h1 className="statement-3">
<Text variant="cook">	<h1 className="heading-1">
<Text variant="ootah" subStyle="emphasis">	<h2 className="heading-2">
<Text variant="ootah" subStyle="standard">	<h2 className="heading-2">
<Text variant="hillary">	<p className="font-20">
<Text variant="hillary" subStyle="emphasis">	<p className="font-20 font-medium">
<Text>, <Text variant="columbus">	<p>, <p className="font-16">
<Text variant="columbus" subStyle="emphasis">	<p className="font-16 font-medium">
<Text variant="kelly">	<p className="font-16">
<Text variant="bates">	<small className="micro">
<Text variant="amundsen">	<p className="font-16">

---

Key differences

• You choose the HTML element. Instead of the component choosing for you, you pick the semantically correct element (<h1>, <h2>, <p>, <small>, etc.) and apply the visual style with a class name. This keeps the heading hierarchy clear for accessibility and SEO.
• Emphasis is a separate class. Instead of a subStyle="emphasis" prop, add the font-medium utility class alongside the size class.
• All body text defaults to 16px. You don’t need a class at all for standard body text — just use <p>.