Text

⌘

Display text using well-defined typographic styles

Overview

Text elements can be formatted in many different ways to communicate hierarchy of information and to improve readability for users across multiple devices. Text can vary in size, style, weight, color, alignment, and font.

Sizes

Note: It's unlikely we will use all of these size variations, but will be used for headings and paragraph text.

Chat API with pre-built UI

<div className="text-6xl font-semibold">Chat API with pre-built UI</div>
<div className="text-5xl font-semibold">Chat API with pre-built UI</div>
<div className="text-4xl font-semibold">Chat API with pre-built UI</div>
<div className="text-3xl font-semibold">Chat API with pre-built UI</div>
<div className="text-2xl font-medium">Chat API with pre-built UI</div>
<div className="text-xl font-medium">Chat API with pre-built UI</div>
<div className="text-lg">Chat API with pre-built UI</div>
<div className="text-base">Chat API with pre-built UI</div>
<div className="text-sm">Chat API with pre-built UI</div>

Weights

Note: Although the following weights are available, we aim to only use normal, medium, and semibold variants.

Extrabold (800)

Bold (700)

Semibold (600)

Medium (500)

Normal (400)

Light (300)

<div className="font-extrabold">Extrabold (800)</div>
<div className="font-bold">Bold (700)</div>
<div className="font-semibold">Semibold (600)</div>
<div className="font-medium">Medium (500)</div>
<div className="font-normal">Normal (400)</div>
<div className="font-light">Light (300)</div>

Modifiers

Build any chat use case into your product with ~~just~~ a few lines of code

Build <strong>any chat use case</strong> into <em>your product</em> with <s>just</s> a <u>few lines of code</u>

Build **any chat use case** into *your product* with ~just~ a <u>few lines of code</u>

Truncate

Build any chat use case into your product with just a few lines of code. Frontend UI SDK and out-of-the-box notifications included. alkJS is a developer friendly chat API with a pre-built UI that is highly customizable. You can build a chat feature in hours instead of months.

<p className="truncate">...</p>

Align

Text left

Text center

Text right

<p className="text-left">Text left</p>
<p className="text-center">Text center</p>
<p className="text-right">Text right</p>

Unordered list

List item one
List item two
List item three

<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

- List item one
- List item two
- List item three

Ordered list

List item one
List item two
List item three

<ol>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

1. List item one
2. List item two
3. List item three

Code (inline)

It's a matter of running TalkJS to get it up and running instantly

It's a matter of running <code>TalkJS</code> to get it up and running instantly

It's a matter of running `TalkJS` to get it up and running instantly