No. 53 of 106

Author Box

The writer’s card under a story.

    On this page
  1. Author Box
  2. Turn readers into followers
  3. A byline that earns trust
  4. A profile worth a whole page
  5. Make the hire me obvious
NEWSON · ELEMENT NO. 53

Put a face and a story behind every article. Ten layouts from a slim byline to a speaker pass, seven skins, five photo shapes with spinning rings, a verified badge, “available for work” status, topics, numbers that count up, 18 profile networks and the author’s latest posts.

A fictional author, drawn for this demo. Every person on this page is made up.

END OF A BLOG POST · CLASSIC

The classic box at the end of an article: photo, verified name, what she writes about, numbers that count up, profiles in their brand colors and her three latest recipes with thumbnails.

Maya Collins
About the author

Maya Collins

Food writer & recipe developerBristol

Maya writes simple, seasonal recipes for busy weeknights. Before cooking full time she ran a small supper club, and she still tests every recipe three times before it goes live.

Weeknight dinnersBakingMeal prep
240+Recipes
38kNewsletter readers
4.9Average rating
TOP OF AN ARTICLE · BYLINE STRIP

The slim strip that sits under an article title: who wrote it, their role, a verified badge and a follow button, in one line. On narrow screens it wraps neatly.

ENGINEERING · SAMPLE ARTICLE

What We Learned Migrating 2M Users to a New Stack

Moving two million accounts without anyone noticing took eight months, a lot of rehearsals and one very long Sunday night. This sample article shows where a byline strip sits in a real post…

Aiko Tanaka
Contributor

Aiko Tanaka

Product designer · Design editorLeeds

Aiko writes about color, design systems and the small decisions that make interfaces feel calm. She has led design at two start-ups and now runs workshops for product teams.

Design systemsColorUX writing
86Articles
12kFollowers
2016Writing since
MAGAZINE CONTRIBUTOR · COVER

A colorful cover banner with the photo overlapping it, a spinning gradient ring, numbers and the writer’s most popular articles as small cards. Great for contributor and team pages.

FREELANCER · SPOTLIGHT

A big photo on one side, and a clear “available” status, location and two buttons on the other. Status can be available, busy or away, with a matching dot on the photo in the other layouts.

Paige Shaw
Brand strategist

Paige Shaw

Independent consultantLondon
Taking new projects from June

Paige helps young companies find a clear, confident voice: naming, positioning and the words on their website. Fifteen years in agencies, now working directly with founders.

PositioningNamingTone of voice
60+Brands
15Years
100%Remote friendly
KNOWLEDGE BASE · TABS

About, Articles and Connect in one compact box. A gradient line slides between the tabs, the article count sits on the tab, and arrow keys move between them for keyboard users.

Kofi Mensah
Maintainer

Kofi Mensah

Platform engineerLeeds

Kofi looks after the build pipeline and writes most of our guides on deployments and on-call. He likes boring, reliable systems and very clear runbooks.

DeploymentsOn-callPerformance
48Guides
1,240Helpful votes
6Years here
GUEST COLUMN · QUOTE

The quote layout leads with the author’s own words in large serif type, with a handwritten signature and the author beneath. Shown here on the dark skin.

The best trips I have taken were the slow ones: fewer places, longer stays, and time to notice the light change over the same street every evening.

Nora Lind
Guest column

Nora Lind

Travel photographerEdinburgh
CONFERENCE · SPEAKER PASS

The ID card layout looks like a lanyard pass: slot, event name, photo, topics, numbers and a barcode. Here are three speakers in three skins.

Speaker · Frontend Forward 2027
Sam Rivera

Sam Rivera

Podcast hostLisbon

Hosts a weekly show about the people behind small websites.

PodcastingCommunity
140Episodes
22kListeners
Speaker · Frontend Forward 2027
Daniel Okafor

Daniel Okafor

Staff engineerManchester

Talks about migrations that nobody notices and calm on-call.

ScalingReliability
12Talks
2MUsers moved
Speaker · Frontend Forward 2027
Leo Martins

Leo Martins

Travel writerPorto

Writes slow-travel guides and trains-over-planes itineraries.

Slow travelRail
31Countries
9Guidebooks
TRAVEL BLOG · SPLIT PANEL

A colored side panel holds the photo, name, status and profiles; the story and latest trips sit beside it. On narrow screens the panel becomes a banner on top.

Leo Martins
Your guide

Leo Martins

Travel writerPorto
On the road until 12 May

Leo has spent ten years traveling by train and ferry, writing guides for people who would rather see one city well than five in a hurry.

Slow travelRail journeysCity guides
31Countries
9Guidebooks
0Flights this year

Newsletter sign-off · centered profile · gradient skin

Sam Rivera
Every Sunday from

Sam Rivera

Writer of “Small Web Weekly” (sample)

Short notes on the people and tools behind small, independent websites. No ads, unsubscribe any time.

22kReaders
140Issues

Literary essay · minimal · no card

…and that is why I still keep a paper notebook in my coat pocket. Some ideas only arrive when there is nothing to scroll. (End of a sample essay.)

Nora Lind
Essay by

Nora Lind

Photographer and writer

Nora writes about attention, walking and the quiet parts of cities.

SEVEN SKINS

The same author in every skin. The animated gradient border is the knowledge-base box above.

White · skin = white

Maya Collins

Maya Collins

Food writer

A short sample bio, two lines at most, so the skins are easy to compare.

Soft · skin = soft

Aiko Tanaka

Aiko Tanaka

Designer

A short sample bio, two lines at most, so the skins are easy to compare.

Outline · skin = outline

Kofi Mensah

Kofi Mensah

Engineer

A short sample bio, two lines at most, so the skins are easy to compare.

Glass · skin = glass

Leo Martins

Leo Martins

Travel writer

A short sample bio, two lines at most, so the skins are easy to compare.

Dark · skin = dark

Daniel Okafor

Daniel Okafor

Engineer

A short sample bio, two lines at most, so the skins are easy to compare.

Gradient · skin = gradient

Paige Shaw

Paige Shaw

Strategist

A short sample bio, two lines at most, so the skins are easy to compare.

PHOTO SHAPES & RINGS

Circle, rounded, squircle, hexagon and a softly morphing blob, with solid, gradient, spinning, dashed or no ring, plus a status dot.

Circle

Circle

ring: spin · available
Rounded

Rounded

ring: solid · busy
Squircle

Squircle

ring: gradient
Hexagon

Hexagon

ring: gradient
Blob

Blob

ring: dashed · away
PROFILE ICONS

Soft, filled, outline, plain or a pill with the name, each with an optional brand-color mode. Email links open the mail app; the rest open in a new tab.

Soft · theme colors

Filled · brand colors

Outline · theme colors

Plain · brand colors

Pill · brand colors

106 elements for news, Author Box included.