@axa-ch/text NPM

Text

A convenience component to apply possible AXA text styles to a piece of text.

It accepts simple text strings as children or top-level HTML tags like <p> or <span>. Nested HTML tags are not supported. The default behaviour of wrapping simple text in a p(aragraph) text can be suppressed via the Boolean attribute nowrap.

Properties

size

Attribute	Details
`size="1"`	Extra Large Text Size
`size="2"`	Large Text Size
`size="3"`	Medium Text Size
`size="4"`	Small Text Size

nowrap

This Boolean attribute nowrap will lead to not render the wrapping p(aragraph) tag

bold

This Boolean attribute adds the font-weight bold

italic

This Boolean attribute adds the font-style italic

Custom Margins

You can overwrite the predefined margins on the custom element tag or use custom css property --text-margin, see the example. Please only do this if this is abolutely necessary, since the default margins are aligned with the styleguide.

Example:

<axa-text size="1">I'm a paragraph</axa-text>

<style>
  axa-text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
  }

  axa-text {
    --text-margin: 0;
  }
</style>

lit