Chocolate Box
A versatile component made up of 4 different style panels to display a variety of information including a statistic and testimonial.
How to use
- Add a Heading
- Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
- Select a suitable image from the Media Library for Panel 1 Image.
Recommend image is at least 1280px x 875px. The image can be any size or aspect ratio, and will be cropped and resized to 1280px x 875px automatically by a service called PXL. Find out how PXL crop and resize works. - Add Panel 1 Text to go with the Image
- Add a link for Panel 1. Select a section or content item for the Panel 1 Internal Link (ignore the Use default link text checkbox), or paste the full URL for the Panel 1 External URL (please do not enter both)
- Choose an Icon from the list for the Panel 2 Icon
- Add a Panel 2 Title and Panel 2 Text to accompany the icon
- Add a Panel 3 Heading to highlight a statistic or fact and Panel 3 Title
- Panel 4 displays a testimonial:
- Select a suitable image from the Media Library for Panel 4 Image.
Recommend image is at least 200px x 200px. The image can be any size or aspect ratio, and will be cropped and resized to 200px x 200px automatically by a service called PXL. Find out how PXL crop and resize works. - Add Panel 4 Text, this is the text for the testimonial
- Add Panel 4 Name, the name of the person who has given the testimonial
- Add Panel 4 Occupation, the occupation or role of the person who has given the testimonial
- Select a suitable image from the Media Library for Panel 4 Image.
Content Type Details
ID: 447
Name: Chocolate Box
Description: A versatile component with 4 distinct panels, including a testimonial
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Heading | Add a Heading, for example "Research at Middlesex" | 150 Characters | Plain Text | Yes |
| Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation | 24 Characters | Plain Text | No |
| Panel 1 Image | The image for the larger panel | N/A | Media | Yes |
| Panel 1 Text | Text that goes with the larger panel | 100 Characters | Plain Text | Yes |
| Panel 1 Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| Panel 1 External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Panel 2 Icon | Select from a list of pre-defined icons | N/A | Select Box (List: Material Symbols) | Yes |
| Panel 2 Title | A title for the 2nd panel | 20 Characters | Plain Text | Yes |
| Panel 2 Text | The text for the 2nd panel that goes under the title | 100 Characters | Plain Text | Yes |
| Panel 3 Heading | A heading for the 3rd panel | 8 Characters | Plain Text | Yes |
| Panel 3 Title | A text for the 3rd panel that goes under the heading | 50 Characters | Plain Text | Yes |
| Panel 4 Image | A small image the testimonial panel | N/A | Media | Yes |
| Panel 4 Text | The text with the testimonial | 120 Characters | Plain Text | Yes |
| Panel 4 Name | Name of the person | 50 Characters | Plain Text | Yes |
| Panel 4 Occupation | Occupation of the person | 50 Characters | Plain Text | Yes |
Example
Research at Middlesex
/0x1:1280x876/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/c-box-ph-1.f0866740.jpg)
biotech
Research Excellence
Middlesex University is committed to impactful research across various disciplines.
200+
Partnerships with institutions worldwide
/filters:format(webp)/0x1:218x219/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/quote-th-1.1d5a152c.jpg)
A placement in industry gives you experience in the field and a chance to sample your chosen career