World anvil css test Timeline Event Colour Examples Timeline

Timeline Event Colour Examples

This timeline uses the same icon for each event but shows the colour differences in the event significance options (from highest to lowest). Some of the examples have filled out information, others don't so you can see how they look in comparison.   Don't forget about the Orphan Histories box! To replicate it, set up an era in your timeline, then create a historical event that occurs after/outside of it. This notice is only visible to world owners, but it's nice to style it.

Era Example One

0 B0 3 A0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui eget leo eleifend, ut molestie lorem cursus. Nulla porta, dui at semper consequat, nibh tortor cursus diam, at placerat nisi ex sit amet justo.

  • alternative display name example
    Milestone/Era Changing
    Technological achievement

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui eget leo eleifend, ut molestie lorem cursus. Nulla porta, dui at semper consequat, nibh tortor cursus diam, at placerat nisi ex sit amet justo.

  • 2 E1

    1 /1 01:00
    3 E1

    1 /1 01:00

    Major/Global
    Technological achievement

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui eget leo eleifend, ut molestie lorem cursus. Nulla porta, dui at semper consequat, nibh tortor cursus diam, at placerat nisi ex sit amet justo.

    tag
  • 3 E1

    4 E1


    Important/National
    Technological achievement

Example Era Two

era alternative display range goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui eget leo eleifend, ut molestie lorem cursus. Nulla porta, dui at semper consequat, nibh tortor cursus diam, at placerat nisi ex sit amet justo.

  • 5 E2

    1

    Minor/Regional
    Technological achievement

  • 5 E2

    2

    Trivial/Personal
    Technological achievement

  • 6 E2

    1 /1 01:00
    6 E2

    2 /2 02:00

    Not significant
    Technological achievement

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie dui eget leo eleifend, ut molestie lorem cursus. Nulla porta, dui at semper consequat, nibh tortor cursus diam, at placerat nisi ex sit amet justo.