Typography

This section shows how the different typographic elements will look on the site.

The font we use for the website is Noto Sans. The weight (bold or normal or light) of the headings and paragraphs are set centrally in the theme styles, you should not change them on them page.

You can use bold and italics in a normal paragraph if the content warrants it.

Heading 1

There should always be only one Heading 1 per page. Do not change its styling (like setting it to bold or using allcaps) - this holds for all other headings.

Heading 2

Use headings 2-6 in way that they are semantically reflecting the content structure.

Heading 3

Heading 4

Heading 5

Heading 6

This is a normal paragraph, this is a text link nibh quis tincidunt scelerisque, magna purus malesuada erat, feugiat semper urna lectus at sapien. Maecenas ornare, metus ut mattis vehicula, nulla nulla efficitur lacus, vitae congue nisi nibh eget massa. Sed nec pharetra mauris, ac volutpat metus. Praesent sed enim mollis, tincidunt orci sit amet, mattis risus.

• Normal unordered list
• Bullet Point
• Bullet Point

1. Ordered list
2. Bullet Point
3. Bullet Point

• Unordered list.
• Further bullet points with a long text. Praesent consequat, neque ut commodo pharetra, nulla libero laoreet velit, vel feugiat arcu ex nec sapien. Fusce tincidunt sodales ipsum. Quisque quis orci molestie, dignissim orci a, posuere mi.
• And some more

1. Ordered list.
2. Ordered list point with a long text. Praesent consequat, neque ut commodo pharetra, nulla libero laoreet velit, vel feugiat arcu ex nec sapien. Fusce tincidunt sodales ipsum.
3. Further point

This is a blockquote. In sit amet massa sed dolor tempor mattis id et tellus.

Icons

The global default color for icons is set as shown below. But editors have control in any module to select a specific colors if needed.

You can use the whole pro set of FontAwesome icons: This link shows you the set of regular and light icons that can be used and you can also use the brands icons. If you use those icons, copy the snippet for the icon from the FontAwesome website and paste it in here. Check out the icon below on how it is done.

CTAs & Standard Buttons

You can set up various button styles to create a visual hierarchy.

There is a  difference between a normal button like the ones below and the Hubspot CTAs.

These normal buttons you can add anywhere in your content.

Modal Popup

Modals pop-ups are features of various modules. You can give them global style.

Forms

Create a form that has input fields, dropdowns, checkboxes, and everything. Then style it here.