Ten surfaces, and the settings that made each one

Every surface below holds exactly the same three items. Nothing about the content changes between them. Everything you can see differing is a surface setting, and the settings are printed under each one in the words the portal uses.

Find the surface that looks like what you want, then type the values underneath it into yours.

One thing here is not a surface setting: the artwork. Pictures arrive with the content, not with the surface, so two surfaces are shown with different art on purpose. Where a surface differs from its neighbour because of the item rather than the setting, it says so under its own recipe.

A plain list

The right answer most of the time, and what a new surface gives you.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Outlined
Rows
0, a list
Picture
Left
Show completion
On
Attribution
Off

A grouped list

One card of rows divided by hairlines. Right for small actions that belong together.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Plain
Rows
0, a list
Picture
Left
Show completion
Off
Attribution
Off

A list with no ticks

Reading material. Nothing here is a task, so nothing carries a ring.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Outlined
Rows
0, a list
Picture
Left
Show completion
Off
Attribution
Off

A list that says where it came from

Use it where a participant holds content from more than one journey or coach.

Today

Walk for twenty minutesDue todaySleep course
Eat something before ten5 min readSleep course
Wind down without a screenThis eveningSleep course
what produced it
Card style
Outlined
Rows
0, a list
Picture
Left
Show completion
On
Attribution
On

A list with the picture above

Picture led, still a list. Each item is a full width card.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Outlined
Rows
0, a list
Picture
Top
Picture shape
Landscape
Show completion
Off

A shelf, one and a half across

The half card at the edge is what tells a participant to scroll.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Elevated
Rows
1, a shelf
Items per row
1.5
Picture
Top
Picture shape
Landscape

A shelf, two and a half across

More on screen at once, less room for words. Good for a browsable library.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Elevated
Rows
1, a shelf
Items per row
2.5
Picture
Top
Picture shape
Square

A shelf, one across

One card at a time, full width. It reads as a hero rather than a shelf.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Elevated
Rows
1, a shelf
Items per row
1
Picture
Top
Picture shape
Wide

Text over the picture, title only

The strongest look and the least room. Nothing competes with the picture.

Today

Walk for twenty minutes
Eat something before ten
Wind down without a screen
what produced it
Card style
Plain
Rows
0, a list
Picture
Background
Picture shape
Landscape
Show completion
Off
from the content, not the surface
Item description
not set on these items

Text over the picture, with a line under it

Two things differ from the tile on the left, and only one of them is a setting. Completion is On here and Off there, which is the surface. The description comes from the item, not the surface. Both survive over a picture.

Today

Walk for twenty minutesDue today
Eat something before ten5 min read
Wind down without a screenThis evening
what produced it
Card style
Plain
Rows
0, a list
Picture
Background
Picture shape
Landscape
Show completion
On
from the content, not the surface
Item description
set, and it shows on one line
Title
wraps to two lines here, three anywhere else