--- title: "Text | GoodBarber's Design System" description: "The Text element of GoodBarber cells displays a simple piece of text, a view count or a reading time, styled by the Typography of its context." canonical_url: "https://www.goodbarber.com/uxdesign/text/" lang: es --- # Text | GoodBarber's Design System [Design System](https://es.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://es.goodbarber.com/uxdesign/](https://es.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://es.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Text](/uxdesign/text/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Text UI Elements The Text is a basic element, a piece of text whose size and color come from where it is displayed. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/text.39657a7fe66c.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/text.39657a7fe66c.mp4) ## 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](/uxdesign/toolbar/) or the [Content](/uxdesign/content/). It relies entirely on the Font atom, so its style stays consistent and its [Typography](/uxdesign/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](/uxdesign/typography/) family, a font, a size for each device, and a color, all set by its context. ![A single block of text](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Text-Anatomy-Structure.55412b4bfa18.png) *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](/uxdesign/typography/), 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Text-Properties-Context.d4cb18752e2f.png) *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](/uxdesign/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](/uxdesign/content/), each block of text, the suptitle, the title and the subtitle, is a Text, and the Content stacks them [½G](/uxdesign/spacing/) 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Text-Layout-Hosts.79fc07d4df4f.png) *In the ToolBar, the Content and a compact cell* ![Three Texts in the Content](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Text-Layout-Content.9526858eda01.png) *Three Texts in the Content*