The progress bar displays the steps needed to complete the purchase flow/checkout. This should be placed inside a DSP .package to give it the proper padding, and then center-aligned on the page.
<div class="package small">
<div class="progress">
<h5 class="active">1. Account</h5>
<h5>2. Payment</h5>
<h5>3. Review</h5>
</div>
</div>Author information at the bottom of articles
Goes on the top of the homepage during large news events.
A correction disclaimer for the top of a story.
Headline stacks for section content.
The top banner of the sites including the search panel and account popout
A flexbox version of the grid using the same rules.
Standard footer for the bottom of all pages
DSP form layout
Photo gallery to be used in all occasions.
A very basic starter grid
An expanded package for article headers.
Immersive card to match the layout option.
In depth module for section pages
Inline call to action for story display.
Side menu panel tied to the hamburger.
Simple overlay containers to maintain consistency.
DSP paywall offer card
The custom read next card under story bodies.
Display for stories related in CUE.
DSP review-order card
Top navigation for section fronts where applied in CUE
Series nav for article pages.
Grant/Sponsorship card for article pages.
Promo card for story and section pages
Used in live updates and for static timelines.
Provides story background information.
Top tab navigation used in niche verticals.
A basic flag that can be used on 3rd-party sites in an iframe.
A basic footer that can be used on 3rd-party sites in an iframe.
A sample of the author bio page.
An alternative grid and card arrangement for contests.
A portal page with recent eEditions.
A CSS Grid version using the experimental rail code.
A sample homepage.
A sample story page.
Priority vertical product page.
A sample account profile page.
A sample paywall overlay page.
A sample purchase flow sign up page.
Search results page.
A sample section page.
A sample story page.
DSP subscription offers page
The topic layout.