Component library

Live examples of the reusable components and approved NIHR background themes used across this website.

Home > Component Page

Feedback banner component: a concise site-wide prompt with an optional call to action. Click here

Accordion

Expandable content with keyboard-accessible controls.

Latest posts grid

Automatic feed using the newest published posts.

Two-column editorial content

The component splits this editable content into two readable columns on larger screens.

On smaller screens the columns stack into a single flow without horizontal overflow.

Editors can combine headings, paragraphs, links and lists while retaining the shared typography system.

This example also verifies spacing and responsive behaviour on the component reference page.

Component examples

This catalogue lists every Flynt component currently available to page editors. The theme examples above are rendered live; the cards below provide a quick inventory of the reusable building blocks.

Accordion Default

A simple accordion built with accessibility in mind. Each accordion panel provides a title and formatted text content, which is toggled by clicking at the title.
Block Anchor

Drop Block Anchor anywhere in the page and create an anchor link from unique name. Copy and use anchor link to scroll to this position.
Block Feedback Banner

Reusable component available in the NIHR MDC page builder.
Block Hero

Image with optional caption and formatted text side by side on desktop and stacking on mobile. Easily to be used for editorial content. Can be quickly adapted for more controlled layout options with fixed image ratios.
Block Image

Image with optional caption, multiple size options and optimized responsive image sizes.
Block Image Text

Image with optional caption and formatted text side by side on desktop and stacking on mobile. Easily to be used for editorial content. Can be quickly adapted for more controlled layout options with fixed image ratios.
Block Image Text Hero

Image with optional caption and formatted text side by side on desktop and stacking on mobile. Easily to be used for editorial content. Can be quickly adapted for more controlled layout options with fixed image ratios.
Block Mailing List

Reusable component available in the NIHR MDC page builder.
Block Post Tabs

Reusable component available in the NIHR MDC page builder.
Block Research Community

Reusable component available in the NIHR MDC page builder.
Block Spacer

Reduces or extends the vertical space between components.
Block Stripe

Reduces or extends the vertical space between components.
Block Text Image Crop

Image and text have equal weight, though the image isn’t resized proportionally but is sized according to the text height and gets cropped when resized.
Block Two Pages

A blog post archive grid with prev / next navigation buttons or a load more button with ajax functionality at the bottom and categories on top to filter the blog posts.
Block Video Oembed

Instead of embedding a video player directly, this component shows a poster image with an overlaying play button at first only. When clicked, the iframe based embed player is loaded autoplays the video, if the browser supports autoplay. Multiple size options available.
Block Wysiwyg

Simple formatted text from a “What You See Is What You Get” editor, wrapped in a max width container for a convenient reading experience. Includes an option to center the text, instead of the classical inline center of the editor itself, to allow for additional custom styling.
Block Wysiwyg Two Col

Simple 2 column formatted text from a “What You See Is What You Get” editor, wrapped in a max width container for a convenient reading experience.
Grid Homepage Research

Reusable component available in the NIHR MDC page builder.
Grid Image Text

Up to 4 items with an image and WYSIWYG each. Can be used for any kind of static content. Has an optional card style.
Grid Impact Relationship

Reusable component available in the NIHR MDC page builder.
Grid Posts Latest

Up to 4 latest post teaser items from a selected category (or unfiltered from all posts), with a post thumbnail, excerpt and reading time each.
Grid Posts Relationship

Reusable component available in the NIHR MDC page builder.
Grid Posts Repeater

Reusable component available in the NIHR MDC page builder.
In Focus

Shows the latest post from a selected category with:
- featured image (square ratio),
- post title (class underline),
- post excerpt limited to 300 characters,
- button (class button) linking to the post.
Latest Publications

Image with a text column showing:
- optional title,
- latest 4 published posts as links,
- optional button link below the list.
List Logos

Upload logos (gif, jpg, png or svg) that will line up centered. Allows links for each logo and has an optional card layout.
Meet The Team

A simple accordion built with accessibility in mind. Each accordion panel provides a title and formatted text content, which is toggled by clicking at the title.
Reusable Component

The reusable component allows you to save a component or group of components which you can later use in any post or page on your site. If you are often adding the same content to the same component or group of components, using the reusable component will save you a great chunk of time.
Slider Image Gallery

Drop any images on the gallery field, order them by drag & drop and optionally add a caption per image. Any image ratio will fit into the slider. It always covers the full width of the website container and comes with a thumbnail preview navigation.
Slider Images

Simply drop any images on the gallery field, order them by drag & drop and optionally add a caption per image. No need to worry about the photo selection as any image ratio will fit into the slider.
Slider Images Centered

Drop images on the gallery field, order them by drag & drop and optionally add a caption per image. Crops images into a predefined ratio, centers the active image slide and crops the previous and next image.
Slider Trainees

Simply drop any images on the gallery field, order them by drag & drop and optionally add a caption per image. No need to worry about the photo selection as any image ratio will fit into the slider.