Section header

Wrap header with <header class="section-header">. Define section further with <h3> and <a id="section-header-bsr">; color is from class="banking". On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)

Main body

Below the section header, wrap the content with <div id="outer-content" class="wrap cf"> and with an inner wrapper <div id="inner-content">.

Columns

Create two columns:
left with <article role="article" class="m-all t-all d-8of12 landing">;
right with <article role="article" class="m-all t-all d-4of12">. Right rearranges to bottom of page on mobile.

Header

For Asia Program title, use <header class="entry-header" style="width:100%"> and <h1>.

Sub-section styles

Use <h2 class="section-title"> for sub-section titles. Wrap each article with <article> tag, the title with <h3 class="h2">, and date with <p class="meta">. If there's a further publication or sub-section title, for example "Asia Focus," use <h3 class="landing-pub-title">.

View More or Related

Style View More link as <h4>, once for desktop with class "desktop" and again for mobile with class "mobile", which determines whether the link shows an arrow (right chevron or greater-than symbol).

Related boxes

Wrap first related box with <div class="landing-additional" style="background-color: #f1eeec;">.

Header is <h3 class="heading-bg">. For text in box, use <p class="highlight-text-no-icon">.

On mobile, related boxes stack automatically to the bottom of the page.

Events box

The box dynamically pulls event info from Asia Program events page.

Code events box with <div class="landing-events" style="background-color: #f6f5f4">.

Header is <h3 class="heading-bg">. For text in box, use <p class="highlight-text-no-icon">.

Date is <span class="meta date">, while event title and link is <h3 class="h2 event-title-landing">.