Text styles โ
...
The font sizes are adjusted based on the viewport width, following the ZDS breakpoints
Heading โ
...
Variables โ
Heading tags โ
Headings โ
Overrides โ
Attention!
This text style is not included in the /base.scss
version of the @zurich/design-tokens
library, but it is if you use /index.css
. You can also import it individually using /HeadingTags.css
, but will require anyway the use of /base.css
;
For applying the styles no CSS is required, they will use directly the <h*>
tags. If we want to emphasize a word or set of words in the heading with the Ogg
font style, you can use the <em>
tag inside <h1>
, <h2>
and <h3>
. It won't have any effect on <h4>
, <h5>
and <h6>
.
Here are some examples of the outputs.
<h1>
Heading Test
<h2>
Heading Test
<h3>
Heading Test
<h4>
Heading Test
<h5>
Heading Test
<h6>
Heading Test
z-heading
โ
If you don't want to override the values, or you simply want to have more control over the text style applied to each heading, you can use the z-heading
attribute with the value of the corresponding heading to directly apply the style.
z-heading="72"
Heading 72
z-heading="60"
Heading 60
z-heading="48"
Heading 48
z-heading="44"
Heading 44
z-heading="36"
Heading 36
z-heading="32"
Heading 32
z-heading="30"
Heading 30
z-heading="28"
Heading 28
z-heading="24"
Heading 24
z-heading="22"
Heading 22
z-heading="20"
Heading 20
There's alo a special z-heading
value called display
:
<h1 z-heading="display">
Heading Test
Body โ
...
The font can be use with the CSS variable pattern --zf-body-<size>
or width weight modifier --zf-body-<size>--<?weight>
.
- The values for
<size>
are16
(small),18
(medium) and20
(large). - The values for
<?weight>
are300
(forlight
),500
(formedium
),600
(forsemibold
) and700
(forbold
). If a weight modifier is not provided, the weight would benormal
(400
).
The value is set in the font
CSS attribute. Example:
300 Light
Large
Medium
Small
400 Regular
Large
Medium
Small
500 Medium
Large
Medium
Small
600 SemiBold
Large
Medium
Small
700 Bold
Large
Medium
Small
Caption โ
...
As it happens with the body font styles, these ones are also set up with the same mechanisms. This time the format is --zf-capt-<size>
(for normal
or 400
of font weight) or with weight modifier --zf-capt-<size>--<?weight>
.
- The values for
<size>
are12
(small) and14
(large). - The values for
<?weight>
are the same as for th body style.
The value is also set in the font
CSS attribute. Example: