Featured Panel
Add a featured panel with full bleed background image, heading, optional CTA button and text panel.
How to use
- Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
- Choose a Background Colour: Purple, Purple Light, Red or Teal. The Background Colour sets the background of the Right Text, if the Right Text element is left blank the Background Colour has no impact.
- Select a suitable image from the Media Library for the Background Image.
Recommend image is at least 2200px x 1610px. The image can be any size or aspect ratio, and will be cropped and resized for desktop 2200px x 1610px and mobile 780px x 1688px automatically by a service called PXL. Find out how PXL crop and resize works. - Optionally add an Image Overlay. Use this to improve the contrast ratio of the text over the Background Image when using a lighter image, see Text Over Images.
- Add Left Text, this is the Heading which shows over the image to the left
- Optionally add a CTA button to display below the Left Text. Add CTA Text for the button text and either select a section or content item for the CTA Internal Link (ignore the Use default link text checkbox), or paste the full URL for the CTA External URL (please do not enter both)
- Optionally add Right Text, this shows in a coloured panel over the image
Content Type Details
ID: 441
Name: Featured Panel
Description: A featured panel with a background image, heading, optional CTA on the left and optional text box on the right
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation | 20 Characters | Plain Text | No |
| Background Colour | Select a background colour for the card | N/A | Select Box (List: Featured Panel Background Colour) | Yes |
| Background Image | Select from the Media Library | N/A | Media | Yes |
| Image Overlay | Apply an overlay to the image to improve the contrast ratio of the Left Text and CTA | N/A | Select Box (List: Image Overlay) | No |
| Left Text | Text showed on the left-hand side | 300 Characters | Plain Text | Yes |
| CTA Text | Add text for CTA under the Left Text | 50 Characters | Plain Text | No |
| CTA Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| CTA 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 |
| Right Text | Text showed on the right-hand side, over a colored panel | 750 Characters | HTML | No |
Examples
Teal With CTA and Right Text
/58x0:4038x2913/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/scroll-expand-ph-2.4e376820.jpg)
We are passionate and committed to making a significant impact to global challenges
Learn moreOur students get skills for life to stay ahead in a changing world. Our campus in London is open to students and staff from around the world. At Middlesex, we’re a global family with a shared vision of a world that's fairer and more inclusive.
Red With Right Text
We are passionate and committed to making a significant impact to global challenges
Our students get skills for life to stay ahead in a changing world. Our campus in London is open to students and staff from around the world. At Middlesex, we’re a global family with a shared vision of a world that's fairer and more inclusive.
Purple With CTA and Right Text
We are passionate and committed to making a significant impact to global challenges
Learn moreOur students get skills for life to stay ahead in a changing world. Our campus in London is open to students and staff from around the world. At Middlesex, we’re a global family with a shared vision of a world that's fairer and more inclusive.
Purple Light With Right Text
We are passionate and committed to making a significant impact to global challenges
Our students get skills for life to stay ahead in a changing world. Our campus in London is open to students and staff from around the world. At Middlesex, we’re a global family with a shared vision of a world that's fairer and more inclusive.
Left Text and CTA
We are passionate and committed to making a significant impact to global challenges
Learn moreLeft Text Only