CT - Tabs

Example

Tabs are best used to separate content into smaller groups of related information and lets users navigate between these related sections of content, displaying one section at a time.

When to use Tabs:

Grouping Related Content – Use tabs to separate content that belongs to the same category and can be structured into clearly labelled sections.
Improving Usability – Tabs help users quickly find information without excessive scrolling.
Keeping Pages Clean – They prevent content overload and keep layouts uncluttered.

Tabs are made up of three parts:

Tab - A small, labelled box that audiences can interact with and select.
Tab List - A list of tabs at the top of the component that are used to control what content panels are shown.
Content Panel - These panels contain the content listed under each selected tab.

Best Practices for Tabs:

Keep Labels Clear & Concise – Use short, descriptive names (e.g., "Overview," "Features," "Pricing").
Limit the Number of Tabs – Too many tabs can overwhelm users and is why we have limited this to 5 tabs.

Some recommended guidance as follows:

The first tab should be the most commonly-needed section. Arrange the other tabs in the order that makes most sense for your users.
When the content is published live and audiences are moving between tabs, the URL gets updated with an anchor ID (i.e. #123456) corresponding to the current tab’s direct URL. Useful for emailing a direct link to a tab containing specific information.
On smaller resolutions, from medium size devices down, the layout of tabs updates to a vertical layout, similar to that of the accordion Content Type.
If you have many pieces of content consider if an alternative Content Type might suit your requirements, such as 'CT - Accordion', or whether the content is better implemented as a step by step process on a web page.

General Guidance

Organise Content Blocks: Avoid condensing all information into a single content block. If your content includes multiple data types, structure it into separate blocks for easier maintenance and future edits.
Use Headings Properly: Headings should be used to group content and establish hierarchy, not for styling. Proper heading usage improves both accessibility and readability.
Internal and External Links: When linking within your website, use Section Links and Content Links, as the Web CMS automatically updates these if content is reorganised. For external links, always use the full URL of the destination website or resource.
Third-Party Content and Custom Code: Do not embed unapproved third-party content or add custom code without consulting our team via the IT Service Desk.

Visit our section How to Write for the Web for some guidance on creating and maintaining content on your website.

Images and Documents

All assets for use on our website must be properly prepared before they are added to the Media Library.

Copyright Compliance: Ensure all assets are sourced responsibly. If using third-party assets, obtain the necessary permissions before uploading to avoid copyright infringements.
Accessibility: Documents must be fully accessible before being added to the Media Library for website use.
Optimising Assets: Images must match the required dimensions (Width x Height) for use with Content Types. These requirements are provided in field descriptions and form guidance. Document file size must be optimised for upload to the Media Library and for use on the web. The maximum file size for upload to the Media Library is 5MB (megabytes).
Filename Convention: Users must ensure that assets are named correctly before they are uploaded to the Media Library. Assets must only contain lowercase letters (a to z), numerals 0-9) and hyphens (-). Avoid spaces, special characters, or uppercase letters.

Visit our Media Library information section for more guidance and resources.

Accessibility Guidance

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

Do not create images with embedded text.
Do not add image Alt Text / Description to your image if it is decorative.
Do not use generic link text such as 'Click Here' and 'Read More'.
Do not add HTML elements such as span, div, h1 or CSS to any of the fields to change the structure or styling of the Content Type. It will be removed by our team.
Ensure that you have added a descriptive title attribute to any third party embeds on your website such as video embeds for Panopto and YouTube.

Visit our Accessible Content Guidance for more information on how to make sure your website content is accessible.

Form Field Guidance

Name: CT - Tabs

Description: Add a maximum of five tabs and navigate between panels of related content, displaying one panel at a time.

Field Name	Field Description	Size	Type	Required
Name	Add a descriptive and easily identifiable name for your content tab grouping, such as "Study and Career Tabs."	80 Characters	plain text	Yes
Tab 1 Title	Add a short and descriptive title for the first tab (limit: 40 characters). Do not add HTML code, as it may break the layout and affect accessibility.	40 Characters	plain text	Yes
Tab 1 Content	Use the HTML Editor to write and structure text information for the first tab panel. Do not add bespoke HTML, CSS, JavaScript, or unsupported code without Web Support Team approval.	12800 Characters	HTML	Yes
Tab 2 Title	Add a short and descriptive title for the second tab (limit: 40 characters). Do not add HTML code, as it may break the layout and affect accessibility.	40 Characters	plain text	Yes
Tab 2 Content	Use the HTML Editor to write and structure text information for the second tab panel. Do not add bespoke HTML, CSS, JavaScript, or unsupported code without Web Support Team approval.	12800 Characters	HTML	Yes
Tab 3 Title	Add a short and descriptive title for the third tab (limit: 40 characters). Do not add HTML code, as it may break the layout and affect accessibility.	40 Characters	plain text	No
Tab 3 Content	Use the HTML Editor to write and structure text information for the third tab panel. Do not add bespoke HTML, CSS, JavaScript, or unsupported code without Web Support Team approval.	12800 Characters	HTML	No
Tab 4 Title	Add a short and descriptive title for the fourth tab (limit: 40 characters). Do not add HTML code, as it may break the layout and affect accessibility.	40 Characters	plain text	No
Tab 4 Content	Use the HTML Editor to write and structure text information for the fourth tab panel. Do not add bespoke HTML, CSS, JavaScript, or unsupported code without Web Support Team approval.	12800 Characters	HTML	No
Tab 5 Title	Add a short and descriptive title for the fifth tab (limit: 40 characters). Do not add HTML code, as it may break the layout and affect accessibility.	40 Characters	plain text	No
Tab 5 Content	Use the HTML Editor to write and structure text information for the fifth tab panel. Do not add bespoke HTML, CSS, JavaScript, or unsupported code without Web Support Team approval.	12800 Characters	HTML	No

Queen's University Belfast