ETLondonDubaiTokyoSydneyLos Angeles57°FNew YorkNewsletter
Most read
Trending#Entertainment#Tech#Finance

No. 52 of 106

Table of Contents

A sticky contents list built from the story’s headings.

    On this page
  1. Table of Contents
  2. A contents box that follows the reader
  3. A line that fills as you read
  4. Show how far into each section they are
  5. Let hungry readers skip the story
NEWSON · ELEMENT NO. 52

Turn long pages into something people actually finish. It reads your headings, numbers them, follows the reader with a live progress ring, and comes in seven layouts: sidebar list, filling timeline, per-section progress, chips, jump cards, a floating reader button and a sticky top bar.

This one is a manual list that points at each demo below, and it follows you as you scroll.

BLOG POST · STICKY SIDEBAR

Numbered 1, 1.1, 1.2 · reading time and section count · live progress ring · the active section gets a gradient bar · sub-headings open only when the reader gets there · stays in view as you scroll.

Guide · Sample article
How to photograph products at home, without a studio

By the Sample Shop team · 7 min read · illustrative content

What you actually need

Good product photos come from light and patience far more than from expensive gear. Here is the short kit list we recommend to small shops that are just starting out.

Everything below fits in a drawer. If you already own a recent phone you are most of the way there, and the rest can be put together for less than the price of one professional shoot.

A phone is enough

Modern phone cameras handle color and sharpness well in good light. Turn off the flash, clean the lens with a soft cloth and use the standard 1× lens rather than the wide one, which bends straight edges near the corners of the frame.

Tap to focus on the product, then drag the exposure slider down slightly so white backgrounds keep a little detail instead of turning into flat, glowing white.

A tripod and a timer

A small tripod keeps every shot framed the same way, which makes a product grid look tidy. Use the two-second timer so pressing the button does not shake the phone. A pile of books works in a pinch, as long as it does not move between shots.

Light: the only thing that really matters

Soft, even light hides dust, flattens harsh reflections and shows the true color of the product. Hard light from a bare bulb or direct sun does the opposite. Before you think about props, get this part right.

Headphones on a plain background
Sample photo · soft window light from the left, white card on the right.

Window light

Set up next to a large window that does not get direct sun, ideally on an overcast day or in the morning. Put the product about an arm’s length from the glass and turn off the room lights so their warm color does not mix with daylight.

Bounce and fill

The side away from the window will be darker. Stand a sheet of white card or foam board on that side to bounce light back into the shadows. Move it closer for a brighter, flatter look and further away for more shape and depth.

Backgrounds and props

A roll of white paper curved from the wall down onto the table gives a clean, seamless background with no horizon line. For lifestyle shots, pick two or three props that suggest how the product is used, and keep them in colors that do not compete with it.

Tip: keep a small “prop box” so seasonal shoots look consistent year after year.

Shooting the set

Shoot every product in the same order so nothing gets missed: front, back, a three-quarter angle, a close detail and one shot in use. That gives shoppers the five views they look for before they buy.

  1. Front, straight on, centered
  2. Back or underside
  3. Three-quarter angle for shape
  4. Close detail: texture, stitching or label
  5. In use, with a hand or in a room

Editing in ten minutes

You do not need complicated software. Straighten the horizon, crop to a square, lift the exposure until the background is almost white and nudge the white balance until whites look neutral. Save these steps as a preset so every photo matches.

Resist heavy filters: shoppers want to know exactly what will arrive at their door, and color that is off is one of the most common reasons for returns.

Getting photos ready for your shop

Export at around 2000 pixels on the long side, compress the files and name them with words people search for, such as linen-wrap-dress-sage.jpg. Add alt text that describes the product plainly. Your pages will load faster and your images can show up in search.

That is the whole workflow. Once it is set up, a new product takes about fifteen minutes from unboxing to live listing.

DEVELOPER DOCS · TIMELINE

Timeline layout on the right with nodes that light up as sections are passed · “#” links added to every heading so readers can copy a link to a section · the address bar updates as you jump.

Docs · Fictional API
Getting started with the Notes API

Updated for v1 · example documentation

Overview

The Acme Notes API (a fictional example) lets you read and write notes from your own app over HTTPS, using JSON for every request and response.

All endpoints live under a single base address. Requests must be made over HTTPS; plain HTTP calls are refused.

https://api.example.com/v1

Authentication

Every request is signed with a secret API key. Keys belong to a workspace, and anyone with a key can act as that workspace, so treat them like passwords.

Create a key

Open Settings → Developers in your dashboard and choose New key. Give it a name that says where it is used, such as billing-server, so you can revoke the right one later.

Send the key

Pass the key in the Authorization header as a bearer token. Never put it in a URL, where it can end up in server logs and browser history.

curl https://api.example.com/v1/notes \
  -H "Authorization: Bearer YOUR_KEY"

Your first request

Create a note by sending a POST with a title and a body. The response contains the new note, including its id and timestamps.

POST /v1/notes
{
  "title": "Launch checklist",
  "body": "Book the venue, email the list"
}

A 201 Created status means it worked. Keep the returned id; you need it to update or delete the note.

Pagination

List endpoints return 25 items at a time. When there are more, the response includes a next_cursor. Pass it back as ?cursor= to get the next page, and stop when it comes back empty.

Errors

Errors return a JSON body with a machine-readable code and a human-readable message. Show the message to people and branch your logic on the code.

Status codes

StatusMeaning
400Something in the request is missing or invalid
401The key is missing, wrong or revoked
404That note does not exist in this workspace
429Too many requests, slow down

Retries

Retry 429 and 5xx responses with an increasing wait: one second, then two, then four. Do not retry 4xx errors other than 429, because sending the same request again will fail the same way.

Rate limits

Each workspace can make 120 requests per minute. Every response includes X-RateLimit-Remaining so you can slow down before you hit the limit instead of after.

Need more? Batch writes into a single request with POST /v1/notes/batch.
TEAM HANDBOOK · PROGRESS PER SECTION

Every number becomes a small progress ring that fills while that section is read, with a bar under the title · dark skin · 01, 02, 03 numbering · filled pill for the active section.

Handbook · Sample
How we work: the remote team handbook

A sample handbook for a fictional company · last reviewed this month

Working hours

We care about what gets done, not when you are online. This handbook is a sample written for a fictional remote team.

Everyone shares a four-hour overlap from 1pm to 5pm UK time, when meetings and quick questions happen. Outside those hours, plan your day around your energy and your life. Put your usual hours in your profile so teammates know when to expect a reply.

If you need to step away during the overlap, set your status and carry on. Nobody needs to explain a dentist appointment or a school run.

Communication

Write things down. A clear message that can be read later beats a quick call that half the team missed. Use threads for discussion, keep decisions in the project doc, and link to it rather than repeating it.

Urgent means a customer is affected right now. For anything else, assume people will reply within a working day, and do not expect replies to messages sent late in the evening.

Rule of thumb: if it would take more than three messages back and forth, book fifteen minutes instead.

Meetings

Every meeting needs an agenda in the invite and a named owner. If there is no agenda, it is fine to decline. Meetings end five minutes early so people have time to breathe between calls.

Notes go in the shared doc during the call, with actions written as “who, what, by when”. Anyone who missed the meeting should be able to catch up in two minutes of reading.

Time off

Take at least 25 days a year plus public holidays where you live, and take them properly: turn off notifications and do not check in. Book time off in the team calendar at least two weeks ahead for anything longer than three days.

If you are unwell, say so in the team channel and log off. You do not need to make the time up.

Equipment

You get a laptop, a monitor, a good chair and a yearly budget for the small things that make work easier, such as a headset or a desk lamp. Order what you need through the equipment form and keep receipts for anything you buy yourself.

When you leave, we arrange a courier to collect the laptop and monitor. Everything else is yours to keep.

Growing here

Every six months you meet your lead to talk about what went well, what you want to learn next and what support you need. There is a yearly learning budget for books, courses and one conference.

Promotions are based on written expectations for each level, which are shared with everyone. If something here is unclear, ask in the handbook channel and we will improve the page.

RECIPE · JUMP CARDS

Top-level sections become cards with big gradient numbers and a “+2” count of the steps inside · the bottom of each card fills as that part is read · animated gradient border.

Recipe · Serves 4 · 50 min
Weeknight lemon and herb chicken traybake

Sample recipe · written for this demo

Ingredients

A one-tray dinner for four that takes ten minutes to prepare and about forty minutes in the oven. This is a sample recipe written for this demo.

For the tray

  • 8 chicken thighs, skin on
  • 600g baby potatoes, halved
  • 2 red onions, cut into wedges
  • 1 courgette, in thick slices
  • 200g cherry tomatoes

For the dressing

  • Zest and juice of 1 lemon
  • 3 tbsp olive oil
  • 2 garlic cloves, crushed
  • 1 tbsp chopped rosemary and thyme
  • Salt and black pepper

Method

Heat the oven to 400°F (350°F convection). Use the largest roasting tray you have: crowded vegetables steam instead of browning.

Prep

Whisk the dressing ingredients together. Toss the potatoes and onions in half of it and spread them over the tray. Rub the rest over the chicken and sit the thighs on top, skin side up.

Roast

Roast for 25 minutes. Add the courgette and tomatoes around the chicken, baste everything with the tray juices and roast for another 15 to 20 minutes, until the skin is crisp and the juices run clear.

Finish

Rest for five minutes, squeeze over a little more lemon and scatter with fresh herbs. Serve straight from the tray with a green salad.

Tips

  • Dry the chicken skin with kitchen paper before oiling it for the crispiest result.
  • Swap the potatoes for chunks of squash in autumn.
  • For a vegetarian version, use thick slices of halloumi and add them for the last 15 minutes.

Storing and reheating

Cool leftovers within an hour and keep them in the fridge in a covered container for up to two days. Reheat until piping hot all the way through, in the oven rather than the microwave to keep the skin crisp.

Nutrition

Per serving (approx.)
Energy560 kcal
Protein38g
Carbohydrate36g
Fat29g

Sample figures for illustration only.

HELP CENTER · CHIPS ON DARK

Chips at the top of a help page: only main topics are shown, with a “+2” when a topic has sub-questions · frosted glass on a dark section · they swipe sideways on narrow screens.

Help center · Sample shop
Delivery and returns

Sample help article · prices and times are illustrative

Delivery times

Everything you need to know about getting your order and sending it back. This help page is a sample for a fictional shop.

Orders placed before 2pm on a working day leave our warehouse the same day. You will get an email with tracking as soon as the parcel is on its way.

UK

ServiceTimePrice
Standard2–4 working days$3.95, free over $50
Next dayOrder by 2pm$6.95

International

We ship to most of Europe in 4 to 7 working days. Prices are shown at checkout once you enter your address. Any import duties are shown before you pay, so there are no surprises on the doorstep.

Tracking your order

Use the link in your dispatch email, or sign in and open My orders. Tracking can take a few hours to update after the parcel leaves us, so do not worry if it shows nothing at first.

Returning an item

You have 30 days from delivery to send most items back, unused and with their tags. Personalised items and opened beauty products cannot be returned unless they are faulty.

How to start a return

Open My orders, choose the item and select Return. Print the free label, or show the QR code at a drop-off point if you do not have a printer.

Refund times

We refund within five working days of receiving your parcel, to the card you paid with. Banks can take a few more days to show the money in your account.

Exchanges

Need a different size? Start a return and place a new order for the size you want. That way the new one leaves straight away instead of waiting for your return to arrive.

Still need help?

Our team answers messages from 9am to 6pm, Monday to Friday. Call 020 7946 0321 (a sample number) or use live chat, and have your order number ready.

LONG READ · FLOATING READER BUTTON

Scroll into the story: a round button appears in the bottom-left corner with a live reading ring and percentage. Tap it for the contents panel, tap a chapter to jump. It hides again when you leave the article.

↙Try it: scroll down into the story and look at the bottom-left corner of the screen.
Long read · Fiction
The quiet return of the neighborhood bookshop

A sample essay · the town, shop and figures are fictional

A shop on the corner

For most of the last decade, the little bookshop on the corner of the high street looked like a shop waiting to close. The window display changed twice a year, the bell above the door rang less and less, and the owner joked that the cat got more visitors than she did. This story, and the town in it, are fictional.

Then, slowly and without much fuss, things changed. The window started to change every fortnight. There was a chalkboard outside with a handwritten recommendation. And people began to come in, not always to buy, but to stay.

Why people came back

Ask regulars why they return and very few mention price or range. They talk about being recommended something they would never have found on their own, about staff who remember what they read last month, and about a place where nobody expects them to hurry.

“I came in for a birthday present and left with three books for myself and the name of a book club.”

In a high street that is mostly phone shops and coffee chains, a room full of books and chairs has quietly become one of the few places to simply be.

The events that pay the rent

Selling books alone rarely covers the bills. What does is the calendar: author evenings, a Saturday story hour for children, a monthly quiz and a silent reading night where people pay a small fee for a seat, a drink and two hours without their phones.

Each event brings in people who then buy books, but more importantly, it gives them a reason to come back on a specific day. The shop has become part of the town’s routine.

A calm room with a sofa and books on the table
Sample photo · somewhere to sit, stay and read.

Small shelves, big choices

A small shop cannot stock everything, and it has stopped trying. Instead, every shelf is chosen. There are fewer titles, but each one is there because somebody on the staff has read it and has something to say about it.

Handwritten cards under the books do more selling than any discount. Customers say they trust them because they sound like a friend, not an advert.

What the numbers say

The shop’s own sample figures tell a simple story. Footfall on event nights is more than double an ordinary evening, and about a third of first-time event visitors come back within a month. Online orders for collection in store have grown every year since they were introduced.

Sample figureValue
Events per month9
Return visits within 30 days34%
Orders collected in store1 in 5

What comes next

The plan for next year is modest: a second reading room upstairs, a small café counter, and a monthly subscription where readers get a surprise book chosen for them. None of it is revolutionary. That is rather the point.

The shop on the corner did not survive by becoming something else. It survived by becoming more like itself, and by giving people a reason to walk through the door.

CITY GUIDE · STICKY TOP BAR

The contents box sits at the top of the guide. Scroll past it and a slim bar slides down from the top of the screen showing the current section and a progress line. Tap the bar to open the full list.

Guide · Sample
Moving to a new city: your first 30 days

A general sample guide · check details for where you live

Before you arrive

A calm plan for your first month somewhere new. This is a general sample guide, so check local details for your own city.

Sort the boring things before the move: redirect your post, tell your bank and your doctor, and save digital copies of your ID, tenancy agreement and any work contract. Arriving with a folder of documents on your phone saves days of back-and-forth later.

Look up the nearest supermarket, pharmacy and GP surgery to your new address so the first evening is not spent searching.

Week one: the essentials

  • Register with a local GP surgery
  • Set up gas, electricity, water and broadband
  • Register to vote and for council tax
  • Find your nearest post office and recycling day
  • Save a local taxi number and the non-emergency police number

Do these in the first week while you still have the energy of a new start. None of them are exciting, but all of them become urgent at the worst possible moment.

Finding your neighborhood

Walk a different route home every day for the first two weeks. You will find the good bakery, the quiet park and the shortcut that saves ten minutes, and you will start to recognize faces.

Green hills at the edge of a city
Sample photo · weekend walks are the fastest way to learn a place.

Local social media groups and noticeboards in cafés are good for finding what is on: markets, running clubs and free events that never make it into a guidebook.

Getting around

Work out your commute on a quiet Sunday so you know the route before it matters. Compare a monthly travel pass with paying per journey; if you travel four or more days a week, the pass usually wins. Many cities also have bike hire schemes that are cheaper than you might expect for short trips.

Meeting people

Friendships in a new place come from seeing the same people regularly. Pick one weekly thing, such as a class, a volunteering shift, a sports team or a quiz, and go every week for a month, even when you do not feel like it.

Say yes to invitations in the first few months. You can always become choosier later.

A checklist for day 30

  • You know three places to eat you would recommend
  • You have a regular weekly plan
  • You know your neighbors’ names
  • Every bill is set up and paid by direct debit
  • You have explored somewhere just outside the city

If you can tick most of these, you are no longer new here. You live here.

SKINS, MARKERS & NUMBERING

Six skins, four ways to mark the section being read and five numbering styles. These lists are manual: each link points at a heading in the blog guide at the top of the page.

White card · skin = card

Plain, no box · skin = plain

Outline · skin = outline

Frosted glass · skin = glass

Dark · skin = dark

Animated gradient border · skin = gradient

Side bar · marker = bar

Filled pill · marker = pill

Pulsing dot · marker = dot

Color only · marker = color

No numbers · numbering = none

1, 2, 3 · numbering = decimal

1, 1.1, 1.2 · numbering = nested

01, 02, 03 · numbering = zero

A, B, C · numbering = alpha

106 elements for news, Table of Contents included.

Explore All Demos Browse All Elements