Skip to main content

Components

The following components have been created. These are based on previously established editorial user stories and have a preliminary visual design that is still flexible to be customized.

Highlighted item​

The highlighted item allows editors to highlight internal or external pages.

  • Content is manually configured, not dynamically generated, to allow for maximum flexibility and customizability
  • Main use cases are on locations that require customizability, sacrificing efficiency, such as the front page

characteristics:

  1. Title
  2. Subtitle (optional)
  3. Excerpt
  4. Link label and link
  5. highlighted image

Example in action: staging front page

Pull quote​

A pull quote is a quotation or excerpt that has been pulled from an article of page, in order to entice readers. This means it is not part of the narrative flow of the page. On the contrary, a pull quote displays a text string that is also elsewhere present in the regular text on the page. A pullquote has an optional caption, which can be used to specify the author or source.

A non-floating pull quote:

A floating pull quote:

Blockquote​

A blockquote is a component that – in contrast to a pull quote – is part of the narrative flow of a page.

Image​

An image can be inserted into any page or article, and can have various layout settings. Images also have an optional caption

A floating image (left or right)​

A medium-sized image​

A medium-sized image will be equally wide as a text column on desktop.

L-sized image​

XL-sized image​

Image (lightbox view)​

Images that are displayed with a floating or M-sized layout allow the user to click on them to see a large version in a lightbox view. The caption will also be visible in that view.

We will implement an image carousel which allows a user to cycle through multiple images. We will initially implement a standard React component and later refine it or possibly switch to an alternative. Requirements:

  • it should display a single image in primary view but also invite the user to click through to other images
  • It should support captions
  • it should be responsive and support touch interfaces

Video & audio player​

Currently, the video component only supports YouTube urls.

We will however switch from relying on external services for embedding media players to using a self-hosted solution instead, prioritizing accessiblity. We might opt for Able player or OzPlayer for video

The new website will allow editors to display a manual selection of highlighted 'nodes' (pages, articles, events, projects) anywhere on a page:

.

In Strapi, you can easily add any node to such a manual selection of related items:

Notes:

  • we have opted for a grid-style presentation of nodes;
  • an item currently consists of a featured image, the title and a 'read more' label which links to the page being highlighted. It is conceivable that this view will display different properties depending on the content type being displayed. For example, if the displayed item is an event, it would make sense to display the event start date (and the time if it is a one-day event, and the start date + end date but no start time if it is a multi-day event). These are all design decisions that should be made at a later stage.
  • We will recommend the eventual designer to consider using featured images with a 2:1 aspect ratio, considering the fact that web pages require a featured images for social media with similar dimensions anyway.