Skip to content

Latest commit

 

History

History
206 lines (173 loc) · 4.41 KB

README.md

File metadata and controls

206 lines (173 loc) · 4.41 KB
describes
Text

A component for styling textual content

Variant

Variant takes care of - almost - all use-cases when it comes to texts on pages. Their name reflects the places they meant to be used. It sets size, weight, fontStyle and lineHeight We recommend using variants instead of the aforementioned props.

NOTE: when variant is set, size, weight, fontStyle and lineHeight props are ignored

---
type: example
---
<div>
  <Text variant="descriptionPage"> descriptionPage </Text><br/>
  <Text variant="descriptionSection"> descriptionSection </Text><br/>
  <Text variant="content"> content </Text><br/>
  <Text variant="contentImportant"> contentImportant </Text><br/>
  <Text variant="contentQuote"> contentQuote </Text><br/>
  <Text variant="contentSmall"> contentSmall </Text><br/>
  <Text variant="legend"> legend </Text><br/>
</div>

Text colors

---
type: example
---
<div>
  <Text color="primary">I&#39;m primary text</Text><br/>
  <Text color="secondary">I&#39;m secondary text</Text><br/>
  <Text color="brand">I&#39;m brand text</Text><br />
  <Text color="success">I&#39;m success text</Text><br/>
  <Text color="warning">I&#39;m warning text</Text><br />
  <Text color="danger">I&#39;m danger text</Text><br />
  <Text color="ai-highlight">I&#39;m a highlighted text (by AI)</Text><br />
  <Text color="alert">I&#39;m alert text - DEPRECATED - DO NOT USE</Text>
</div>

Font sizes

---
type: example
---
<div>
  <Text size='descriptionPage'>descriptionPage</Text><br/>
  <Text size='descriptionSection'>descriptionSection</Text><br/>
  <Text size='content'>content</Text><br/>
  <Text size='contentSmall'>contentSmall</Text><br/>
  <Text size='legend'>legend</Text>
</div>

Font weights

---
type: example
---
<div>
  <Text weight="weightRegular">weightRegular</Text><br/>
  <Text weight="weightImportant">weightImportant</Text>
</div>

Font styles

---
type: example
---
<div>
  <Text fontStyle="italic">I&#39;m italic text</Text><br/>
  <Text>I&#39;m normal text</Text>
</div>

Line heights

---
type: example
---
<div>
  <br/><br/>
  <Text lineHeight="lineHeight100">
    <p>{lorem.paragraph()}</p>
  </Text>
  <Text lineHeight="lineHeight125">
    <p>{lorem.paragraph()}</p>
  </Text>
  <Text lineHeight="lineHeight150">
    <p>{lorem.paragraph()}</p>
  </Text>
</div>

Text transform

---
type: example
---
<div>
  <Text transform="capitalize">I&#39;m capitalized text</Text><br/>
  <Text transform="uppercase">I&#39;m uppercase text</Text><br/>
  <Text transform="lowercase">I&#39;M LOWERCASE TEXT</Text><br/>
</div>

Letter-spacing

---
type: example
---
<div>
  <Text letterSpacing="normal">I&#39;m normal text</Text><br/>
  <Text letterSpacing="condensed">I&#39;m condensed text</Text><br/>
  <Text letterSpacing="expanded" transform="uppercase">I&#39;m expanded uppercase text</Text><br/>
</div>

Wrap

Use wrap="break-word" to force breaking in long strings that would otherwise exceed the bounds of their containers.

---
type: example
---
<div>
  <View as="div" maxWidth="300px" margin="none none small" debug>
    <Text>
      superlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstring
    </Text>
  </View>
  <View as="div" maxWidth="300px" debug>
    <Text wrap="break-word">
      superlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstringsuperlongstring
    </Text>
  </View>
</div>
---
type: example
---
<View background="primary-inverse" as="div">
    <Text color="primary-inverse">I&#39;m primary text</Text><br/>
    <Text color="secondary-inverse">I&#39;m secondary text</Text>
</View>

Element styles

---
type: example
---
<Text>
  <b>bold </b>
  <strong>strong </strong>
  <i>italic </i>
  <em>emphasis </em>
  <pre>preformatted</pre>
  <code>code</code>
  This<sup>is</sup> some<sub>text</sub>.
</Text>

DEPRECATED legacy values

Multiple values from size, weight and lineHeight are deprecated, but still supported for backward compatibility reasons. Please only use the above listed, semantic values.

Deprecated size values:

  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Deprecated weight values:

  • normal
  • light
  • bold

Deprecated lineHeight values:

  • default
  • fit
  • condensed
  • double