Markup is Wise's way to visually emphasise parts of a text. It can be applied on standalone texts or inside several components. Use it sparingly.
- to visually emphasise certain words to draw attention
- to inject links to your text
- to convey the sentiment of a word visually
Don’t use markup
- abusively, our product is not a coloring book
- on full text, only tag one or two words
- just to make something pretty without a good reason
Most tags only apply visual emphasis on words by increasing font weight and / or changing color.
Special tags can also add extra functionality by making the text interactive to support actions like opening a URL.
The visual effects that a tag applies don’t need to be translated to screen readers, unless they change the meaning of the content. When a tag changes the meaning or add functionality to the marked words, it might require some extra information to work seamlessly with screen readers. Find out more about them in the attribute list of each tag.
A tag can have additional attributes that may be required for its functionality or to enhance accessibility.
By proceeding you accept our <link url=”https://wise.com/t&c” accessibilityLabel=”Open terms and conditions”>terms and conditions</link>.
Even though the syntax is the same, Markup intentionally avoids using existing HTML tags. Defining our own Wise specific tags allows us to have full control over the supported tags and attributes that comes with its own set of benefits.
Declaring our own tags allows us to be more expressive with our naming, making them more accessible for colleagues with varying technical backgrounds.
It helps us be more flexible by adding attributes that fit, yet equally strict by limiting available attributes for any given tag.
<link url="https://wise.com" accessibilityLabel="Open Wise home page">
Last but not least, it increases safety, by forcing us to parse our own tags, without lazily letting the browser handle it, that would allow for potential injections.
Markup helps to better convey the sentiment of words in a text by applying visual changes. It should be used sparingly in shorter texts or labels. Markdown, however, helps to structure a long block of text (e.g. article or post) by adding hierarchical structure to it. It supports different level of headings, lists, quotes, etc. Given that they’re used for different purposes, they should not be mutually exclusive. In the future we’ll explore the possibility of mixing them.