Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Subtitles and paragraphs

This is a subtitle - keep it short.

This is a description - can be used for longer subtitles as well.

This is the main paragraph. It has a slightly larger font size than the average paragraphs - which makes it easy to read. The width of the paragraph should not exceed 760 px and should not be smaller than 340 px, otherwise it gets hard to read. Aim for a maximum of 6 lines of text when used at a larger width and 8-12 lines of text when used at a smaller width.

This is another paragraph style, with a smaller font size. It can be used as paragraph or as a label for various components (forms, tags, etc.). The width of this paragraph should not exceed 620 px and should not be smaller than 240 px.

This is a caption text style and it’s mainly used as a label for tags, fields, and image descriptions. Try to use this text style as little as possible, in places where there are constraints regarding the available space. Bold style can be used to enhance contrast.

This is the text style used for code snippets and code pills. Try to stick to the Regular style as much as possible.

Text styles

This is how an inline link looks like. Here is an example of a PillContainer on light background and here it is on dark background

This is a superscript example ^superscript

This is a superscript example _subscript

UL (unordered, nested list)

List item level 1
List item level 2
- List item level 2.1
- List item level 2.2
List item level 3
- List item level 3.1
- List item level 3.2
  - List item level 3.2.1
  - List item level 3.2.2

OL (ordered, nested, list)

List item level 1
List item level 2
List item level 3
1. List item level 3.1
2. List item level 3.2

DL (definition list)

Definition list title 1: This is the body of the definition list 1; This is the body of the definition list 2
Definition list title 2: This is the body of the definition list 2.1; This is the body of the definition list 2.2
Definition list title 3: This is the body of the definition list 3.1; This is the body of the definition list 3.2

Image by AuthorName on WebsiteName/Link

This is an large size caption. It should be used when there are larger pieces of text to be added. It can also
work as a content highlighter, in an article content.

This can be used as a highlighter for an important information. It could be a quote
inside an article, or it can be used as a top subtitle.

Quote / testimonial

This is a testimonial example that has many specific elements. Use this type of
testimonial for when you need to offer a complete testimonial, with both the review
and the name of the person that wrote it.

John Doe, Director of This Great Company

This is a quote that can be used inside an article’s body. Its structure better
supports the use of it as a highlighter, rather than a quote from an external source.

This is a quote with a link. It can also be used for features description, but as a
quote per se, with a link to an website perhaps.
Learn more

Table

Table example Name and description	DO	DON’T
Text style Small font size text, as caption, can also be used for the text inside a table.	Use small font size paragraph for short sentences. Use captions for larger pieces of text, but not too large.	Don’t use big headings inside a table. Try to use only the styles that correspond to the 14 px and 16 px font sizes.
Tone of voice Be clear and concise	Use clear and short statements.	Don’t overexploit things. If longer information, redirect to a page with more info.
Links and buttons Ensure that all links inside the table fit the overall look of the table.	Use light links, such as simple underline, or stroke buttons (also known as ‘ghosts’).	Don’t use bright solid colors for buttons and ensure enough contrast is achieved.