Text-Image Tab
The Text-Image Tab (functional example below) is a versatile component designed to display compelling copy, imagery, and a call-to-action link. The component can display up to four tabs in content or full-width pages.
- Found in Side Panel > Components > Content
Tabs bar summary:
- The tabs bar is comprised of a title and up to four tabs.
- Clicking a tab updates the content below (text/image) to reflect the new tab content.
- If only one slide is added to a page, the tabs bar does not appear in the component.
- If no tabs are available, the height of the component decreases accordingly by 70px.
Future students
START YOUR FUTURE HERE
Get an excellent academic foundation—plus the real-world experience you need to succeed—with one of 60+ career-focused undergraduate degrees.
ADVANCE YOUR EDUCATION
Pursue one of 65+ master's degrees, PhDs or professional master's diplomas at Canada’s most entrepreneurial university for graduate education.
COME STUDY IN CANADA
Set yourself up for success at home or abroad with our innovative, career-focused education—right from the heart of Canada’s most multicultural city.
Individual tabs:
- The tabs title appears to the left of the tabs and has a maximum character count of 25. This element is optional and can be hidden.
- Each tab has a maximum character count of 20.
- Tab underline colour matches site accent colour.
- If the length of the tabs is wider than the page grid, the tabs will be cut off and an will arrow appear.
- Fonts are inherited from the parent section settings (the title, tabs title and tabs text will update accordingly but body copy and CTA button remains the same)
- Authors can also select from 2 font sizes: XL and Large. This selection affects both the title and body copy size.
- XL size title: Maximum character count 25
- L size title: Maximum character count 40
- XL size body text: Maximum character count 150
- L size body text: Maximum character count 170
- Button text is shown as upper case (optional). It will appear as entered.
- Text is centred vertically in the content area and left aligned.
Image size is 1376 X 992 but the displayed size will vary based on the width of the text area.
In all instances the image fills the box that contains it; centred, filling the width and cropping the top/bottom if needed.
- User can select from five primary colours per tab:
- Site's primary colour
- Accent colour
- Black
- White
- Grey
- Only white is available when no tabs are present.
- Slider arrows appear if multiple tabs have been added.
- If there is only one tab, the arrows disappear.
- There is no auto-advance function for this slider.
