Choosing the right component

The BRGR design system offers a wide choice of component you can use to display content. Sometimes the right pattern is obvious, for example, you should use the Callout pattern to display a quote.

The following table aims to help you choose the most suitable component (also referred to as ‘pattern’) for your content. Some patterns have some additional options, like a layered background style or a version suitable for dark/light backgrounds.

Components are categorised as follows (in this order):

Media: Images, videos, content generated by an iFrame)
Body content: The majority of content displayed on a page
Important content: Content that should stand out from the body content
Urgent content: Content that must stand out from everything else
Summary content: Content that summarises (and links to) another page
Grouped content: Groups of content displayed in the same place, in the same way
Supplementary information: Content related to but not part of the body content, for example, quotes and statistics
Lists and grids: Collections of content items

Scenario	Patterns to consider	Options
I want to display a large image	Media (Aspect Ratio) This uses 16:9 aspect ratio Media (Square Image) This crops the image to a square Media This doesn’t force any aspect ratio	Layered design Annotation below the image
I want to display asmall image like a logo	Media This doesn’t force any aspect ratio and is suitable for any size of logo	Layered design Annotation below the image
I want to display a grid of images	Gallery Displays a grid of thumbnail images. Interacting with a thumbnail image opens a larger version in a modal (a pop out panel that sits over the content).	Can display a row of two, three, or four images (this varies depending on the width of the display) The larger image can have a caption
I want people to watch a video	Media (Video) This embeds iframe code generated from sites like YouTube and Vimeo	Layered design Annotation below the video Transcript (required by law)
I want to display a virtual tour	Media (Tour) This embeds iframe code generated from virtual tour suppliers like Revolution Viewing.	Layered design Annotation below the embed
I want to display a 3D model, quiz, game, or another interactive widget	Media (Tour) This also embeds iframe code generated from other suppliers and websites	Layered design Annotation below the embed
I want to display formatted page content	WYSIWYG Displays an unlimited amount of formatted text using standard HTML for paragraphs, headings, links, lists	Can also format text to resemble code
I want to inform the visitor about something important like contact details, a deadline, or something that may be easily missed	Information Panel Displays a short piece of information in a distinct panel that is visually distinct and separated from body content	Grey background (default) Blue background (contact details)
I want to alert the visitor to something urgent like a confirmed booking or an application error	Alert banner Displays a panel at the top of the viewport containing urgent text	Background colours Icons Background colours for success and error states Optional close button
I want to display an image next to a short snippet of text to summarise and link to a page	Content Summary Displays a short text summary alongside an image	Image is optional Choose either a 16:9 aspect ratio or no aspect ratio Heading 2 that can also be a link Link to a page using a text button or standard hyperlink List of links Light grey background with padding or no background or padding
I want the same as the above scenario but it should be more visible	Promo Panel Displays the same text summary as the Content Summary above but over a background image. The image will be partially obscured by the text. Media Card Similar to a Promo Panel in terms of the content displayed but is better for small amounts of content and when displaying two or three pieces of summarised content side-by-side. Uses a heading, short description (optional) and a button. The image will be partially obscured by the text.	Display the text summary on the left, right, or in the top right corner White or blue background behind text Layered design Background image is optional (uses the brand blue instead) Description is optional Background image is optional (uses the brand blue instead)
I want to display multiple pieces of information but only show one at a time	Accordion Displays a small amount of information in multiple collapsible panels. Uses standard HTML for paragraphs, headings, images, links and buttons. By default only the first panel is open. Panels can be open by interacting with their headings. Includes a ‘Open all’ button to expand all panels. Tabs Displays a larger amount of information in multiple tabbed panels. Uses standard HTML for paragraphs, headings, images, links and buttons. By default, only the first tab is visible. Visitors can navigate to a tab using links visible above the panels of content.	The Accordion can display a Content Summary within a panel Tabs can display other patterns like Content Summaries, Callouts, and Media
I want to display a list of stories, locations, courses, modules, or other content	Card Displays a title and summary of a linked page, along with associated metadata like published date and content type	Portrait or landscape orientations Buttons Image (16:9 aspect ratio or no aspect ratio) Optional metadate including content type above the heading
I want to display a list of people	Card Landscape Person Expands Card to include contact details for a person and a square profile photo. Includes ‘Person’ above the heading.	Portrait version also available
I want to display a list of events	Card Event Version of the Card pattern that displays additional information like the start date and time of an event. Includes ‘Event’ above the heading.	Event type Price Start date End date Start time
I want to display a list of links	Link List Panel A content panel that allows the display of multiple groups of links. Includes optional header and description.	Optional heading and subheadings Optional description Single or multi columns of links
I want to display a grid of content, for example, a grid of people or student work.	Card Grid Displays a three-wide grid of Cards each with a portrait-size photo and title linking through to a page
I want to display a quote, testimonial, or statistic	Callout Can be displayed side-by-side in a row of up to three	Optional large image above text Optional small image below text (for logos, profile photos, etc) Small text option for longer testimonials Optional quote marks
I want to display multiple quotes, testimonials, or statistics	Callout Can be displayed side-by-side in a row of up to three Slider Rotates up to five Callouts, displaying one at a time with a large background image, small portrait image and text. Animated.	See above for Callout options. Blue or green text background Styles for light and dark backgrounds