Text

We provide a Volvo Cars type scale for use across Volvo Cars digital ecosystem. It contains several distinct styles, some of which have sub-styles to portray more specific intentions

Variants

The variant prop defines the type style used, with Columbus being the default:

Markup

Each variant comes with its own sensible default HTML element, which can be overridden using the as prop to fit your needs:

Sub-Styles

Some variants have their own sub-styles. These are for use cases where you may need to render a link, or emphasise a portion of text. You can set them with the subStyle prop, for example:

The above examples use the default Columbus variant, but sub-styles are available for Hillary and Bates too:

Sub-styles can also be set without needing to explicitly set their parent variant too, this can be useful for cases where you are dynamically rendering text:

Extending the Type Scale

There may be occasions where you would like to use values from the existing type scale, or perhaps even make minor adjustments to the existing styles. For these cases, we provide two options:

1. The extend prop

As with many core components in VCC-UI, we have left the extend prop open on the Text component. Styles can be passed in as you would with a <Block> element or similar:

2. Reusing the existing type scale styles

The styles for all of the type scales are written in a notation that can be directly applied to any extend property. These styles are packaged as part of the theme, and can be loaded in like so:

const { typeScale } = useTheme();
const { peary } = typeScale; // Contains "standard", "inline-link" and "emphasis"

return (
  <Block
    as={peary.standard.element}
    extend={{
      ...peary.standard.styles,
      fontSize: '2rem',
      color: 'teal',
    }}
  >
    This is a custom variation of Peary.
  </Block>
);

Props - Text