How to display long strings

Some countries have long numerical values for their currencies so it’s important to choose the right size price component to fit. Check designs and implementation with a localisation expert.

Use conditional logic

When a price is expected to be over 6 digits long use Bpk Price X-Small. Switch all prices to X-Small for currency types that tend to be longer. Some examples are:

If the price is over 9 digits long, round up the digits after the decimal point to the nearest whole number.

Don’t style the trailing or leading text the same as the price.

Don’t allow prices to overflow outside the component container.

Don’t change the colour of the text.

Don’t rearrange the price and trailing text arrangement.

How to avoid wrapping

Wrapping is sometimes inevitable, but there are ways to avoid it through the setup of the design. Aim to use sizes Small or X-Small and follow these steps:

Fix the price to hug the container

Fixing the price component to ‘hug’ and the other content to ‘fill’ will make sure the content moves around the price. See this Figma demo to understand how to do this.

Stack content vertically

Setting text blocks isn’t mobile-friendly when there’s lots of text. Consider designing vertically so content works well on all devices and for languages that require more space.

Remove unnecessary content

Remove content or components that aren't essential to the experience.

Content guidelines

Find out how to create copy for the price component and check out the Money and currency guidelines for more tips on how to write content for prices.

Localisation considerations

Consider the nuance of different languages such as writing direction when creating copy. Translators must understand the context of content to adapt it correctly for each language. Help create high-quality localised experiences by submitting copy for translation as whole strings and not separate strings.

Use the correct formatting for separating thousands and decimals. Some languages use full stops and others use commas.

Don’t truncate pricing with an ellipsis.

Don’t abbreviate the prices using letter designations as they may not be understood by all languages. Check the Money and currency guidelines for more guidance on how to write prices.