General Sizing and Spacing Guides
Container Size and spacing
The container is used to limit the width of elements on bigger screens.
It should have a maximum width of 1200-1500px and it should be centered to the screen.
On smaller screens it should take the full width, allowing for some space around the content (minumn of 20px on each side).
You can use the standard 12-column grid for web with a gutter of 20px for desktop and 15px for tablet and mobile.
text guidelines
When using longer bodies of text, ideally limit line length to 45–80 characters. Long lines of text can be intimidating and confusing to follow. Shorter lines of length could also hurt readability.
This results to a maximum paragraph width of ~550-600px and a minimum width of ~300px.
If you have no other elements in the same section you may align the text either to the left or to the center.
> Left Aligned
Section Title
Examples of screenings include measuring the level of TSH in the blood of a newborn infant as part of newborn screening for congenital hypothyroidism,
Especially in the taking of a medical history, there is no clear limit between a detecting or quantifying test versus rather descriptive information of an individual. For example, questions regarding the occupation or social life of an individual may be regarded as tests that can be regarded as positive or negative for the presence of various risk factors, or they may be regarded as "merely" descriptive, although the latter may be at least as clinically important.
The result of a test aimed at detection of an entity may be positive or negative: this has nothing to do with a bad prognosis, but rather means that the test worked or not, and a certain parameter that was evaluated was present or not.
> Center Aligned
Section Title
Examples of screenings include measuring the level of TSH in the blood of a newborn infant as part of newborn screening for congenital hypothyroidism,
Especially in the taking of a medical history, there is no clear limit between a detecting or quantifying test versus rather descriptive information of an individual. For example, questions regarding the occupation or social life of an individual may be regarded as tests that can be regarded as positive or negative for the presence of various risk factors, or they may be regarded as "merely" descriptive, although the latter may be at least as clinically important.
The result of a test aimed at detection of an entity may be positive or negative: this has nothing to do with a bad prognosis, but rather means that the test worked or not, and a certain parameter that was evaluated was present or not.
> highlighted text
General Information
Cholesterol levels assess lipid status and metabolic disorders, the risk of atherosclerosis, coronary stenosis, and myocardial infarction.
> highlighted text with icon
General Information
Normal Paragraph - Cholesterol levels assess lipid status and metabolic disorders, the risk of atherosclerosis, coronary stenosis, and myocardial infarction.
Spacing guidelines
Sections should have a top and bottom padding of 64px.
When adding two sections with the same background colour in a row, the paddings should be halved and combined.