Text

UI Elements

The Text is a basic element, a piece of text whose size and color come from where it is displayed.

Introduction

The Text is a basic element of a cell. It displays a simple piece of text within a meta-cell, or within a group of elements such as the ToolBar or the Content. It relies entirely on the Font atom, so its style stays consistent and its Typography responsive in every context.

It is used for metadata, such as a view count, a reading time or a short description.

Anatomy

A single block of text

The Text is a single block of text. What it looks like comes entirely from its Font atom, in the Typography family, a font, a size for each device, and a color, all set by its context.

A single block of text

A single block of text

Properties

Size and color

The Text has no fixed size or color. Both come from the context that displays it, and they can be customized there. In the back office, each list sets the font, the size and the color of its texts, such as the information above or below the title, and the Text takes them. The same metadata can therefore read larger in one list than in another, in the color chosen for it.

From the back office to the app

From the back office to the app

Layout

Placement

The Text handles no spacing by itself. The group that hosts it places it. It lives in three places of a cell. In the ToolBar, the row below the content, it gives an info such as a reading time, and when it runs too long it is cut short rather than wrapped. In the Content, each block of text, the suptitle, the title and the subtitle, is a Text, and the Content stacks them ½G apart. Today, in a compact list cell, the info under the title is a Text too.

In the ToolBar, the Content and a compact cell

In the ToolBar, the Content and a compact cell

Three Texts in the Content

Three Texts in the Content

Conseils pour créer une app