Rich Content Collection

A component which collates a variety of media and content into a series of panels

How to use

 

  • Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
  • Optionally add an overall (h2) title for the component
  • Choose to embed either an Instagram or Tiktok post
  • Add an image to the right hand panel. The caption can be a hyperlink.
  • Add up to two smaller media panels (Rich Content Item): These can either be a Callout, a text/icon Accolade, a testimonial, a linked News Article or a linked MDX Voices story. Details of the fields on each of these panels can be found below.

 

Content Type Details

ID: 669
Name: Rich Content Collection
Description: A versatile component with social content, image content and optional smaller widgets
Minimum user level: Contributor

Content Type Elements Details

NameDescriptionSizeTypeRequired
NameThe Name Element80 CharactersPlain TextYes
Quick-Nav TextThis text will be used for the Quick Navigation Bar/Progress Navigation24 CharactersPlain TextNo
HeadingAdd a Heading, for example "Research at Middlesex"150 CharactersPlain TextNo
Choose social media platformDecide which type of social post will be displayedN/ASelect Box
(List: Rich Content Collection Social Options)
Yes
Instagram IDInstagram's internal ID of post (can be found in URL)80 CharactersPlain TextYes
TikTok IDTikTok's internal ID of post (can be found in URL)80 CharactersPlain TextYes
Main ImageMain image used on top-right of componentN/AMediaYes
Main Image - CaptionOptional caption to describe main image100 CharactersPlain TextNo
Main Image - Caption PositionDecide position of the caption on the image e.g. top left, bottom rightN/ASelect Box
(List: Rich Content Collection Caption Position Options)
Yes
Main Image - Caption Background ColourDecide on background colour of the caption boxN/ASelect Box
(List: Rich Content Collection Caption Background Options)
Yes
Caption is an internal or external link?Decide if caption link is internal or externalN/ASelect Box
(List: Link Options)
No
Main Image - Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkYes
Main Image - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextYes
Rich Content ItemSelect up to two smaller content panelsN/ARepeaterYes

Content Type Details

ID: 670
Name: Rich Content Item
Description: Repeated component inside Rich Content Collection
Minimum user level: Contributor

Content Type Elements Details

NameDescriptionSizeTypeRequired
NameThe Name element80 CharactersPlain TextYes
Content TypeChoose type of content for this panelN/ASelect Box
(List: Rich Content Item Options)
Yes
Callout Card TitleMain title of the callout card20 CharactersPlain TextYes
Callout Card DescriptionDescription/subtitle of callout card. Appears under the title60 CharactersPlain TextNo
Callout Card Internal or External Link?Choose whether the callout card links internally or to an external urlN/ASelect Box
(List: Link Options)
Yes
Callout Card - Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkYes
Callout Card - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextYes
Testimonial QuoteCopy of testimonial quote. Please include your own quote characters.110 CharactersPlain TextYes
Testimonial AuthorName of the person making the quote20 CharactersPlain TextYes
Testimonial Author PositionOptional title/description/position of testimonial author20 CharactersPlain TextNo
Accolade Text TitleLarge text "stat" in accolade panel6 CharactersPlain TextYes
Accolade Text DescriptionSmaller text below main (large) text40 CharactersPlain TextYes
Accolade Text Background ColourChoose background colour of the panelN/ASelect Box
(List: Rich Content Accolade Background Options)
Yes
Accolade Icon NameSelect the Material UI icon to be displayedN/ASelect Box
(List: Material Symbols)
Yes
Accolade Icon TitleTitle text which is displayed directly under the icon24 CharactersPlain TextYes
Accolade Icon DescriptionOptional subtitle/description which is displayed under the title60 CharactersPlain TextNo
Accolade Icon Background ColourChoose background colour of the panelN/ASelect Box
(List: Rich Content Accolade Background Options)
Yes
News ArticleSelect the News Article content (called "News Article") to be displayed in the panelN/ASection/Content LinkYes
MDX Voices StorySelect the MDX Voices content (called "Blog Post") to be displayed in the panelN/ASection/Content LinkYes

Examples

Instagram post, Testimonial, MDX Voices story

"A placement in industry gives you experience in the field and a chance to sample your chosen career"
Priya Chiga Fine Art Student

TikTok post, Icon Accolade, News Article

A heading for the collection

Group of students on campus at open day

A picture of some happy students. Aligned top left, purple background. No link

thumb_up
Research Excellence

Middlesex University is committed to impactful research

Instagram post, Accolade text, Callout card

200+

Partnerships with institutions worldwide