# Core/Text - Design

Component for displaying text. The visual display can be controlled via `variant`. The underlying HTML element can be controlled via the `as` prop, which defaults to a `span` tag.

## Properties

### Text

A text component isn't very useful if you're not going to put some text in it.

### Variant

Variant describe the contextual purpose of the text. Text may be: heading, to create logic sections within the UI
body, for regular text throughout the UI metric, to display in graphs and data visualizations code, to display
monospace code snippets

### Color

Text inherits color from its container element. In some cases text color may be adjusted outside its container's intention.

### As

Gives semantic meaning to the Text variant (style), setting the underlying element rendered by the component.

## Accessibility

### Guidelines

Key factors to follow for an accessible typography:

* Color. Provide enough contrast between text and its background, check out the minimum recommended [WCAG 2.2 color contrast ratio](https://www.w3.org/TR/WCAG22/#contrast-minimum) (4.5:1).
* Heading hierarchy. Based on the [W3 guidelines](https://www.w3.org/WAI/tutorials/page-structure/headings/), don't skip heading levels. Make sure to separate the semantics from the style.