Globals

Components

Typography

(external link)

ld-typo #

To give text a certain style of typography, you can use the ld-typo component. Every variant has its own semantic HTML tag that it gets rendered with. Heading styles render with their respective heading tag (h1, h2, etc). You can use the tag attribute, to render the variant with a different HTML tag, while keeping the visual variant style.

Please be aware of our brand guidelines regarding typography.
For more information visit Brand Hub: Typography.

Examples #

Default #

<ld-typo>
  Almost before we knew it, we had left the ground.
</ld-typo>

<p class="ld-typo">
  Almost before we knew it, we had left the ground.
</p>

<LdTypo>
  Almost before we knew it, we had left the ground.
</LdTypo>

Almost before we knew it, we had left the ground.

Paragraphs #

<ld-typo variant="body-xs">
  <b>XS</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ld-typo>

<ld-typo variant="body-s">
  <b>S</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ld-typo>

<ld-typo variant="body-m">
  <b>M</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ld-typo>

<ld-typo variant="body-l">
  <b>L</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ld-typo>

<ld-typo variant="body-xl">
  <b>XL</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ld-typo>

<p class="ld-typo--body-xs">
  <b>XS</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="ld-typo--body-s">
  <b>S</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="ld-typo--body-m">
  <b>M</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="ld-typo--body-l">
  <b>L</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p class="ld-typo--body-xl">
  <b>XL</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<LdTypo variant="body-xs">
  <b>XS</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</LdTypo>

<LdTypo variant="body-s">
  <b>S</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</LdTypo>

<LdTypo variant="body-m">
  <b>M</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</LdTypo>

<LdTypo variant="body-l">
  <b>L</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</LdTypo>

<LdTypo variant="body-xl">
  <b>XL</b>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</LdTypo>

XS: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

S: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

M: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

L: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

XL: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Labels #

<ld-typo variant="label-s">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="label-m">
  Almost before we knew it, we had left the ground.
</ld-typo>

<p class="ld-typo--label-s">
  Almost before we knew it, we had left the ground.
</p>

<p class="ld-typo--label-m">
  Almost before we knew it, we had left the ground.
</p>

<LdTypo variant="label-s">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="label-m">
  Almost before we knew it, we had left the ground.
</LdTypo>

Almost before we knew it, we had left the ground.

Captions #

<ld-typo variant="cap-m">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="cap-l">
  Almost before we knew it, we had left the ground.
</ld-typo>

<p class="ld-typo--cap-m">
  Almost before we knew it, we had left the ground.
</p>

<p class="ld-typo--cap-l">
  Almost before we knew it, we had left the ground.
</p>

<LdTypo variant="cap-m">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="cap-l">
  Almost before we knew it, we had left the ground.
</LdTypo>

Almost before we knew it, we had left the ground.

Headings #

Headings are used as an introduction into a topic or a content section and for visual and semantic differentiation between content blocks.

A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
If you really must place headings in a way that they are visually not following a semantic hirarchicy, use the variant property for visually styling the heading according to the design given, while still applying correct semantical heading levels using the level prop.

<ld-typo variant="h1">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="h2">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="h3">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="h4">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="h5">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="h6">
  Almost before we knew it, we had left the ground.
</ld-typo>

<h1 class="ld-typo--h1">
  Almost before we knew it, we had left the ground.
</h1>

<h2 class="ld-typo--h2">
  Almost before we knew it, we had left the ground.
</h2>

<h3 class="ld-typo--h3">
  Almost before we knew it, we had left the ground.
</h3>

<h4 class="ld-typo--h4">
  Almost before we knew it, we had left the ground.
</h4>

<h5 class="ld-typo--h5">
  Almost before we knew it, we had left the ground.
</h5>

<h6 class="ld-typo--h6">
  Almost before we knew it, we had left the ground.
</h6>

<LdTypo variant="h1">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="h2">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="h3">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="h4">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="h5">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="h6">
  Almost before we knew it, we had left the ground.
</LdTypo>

Almost before we knew it, we had left the ground.

Branding variants `b*` #

b* headings should be only a couple of words long.

<ld-typo variant="b1">
  Lorem ipsum
</ld-typo>

<ld-typo variant="b2">
  Lorem ipsum
</ld-typo>

<ld-typo variant="b3">
  Lorem ipsum
</ld-typo>

<ld-typo variant="b4">
  Lorem ipsum
</ld-typo>

<ld-typo variant="b5">
  Lorem ipsum
</ld-typo>

<ld-typo variant="b6">
  Lorem ipsum
</ld-typo>

<h1 class="ld-typo ld-typo--b1" aria-label="Lorem ipsum">
  Lorem ipsum
</h1>

<h2 class="ld-typo ld-typo--b2" aria-label="Lorem ipsum">
  Lorem ipsum
</h2>

<h3 class="ld-typo ld-typo--b3" aria-label="Lorem ipsum">
  Lorem ipsum
</h3>

<h4 class="ld-typo ld-typo--b4" aria-label="Lorem ipsum">
  Lorem ipsum
</h4>

<h5 class="ld-typo ld-typo--b5" aria-label="Lorem ipsum">
  Lorem ipsum
</h5>

<h6 class="ld-typo ld-typo--b6" aria-label="Lorem ipsum">
  Lorem ipsum
</h6>

<LdTypo variant="b1">
  Lorem ipsum
</LdTypo>

<LdTypo variant="b2">
  Lorem ipsum
</LdTypo>

<LdTypo variant="b3">
  Lorem ipsum
</LdTypo>

<LdTypo variant="b4">
  Lorem ipsum
</LdTypo>

<LdTypo variant="b5">
  Lorem ipsum
</LdTypo>

<LdTypo variant="b6">
  Lorem ipsum
</LdTypo>

Lorem ipsum

Large heading variants `xh*` #

<ld-typo variant="xh1">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="xh2">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="xh3">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="xh4">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="xh5">
  Almost before we knew it, we had left the ground.
</ld-typo>

<ld-typo variant="xh6">
  Almost before we knew it, we had left the ground.
</ld-typo>

<h1 class="ld-typo--xh1">
  Almost before we knew it, we had left the ground.
</h1>

<h2 class="ld-typo--xh2">
  Almost before we knew it, we had left the ground.
</h2>

<h3 class="ld-typo--xh3">
  Almost before we knew it, we had left the ground.
</h3>

<h3 class="ld-typo--xh4">
  Almost before we knew it, we had left the ground.
</h3>

<h3 class="ld-typo--xh5">
  Almost before we knew it, we had left the ground.
</h3>

<h3 class="ld-typo--xh6">
  Almost before we knew it, we had left the ground.
</h3>

<LdTypo variant="xh1">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="xh2">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="xh3">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="xh4">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="xh5">
  Almost before we knew it, we had left the ground.
</LdTypo>

<LdTypo variant="xh6">
  Almost before we knew it, we had left the ground.
</LdTypo>

Almost before we knew it, we had left the ground.

Large branding variants `xb*` #

xb* headings should be only a couple of words long.

<ld-typo variant="xb1">
  Lipsum
</ld-typo>

<ld-typo variant="xb2">
  Lipsum
</ld-typo>

<ld-typo variant="xb3">
  Lipsum
</ld-typo>

<h1 class="ld-typo ld-typo--xb1" aria-label="Lorem ipsum">
  Lipsum
</h1>

<h2 class="ld-typo ld-typo--xb2" aria-label="Lorem ipsum">
  Lipsum
</h2>

<h3 class="ld-typo ld-typo--xb3" aria-label="Lorem ipsum">
  Lipsum
</h3>

<LdTypo variant="xb1">
  Lipsum
</LdTypo>

<LdTypo variant="xb2">
  Lipsum
</LdTypo>

<LdTypo variant="xb3">
  Lipsum
</LdTypo>

Lipsum

Custom tag #

You can use any text variant for visual purposes without sacrificing semantics by using the tag prop.

<ld-typo variant="body-m" tag="h1">
  I'm actually a level 1 heading
</ld-typo>

<ld-typo variant="b5" tag="p">
  I'm actually a paragraph
</ld-typo>

<h1 class="ld-typo--body-m">
  I'm actually a level 1 heading
</h1>

<p class="ld-typo ld-typo--b5" aria-label="I'm actually a paragraph">
  I'm actually a paragraph
</p>

<LdTypo variant="body-m" tag="h1">
  I'm actually a level 1 heading
</LdTypo>

<LdTypo variant="b5" tag="p">
  I'm actually a paragraph
</LdTypo>

I'm actually a level 1 heading

I'm actually a paragraph

I'm actually a level 1 heading

I'm actually a paragraph

Colors #

You may have noticed that all b* and xb* variants use a color given by the current theme, while all other variants inherit their color. While this is the default behaviour, you can still apply a different color on both types of headings. This may be usefull, if, for instance, you need to display a b1 heading in "vibrant yellow" on top of a background using a "rich color".

With great power comes great responsibility. Make sure you follow the brand guidelines. Especially make sure that the text remains readable at all times. Check the text for accessibility issues, such as insufficiant contrast.

Here are some examples on how you can apply different colors on headings:

<style>
.custom-color { color: var(--ld-col-vm); }
</style>

<ld-typo variant="b1" class="custom-color">
  Lorem ipsum
</ld-typo>

<ld-typo variant="h1" style="color: var(--ld-col-vc-600)">
  Almost before we knew it, we had left the ground.
</ld-typo>

<style>
.custom-color { color: var(--ld-col-vm); }
</style>

<h1 class="ld-typo ld-typo--b1 custom-color" aria-label="Lorem ipsum">
  Lorem ipsum
</h1>

<h1 class="ld-typo--h1" style="color: var(--ld-col-vc-600)">
  Almost before we knew it, we had left the ground.
</h1>

<LdTypo variant="b1" style={ { 
  color: 'var(--ld-col-vm)'
} }>
  Lorem ipsum
</LdTypo>

<LdTypo variant="h1" style={ { 
  color: 'var(--ld-col-vc-600)'
} }>
  Almost before we knew it, we had left the ground.
</LdTypo>

Lorem ipsum

Almost before we knew it, we had left the ground.

Lorem ipsum

Almost before we knew it, we had left the ground.

Properties #

Property	Attribute	Description	Type	Default
`ariaLabel`	`aria-label`	Since b* and xb* variants are uppercase, screen readers need to be served a (non-uppercase) aria-label (otherwise they will read out the heading letter by letter). If you're using a b* or xb* variant, an aria-label will be set automatically on the element. The component will use the inner HTML for the label implicitly. If you want to set an aria-label explicitly (such as when you have inner HTML that should not be part of the label), you can use this property.	`string`	`undefined`
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`ref`	`ref`	reference to component	`any`	`undefined`
`tag`	`tag`	The rendered HTML tag. Overrides tag inferred from the variant.	`string`	`undefined`
`variant`	`variant`	The font style. Every variant has a default tag that it renders with.	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body-s" \| "cap-m" \| "body-xs" \| "body-m" \| "body-l" \| "body-xl" \| "cap-l" \| "label-s" \| "label-m" \| "b1" \| "b2" \| "b3" \| "b4" \| "b5" \| "b6" \| "xb1" \| "xb2" \| "xb3" \| "xh1" \| "xh2" \| "xh3" \| "xh4" \| "xh5" \| "xh6"`	`'body-m'`

Shadow Parts #

Part	Description
`"tag"`	Actual tag

Dependencies #

Used by #

Graph #

graph TD;
  ld-cookie-consent --> ld-typo
  ld-header --> ld-typo
  ld-notice --> ld-typo
  ld-sidenav-header --> ld-typo
  ld-sidenav-heading --> ld-typo
  ld-sidenav-navitem --> ld-typo
  ld-sidenav-toggle-outside --> ld-typo
  style ld-typo fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

ld-typo #

Examples #

Default #

Paragraphs #

Labels #

Captions #

Headings #

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Branding variants b* #

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Large heading variants xh* #

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Large branding variants xb* #

Lipsum

Lipsum

Lipsum

Custom tag #

I'm actually a level 1 heading

Colors #

Lorem ipsum

Almost before we knew it, we had left the ground.

Properties #

Shadow Parts #

Dependencies #

Used by #

Graph #

Branding variants `b*` #

Large heading variants `xh*` #

Large branding variants `xb*` #