--- title: "Author | GoodBarber's Design System" description: "The Author element of GoodBarber cells credits the creator of a piece of content with a round avatar, or an initial, next to the author's name, in three sizes." canonical_url: "https://www.goodbarber.com/uxdesign/author/" lang: no --- # Author | GoodBarber's Design System [Design System](https://no.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://no.goodbarber.com/uxdesign/](https://no.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://no.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/) # Author UI Elements The Author shows who created a piece of content, with an avatar and a name, in three sizes. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/author.8ce447378f14.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/author.8ce447378f14.mp4) ## Introduction The Author displays the name of the author of a piece of content, optionally with an avatar next to it. It indicates authorship in a consistent way across the meta-cells and the list layouts of the app, so that the reader always identifies the creator of a piece of content the same way. The name itself is a [Text](/uxdesign/text/), to which the Author adds the avatar, and a set of sizes. It lives in the [ToolBar](/uxdesign/toolbar/) of a cell, the row of metadata and actions displayed below the content, where it comes first. ## Anatomy ### The avatar and the name The Author is made of two parts, a small circular avatar, and the name of the author, written next to it in a level of the [Typography](/uxdesign/typography/) family. ![The avatar and the name](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Author-Anatomy-Structure.c2e2f81fa494.png) *The avatar and the name* ### When there is no picture When no picture is available for the author, the circle shows the initial of the author instead, and the name stays next to it. ![With and without a picture](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Author-Anatomy-Initial.3ce0c87f0eba.png) *With and without a picture* ## Properties ### Size The Author comes in three predefined sizes, Small, Medium and Large, Medium being the default. The cell decides which one it uses, depending on the room it has and on its importance in the layout. Each size pairs an avatar with a level of [Typography](/uxdesign/typography/). Small pairs a 24px avatar with Heading 6, Medium a 30px avatar with Heading 5, Large a 36px avatar with Heading 4. The avatar and the name grow together. ![Small, Medium and Large](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Author-Properties-Size.2e46058d7540.png) *Small, Medium and Large* ## Layout ### Spacing Between the avatar and the name, the spacing is always the same, 8px, whatever the size of the avatar and whatever the device. ![The same spacing in every size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Author-Layout-Spacing.7c482a873dee.png) *The same spacing in every size* ### Placement The Author opens the [ToolBar](/uxdesign/toolbar/) of a cell, where a [Text](/uxdesign/text/) can follow it, such as a date or a reading time. Each meta-cell decides how it shows it. Today, the Enriched, Visual Card and Immersive cells display it with its avatar. In small cards, in a grid or in a banner, the Author takes its Small size. For podcasts, in the Enriched and Condensed lists, the author gives way to the timer of the [Player](/uxdesign/player/). ![In a card and in small cards](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Author-Layout-Hosts.865fdcbcdbc6.png) *In a card and in small cards*