ComponentsData display
Timeline
Events placed along a line in order, each with a dot, its content and optional opposite text such as a date. Use it for histories, release notes and progress logs where sequence is the point.
Content and opposite text
ItemContent sits on one side of the line and ItemOpposite on the other. The default position, Alternate, swaps sides on every item.
Ovens on
Deck ovens take an hour to reach 250 °C.
03:30
Shape the loaves
Overnight dough is divided, shaped and proofed.
04:00
First bake
Sourdough and rye, steam for the first ten minutes.
05:15
Doors open
Croissants out of the oven as the first customers arrive.
07:00
Every orientation and position
Vertical timelines accept Start, Left, Alternate, Right and End; horizontal ones accept Top, Alternate and Bottom. Start and End follow the reading direction, Left and Right do not.
Vertical · Start
Observatory founded
Great refractor installed
Opened to the public
Vertical · Left
Observatory founded
Great refractor installed
Opened to the public
Vertical · Alternate
Observatory founded
Great refractor installed
Opened to the public
Vertical · Right
Observatory founded
Great refractor installed
Opened to the public
Vertical · End
Observatory founded
Great refractor installed
Opened to the public
Horizontal · Top
Observatory founded
Great refractor installed
Opened to the public
Horizontal · Alternate
Observatory founded
Great refractor installed
Opened to the public
Horizontal · Bottom
Observatory founded
Great refractor installed
Opened to the public
Dot variants, sizes and colors
Every Variant and Size combination of the dot, then the theme colors. Icon puts a symbol inside a dot; give the item text as well, because a colored dot alone carries no meaning for everyone.
| Variant ↓ · Size → | Small | Medium | Large |
|---|---|---|---|
| Text | Text, Small
| Text, Medium
| Text, Large
|
| Filled | Filled, Small
| Filled, Medium
| Filled, Large
|
| Outlined | Outlined, Small
| Outlined, Medium
| Outlined, Large
|
Theme colors, Variant.Filled
Custom dots and hidden dots
ItemDot replaces the dot with any content, DotClass styles the built-in one, and HideDot removes it for a continuation line.
Default dot
Outlined, small, Color.Primary.
Icon inside the dot
Icon works best with a medium or large, filled dot.
ItemDot: Morag Fraser signed off
Any content can stand in for the dot, here an avatar.
DotClass
A utility class, mud-theme-warning, paints the dot.
HideDot continues the previous entry without a new marker.
Alignment, reverse and modifiers
TimelineAlign moves the dot to the start, middle or end of each item. Reverse flips the alternating sides, and Modifiers adds the small arrow that points from a card to its dot.
Newsletter 41: the winter sky
Orion returns, with a guide to spotting the Pleiades without a telescope, a star chart for January evenings and the dates of the members' viewing nights.
January 2026
Newsletter 42
The dome repairs are finished.
February 2026
Newsletter 43: equinox night
A late opening on 20 March with talks every hour and hot chocolate in the courtyard.
March 2026
A project history
A realistic log: dated milestones with an icon and a status written in words, so the color only reinforces what the text already says.
Harbour Library renovation
Survey and design
Structural survey of the 1904 reading room; designs approved by the town council.
Collections moved
62,000 books boxed and moved to the temporary branch on Mill Lane.
Roof and skylights
Slates replaced; the Victorian skylights are being restored off site.
Reopening
Step-free entrance, a children's library and longer evening hours.
Playground
Change orientation, position, alignment and the dot; the markup lists only the values that differ from the defaults.
Dough mixed
Loaves baked
Sold out
<MudTimeline>
<MudTimelineItem Color="Color.Primary">…</MudTimelineItem>
</MudTimeline>