--- title: "Content | GoodBarber's Design System" description: "The Content element of GoodBarber cells stacks the text blocks of a piece of content, a suptitle, the title and a subtitle, each with its own font." canonical_url: "https://www.goodbarber.com/uxdesign/content/" lang: sv --- # Content | GoodBarber's Design System [Design System](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://se.goodbarber.com/uxdesign/](https://se.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://se.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/) # Content UI Elements The Content stacks the text blocks of a cell, a suptitle, the title, a subtitle. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/content.030da46d8488.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/content.030da46d8488.mp4) ## Introduction The Content is the container that groups the text blocks of a piece of content within a meta-cell. It typically includes the title, and optionally a suptitle and a subtitle, each styled by its own Font atom, in the [Typography](/uxdesign/typography/) family. Each block is a [Text](/uxdesign/text/). The Content stacks them, and gives them a constant rhythm, whatever the cell and whatever the fonts chosen for the app. ## Anatomy ### The blocks The Content can hold up to three kinds of blocks, stacked vertically. The suptitle is a contextual label displayed above the title, such as a category or a date. The title, the main title of the content, is the only required block. The subtitle carries additional information below the title, such as a summary. ![Suptitle, title and subtitle, stacked](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Content-Anatomy-Structure.a28864979e30.png) *Suptitle, title and subtitle, stacked* ### What each cell displays Each meta-cell defines which blocks are displayed, depending on the type of content and the layout. The number of lines each block can take depends both on the meta-cell and on the list that renders it. The same block can be limited to a few lines in one layout and run free in another. In the back office, under Display, each list shows or hides the information above and below the title. The title is always there. ![A list cell and a banner card](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Content-Anatomy-Lines.b7569baa69d3.png) *A list cell and a banner card* ## Layout ### Spacing Between two text blocks, the Content applies ½G, half the global [gutter](/uxdesign/spacing/) of the app. The spacing is vertical only, and stays the same whatever the font size of the blocks. Around it, the Content sets no spacing. The layout of the meta-cell places it next to the [media](/uxdesign/media/) or the [ToolBar](/uxdesign/toolbar/). ![½G between the blocks](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Content-Layout-Spacing.a0da098386c5.png) *½G between the blocks* ### Placement The Content is part of every meta-cell, each defining its own rules for it. ![In a list cell, a compact cell and a card](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Content-Layout-Hosts.c99a08981152.png) *In a list cell, a compact cell and a card*