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, to which the Author adds the avatar, and a set of sizes. It lives in the 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 family.

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.

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. 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.

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.

Placement

The Author opens the ToolBar of a cell, where a 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.