Skip to Content

Button Panel

Accessible Content Guidance
A guide to making your content accessible
Next Content Type
How to use General Content

The Button Panel content type is used to highlight prominent links and documentation relating to the context of the subject matter on a webpage.  There is the option to use one button link which will be displayed centrally on the containing panel, or two button links which will be equally spaced as per the above example.  

General Guidance

Please use the following information to help ensure that you are using this content type correctly: 

Links

  • To link to a specific section on your website use a Section Link.  The CMS automatically remembers section links, even if you need to move the linked section when restructuring or reorganising content on your website.  
  • To link to a specific piece of content on your website, use a Content Link. As with section links, the CMS will automatically remember the content link, even if the content is moved to another location on your website.
  • When linking to an external website or resource, then use a Web Address.  The full URL of the website or resource is required i.e. https://www.qub.ac.uk.  Please note that the majority of websites published via the CMS are now accessed over HTTPS only. 

Accessibility Guidance

Please use the following guidance to help make sure your content adheres to accessibility regulations:

  • Do not add HTML elements such as span, div, h1 or otherwise to any of the form elements to change the structure of the content type.  Either you will be asked to remove it, or it will be removed by the Web Support Team.  
  • Do not add any CSS styling or selectors to any of the form elements to change the display of the content added to the content type.  Either you will be asked to remove it, or it will be removed by the Web Support Team.
  • Do make sure that the link text used for the button is as descriptive as possible.  Do not use generic link text such as 'Click Here' and 'Read More'.  Further information and examples are available in the Using Links Effectively section of our Accessible Content Guidance.

Form Field Guidance

Please use the following information to help you use this Content Type effectively:

Banner Form Field Guidance
Field TitleInformationIs it required?
Name This is the name of the content block, only visible to editors of the section.   Yes
Heading 1 Option to add a descriptive heading about a button link.   No
Choose Section Link OR Web Address 1 Use this option to define whether you want to create a Section / Content Link or an External Link for the first button.  Choose Section Link and then add a Section Link or Content Link in the form field Section Link for Button 1.  Choose Web Address and complete the form fields Web Address for Button 1 and Text for Web Address Button 1 to add a button with an external link.     Yes
Section Link for Button 1 For use when Section Link is selected in the field Choose Section Link OR Web Address 1.  Click on the appropriate button option and select the correct section or content link.  Uncheck the option Use default link text to add more effective link text. No
Web Address for Button 1  For use when Web Address is selected in the field Choose Section Link OR Web Address 1. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security. No
Text for Web Address Button 1 For use when Web Address is selected in the field Choose Section Link OR Web Address 1.  Add the text you want to display on the button.  Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above.  No
CHOOSE Section Link OR Web Address OR None 2 Use this option to define whether you want to create another button link.  The options are to specify a Section / Content Link, an External Link or none.  If you do not want a second button link, select the option None. 

Choose Section Link for Button 2 and then add a Section Link or Content Link in the form field Section Link for Button 2.  Choose Web Address and complete the form fields Web Address for Button 2 and Text for Web Address Button 2 to add a button with an external link.    		 No
Section Link for Button 2 For use when Section Link is selected in the field Choose Section Link OR Web Address OR None 2.  Click on the appropriate button option and select the correct section or content link.  Uncheck the option Use default link text to add more effective link text. No
Web Address for Button 2  For use when Web Address is selected in the field Choose Section Link OR Web Address OR None 2. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security. No
Text for Web Address Button 2 For use when Web Address is selected in the field Choose Section Link OR Web Address OR None 2.  Add the text you want to display on the button.  Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above.  No

 

Close Menu - Off Canvas