Overview

Many publishers use story cards for onward journeys. Here is an example from the Guardian:

Some of our more effective ways for our users to discover more on our site is through story cards like these, which we can't have in the initial payload.

Our idea is to have a component that takes a json, and renders a set number of story cards.

Usage

<amp-story-cards
    number=3
    src="path/to/related-content.json">
</amp-story-cards>

Details

This component would take a json something like:

[
    {
        "img": "path/to/img.png",
        "title": "I am a title",
        "standfirst": "something witty"
    }
]

We are open to adding more options here depending on what other people want, but I think keeping it restrictive in the beginning is a good thing.

Behaviour

Each story-card will have a predetermined height/width ratio based on viewport width.
Only once a user has scrolled after a certain part of the page the request is made to get the json and the story-cards are generated.

Optionally, the request can happen prior to scrolling.

Considerations

• Should it appear close to the top of the document, or have a restriction similar to the amp-iframe?
• Should a maximum number of story cards be put in place?