Text

How to use this component

<i80-text> applies one of the predefined i80 typographic styles to a piece of text, in the HTML tag your document needs.

There are three styles — display for headings, body for running text and code for monospace — and one tag for all three, chosen with the variant attribute:

<i80-text variant="display">Text in the "display" style</i80-text>
<i80-text variant="body">Text in the "body" style</i80-text>
<i80-text variant="code">Text in the "code" style</i80-text>

Each style maps one to one onto the typography tokens. With no tag attribute the element renders a <span>.

The HTML tag

The tag attribute decides which element is rendered:

<i80-text tag="h1" variant="display">Page title</i80-text>
<i80-text tag="p">Paragraph text</i80-text>
<i80-text tag="pre" variant="code">Code sample</i80-text>

Size

The size attribute picks the step in the type scale:

<i80-text tag="h1" variant="display" size="500">Page title in "display" size 500</i80-text>
<i80-text tag="p" size="300">Paragraph text in "body" size 300</i80-text>
<i80-text tag="pre" variant="code" size="100">Code sample in "code" size 100</i80-text>

Each style supports different sizes: display goes from 100 to 500, body and code from 100 to 300. See Attributes below.

Weight

The weight attribute sets the font weight:

<i80-text tag="p" variant="display" size="300" weight="medium">Display text in the "medium" weight</i80-text>
<i80-text tag="p" weight="semibold">Paragraph text in the "semibold" weight</i80-text>
<i80-text tag="pre" variant="code" weight="bold">Code sample in the "bold" weight</i80-text>

Alignment

The align attribute aligns the text left, centre or right:

<i80-text tag="h1" variant="display" align="right">Page title, right-aligned</i80-text>
<i80-text tag="p" align="center">Paragraph, centre-aligned</i80-text>
<i80-text tag="pre" variant="code" align="left">Code sample, left-aligned</i80-text>

Colour

The color attribute takes a name from the foreground palette:

<i80-text tag="p" color="strong">Paragraph with the "strong" colour</i80-text>
<i80-text tag="p" color="action-active">Paragraph with the "action-active" colour</i80-text>
<i80-text tag="p" color="highlight-high-contrast">Paragraph with the "highlight-high-contrast" colour</i80-text>

For the list of foreground colours, see Attributes.

It also takes any CSS colour, which is applied as an inline style. That can be a var() naming one of the colour tokens:

<i80-text tag="p" color="var(--i80-color-palette-blue-400)">This text has the "blue-400" colour</i80-text>

Or one of the standard CSS colour formats (hex, rgb, rgba, hsl, and so on):

<i80-text tag="p" color="#B30000">This text has a "#B30000" (red) colour applied</i80-text>

Structured content

Because the tag is yours to choose, the style can be applied to more than plain text:

<i80-text tag="p" size="300">This text contains some <strong>strong</strong> and <em>em</em> tags, and a
  <i80-link-inline href="#">link</i80-link-inline>.</i80-text>

Sometimes you want one style over a whole block of content. That works, but be careful with it: keep the markup inside meaningful, because semantic HTML is what accessibility and the next developer both rely on.

<i80-text tag="div" size="200" color="strong">
  <p>This is some generic text in a paragraph.</p>
  <ul>
    <li>this list item contains some <strong>strong</strong> and <em>em</em> tags</li>
    <li>this list item contains a <i80-link-inline href="#">link</i80-link-inline></li>
  </ul>
  <p>This is also some generic text in a paragraph.</p>
</i80-text>

The same styles as CSS classes

<i80-text> only sets classes from components.css on the element it renders, so for static text the classes alone do the same job with no element and no JavaScript:

<h1 class="i80-text i80-typography-display-500 i80-font-weight-bold">Page title</h1>
<p class="i80-text i80-typography-body-200 i80-font-weight-regular">Paragraph text</p>
<pre class="i80-text i80-typography-code-200 i80-font-weight-regular">Code sample</pre>

The classes are i80-text, i80-typography-<variant>-<size>, i80-font-weight-<weight>, and where needed i80-text--align-<align> and i80-foreground-<color>. Use the element when the style comes from data at render time, or when you want the allowed size and weight combinations checked for you; use the classes when the text is fixed.

A class written on the tag is put on the rendered element, so <i80-text> combines with a contextual class from another component:

<i80-text tag="h2" variant="display" size="400" color="strong" class="i80-form__header-title">
  My form title
</i80-text>

Attributes

<i80-text> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Conformance rating

<i80-text> renders the tag you name in its tag attribute with the i80 type styles applied, and nothing else. Any conformance issue therefore depends on how you use it, exactly as it would with the plain HTML tag.

The importance of heading levels

The tag attribute is what decides whether a line of text is a heading, so choosing it is an accessibility decision, not a visual one — variant and size change only how the text looks. Headings are used to describe the structure and organize the text content of a webpage. They should be brief, clear, and meaningful. Heading levels should be used in hierarchical order without skipping levels. The h1 tag should come first in the order and be unique.

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).