Vitral 0.2

The Lantern

A daily paper with a clear hierarchy: a lead story and top stories above the fold, section rows below, and a most-read rail. Articles carry a byline, reading time, a captioned photo, pull quotes and related stories; each section pages through its archive.

NewsEditorialContent
Live demoSource on GitHub

Screens

  1. 1

    Front page

    The lead story, top stories, sections and most read

    Open live
    The Lantern: the Front page screen
  2. 2

    Article

    Headline, byline, photo, body and related stories

    Open live
    The Lantern: the Article screen
  3. 3

    Section

    One section’s stories, sortable and paginated

    Open live
    The Lantern: the Section screen

What's inside

3 screens and 12 components, wired together with shared state and local navigation.

Features

  • A front page with a lead, top stories, section rows and a most-read list
  • Section links in the header that open one section screen in the right state
  • An article page with byline, reading time, share and save actions, and a pull quote
  • A section archive with a lead story, an order switch and pages
  • A newsletter sign-up and a metered-reading card

Screens

Questions

About The Lantern, and about templates in general.

In the template it is written inline. In an application it would come from your CMS as HTML or blocks — the tp-prose class styles paragraphs, headings and quotes.