Digital pattern library

News updates

The news updates pattern displays featured links including meta data in two columns. The pattern is intended for landing pages and provides a solution for linking to articles, such as news items or blog posts.

Rules for news updates

Options available


Default

The default option contains a ⅔ width column for a featured news update and a ⅓ width column for two other updates. Must only be used only within main content of a page.

More news

news story

Featured update

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

8 June 2018News at St Andrews
Code

More news

news story

Featured update

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

8 June 2018News at St Andrews

Aside only

Must only be used in the aside of a page.

Top stories

news story
news story

Top story 2

12 August 2018
Code

Top stories

news story
news story

Top story 2

12 August 2018

Case study only

The case study option contains a 5/12 width column for a featured news update and a 7/12 width column for three other updates.

Case Studies

news story

Featured update

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

8 June 2018News at St Andrews

Top story 1

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

14 August 2018News at St Andrews
news story

Top story 2

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

12 August 2018News at St Andrews
news story

Top story 3

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

12 August 2018
news story
Code

Case Studies

news story

Featured update

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

8 June 2018News at St Andrews

Top story 1

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

14 August 2018News at St Andrews
news story

Top story 2

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

12 August 2018News at St Andrews
news story

Top story 3

This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetuor.

12 August 2018
news story