This Component Library serves as a reference for elements that may be used across Ingenium webpages. It was designed to help content authors understand and choose the elements available to format their content.
All components are screen-size responsive, meaning they will adjust themselves to fit on screens of different sizes, e.g. desktop, mobile. To view tablet and mobile versions of components, simply resize your browser window to a narrow view (if on desktop), or load this page on your tablet or mobile device.
Jump to a section:
1. Headings
Headings are used at the beginning of distinct sections on a page. Sections may be further subdivided with nested heading levels to give a sense of hierarchy. When referring to headings, use "H" and the heading level number - e.g., a third-level heading is an H3.
H1 heading example*
This is an H1
H1s are automatically styled as Acumin Pro Semi Condensed, 32pt, 400 weight
*There will only be one H1 on a page, and it will automatically take the same name as the page title. You may choose to visually hide the H1 on a page; this is usually done when the page title is displayed in a banner. H1s should not be used in the content as section headings.
H2 heading example
This is an H2
H2s are automatically styled as Acumin Pro Condensed, 25.6pt, 500 weight
H3 heading example
This is an H3
H3s are automatically styled as Acumin Pro Condensed, all caps, 20pt, 700 weight
H4 heading example
This is an H4
H4s are automatically styled as Acumin Pro Semi Condensed, 16pt, 700 weight
Accessibility Note: When using multiple heading levels, ensure nesting happens in sequential order. I.e., A section nested within an H2 should be headed by an H3. A section nested within that should be headed by an H4.
|
✅ Do |
❌ Don't |
|
Do format headings in proper nested order (H2 > H3 > H4). H2Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. H3Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. H4Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. H2Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. |
Don't mix up the order of heading nesting.
H2Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. H4Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. H3Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. H2Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. |
2. Text and Text Style Modifiers
The bulk of text content on a given page will be body text (Acumin Pro Semi Condensed, 16pt). Body text may be styled with bold or italics, and in unordered (bullet) or ordered (numbered) lists. Underlining text is reserved exclusively for in-line links, and should not be used to emphasize content (use Text Style modifiers instead - see examples in Section 2.1).
Regular body text example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Bold text example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Italicized text example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Unordered (bullet) list example
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam nonumy eirmod tempor
- Invidunt ut labore et dolore magna
Ordered (numbered) list example
- Lorem ipsum dolor sit amet
- Consetetur sadipscing elitr
- Sed diam nonumy eirmod tempor
- Invidunt ut labore et dolore magna
2.1 Text Style Modifiers
Two additional options for styling text are Quote and Grey Background modifiers. These should be used sparingly in content, for particular emphasis of text where bold styling is insufficient, or to visually break up large sections of body text.
Quote example
Text in a Quote may also be styled using the aforementioned options, such as bold or italics.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Grey Background example
Text in a Grey Background may also be styled using the aforementioned options, such as bold or italics.
Headings, images, and other components besides text may also be added to a Grey Background section.
3. Content Layout Options
The default way to display content on a page is in a single column, left-aligned. Content may also be displayed in 2 columns, 3 columns, or centred on a page.
Note that 2-column and 3-column layouts display as single-column, stacked content sections on mobile screen sizes.
2-column layout example
Column 1. Content in a 2-column layout may be spaced in a 50-50 arrangement (both columns equal widths), 70-30, or 30-70.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Column 2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
3-column layout example
Column 1. Content in a 3-column layout will be arranged into three equal-width columns.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Column 2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
Column 3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
4. Basic Actions
Basic action components allow users to interact with content on a page. These actions are commonly found across the web, and include buttons, accordions, and webforms.
4.1 Buttons
Buttons are used as "calls to action" that link to other pages. Ingenium buttons are styled in two ways: Primary and Secondary.
Buttons must always have a label (the text that shows on the button). Try to use consistently strong verb-noun 'action' language for button labels - e.g., use "Become a Member" instead of "Membership Information".
Primary button example
Most frequently used button type across Ingenium pages. Use to direct attention to a main call-to-action.
Secondary button example
Use to present an action or link with less weight than a Primary button. If presenting two actions where one is more important than the other, use a Primary button for the more important, Secondary for the lesser.
Accessibility Notes:
- Buttons should never be used as anchor links (links that jump the user to another spot on the same page).
- Try to be as specific as possible with your button labels. However, in some instances, to avoid the label becoming very long, you may have a shorter text label (visible) but include an ARIA label (invisible) to help screen reader users understand what the button is for. E.g. Button label visually says, "Read More". A person using a screen reader hears the ARIA label that reads, "Read More about 3 Things You Should Know - October Edition". Please contact Renée Racicot to coordinate.
- In rare instances, your page may have multiple buttons that have the same label text because they link to similar pieces of content - e.g. you want buttons linking to several different activities, and all labels read, "Try the Activity". If possible, rework the content so that multiple buttons with the same labels are not necessary, like by using Snippets. If all buttons must have the same label, you may use ARIA labels to expand on the button destination so that screen reader users are not presented with multiple ambiguous "Try the Activity" buttons. For example, the ARIA labels might read, "Try the bridge building activity", "Try the apple experiment activity", etc. Please contact Renée Racicot to coordinate.
|
✅ Do |
❌ Don't |
|
Do use proper visual hierarchy of buttons based on desired action. Here, "Confirm Purchase" is the most desirable decision for the user to take, so it should get emphasis as a Primary button. |
Don't use the same visual hierarchy for all buttons. Here, it is harder for users to distinguish which is the most desirable option because all the buttons are styled the same. |
|
Do use proper visual hierarchy to emphasize the most desirable decision for the user. |
Don't use inappropriate visual hierarchy. Here, "Next" should be the most desirable decision, but "Previous" looks more important because it is styled as a Primary button. |
|
Do use strong action-verb language for button labels. |
Don't use vague or non-actionable language for button labels. |
|
Do use an ARIA label when button text label would be very long otherwise. Contact Renée Racicot for assistance with this. ARIA label: Read More about three things you should know: October edition |
Don't use lengthy button text labels. Read More about three things you should know: October edition |
4.2 Accordion
The accordion component is used to display a list of content sections, each of which can be expanded to reveal additional content. By default, users only see the titles of each content section, and must press the title to expand and view the content.
Use with text content that may be of interest to visitors but is not critical to their experience on the page, and that can be divided into discrete sections. Please do not assume that users will look at and open every accordion section; if a piece of information is important, format it outside of an accordion.
Accordion sections may only house text-based content, which may be styled in any body text format, e.g. bold, italics, list.
Accessibility Note: If content can be formatted without an accordion, choose to avoid using this component. The way it's currently built, it does not indicate to screen reader users that each section is interactive, so each section title must include "Click to expand". The web team is aware of this shortcoming and are working towards a more accessible solution.
Accordion example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
- Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
Aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
5. Images, Icons, and Logos
Webpages benefit greatly from graphical elements, including images, icons, and logos, which can convey ideas and information in an appealing, concise way and divide text into more easily consumable sections.
Each of the three graphical elements identified in the following subsections has different uses and guidelines for best practice:
- Images may be included as the page's visual identity (preceding any body content), alongside body text content, or in an image gallery. They may also appear as links to other webpages; examples of this are covered in the section on Referenced Content.
- Icons may be used sparingly alongside content headings, anchor links, or other areas that benefit from a visual landmark or cue to represent a singular concept (e.g. "Admission", "Hours")
- Logos are used exclusively to represent an entity such as an organization or company. They may be linked to their respective organization's website. Logos are used sparingly across the Ingenium website, and only in cases of acknowledging partners or Ingenium brand entities (e.g. the museums, Ingenium Centre, Ingenium Channel)
Accessibility Note: Any images used on an Ingenium webpage must have alternative (alt) text. Images must not include any 'baked-in' text. Photo credits and captions are optional, but recommended when possible. More complex images - for example, diagrams, infographics, and maps - also require a text-based long description to fully convey the information they contain.
Resources to aid with writing alt text and long description are available on Enterprise (internal access only).
|
✅ Do |
❌ Don't |
|
Do use plain images.
Alt text: A man holding a small child stands beside a black-and-red biplane. Both people are smiling and wearing aviator hats. |
Don't use images with text 'baked in'. Some users may have difficulty reading the text over a busy background.
Alt text: A man holding a small child stands beside a black-and-red biplane. Both people are smiling and wearing aviator hats. White text on the image reads, "Biplane rides now available!" |
|
Do include proper alt text with images
Alt text: Big fluffy clouds in an overcast sky |
Don't exclude alt text, or leave as default (e.g. the file name). Alt text: zrj-TPjcRLA-img.jpg |
5.1 Visual Identity Images and their dimensions
Visual Identity images appear at the top of a page under the title banner and before any body content. They must be cropped to a specific size depending on the page they are placed on:
- Event, Educational Program, Exhibition, Recipes, Spaces and Studios, or Tours main image: 790 x 450 px
- Research Project, Fellowship, Innovation Lab, Summer Camp landing, Canada Day landing (3 museums), Holiday Programming, Hackathon event, an Initiative, or general landing page: 944 x 355 px
- Sliders (homepage carousel): 1600 x 600 px
Visual Identity examples
5.2 Image Galleries
Image galleries are ideal for displaying collections of images in a compact manner. Users may advance through the gallery slides and read accompanying (optional) captions for each image, or expand the image to view it at full size.
It is recommended that no more than 12 images are included in a single gallery, as the likelihood of users seeing all images is reduced the more slides there are.
Image gallery example
Image gallery
5.3 Images accompanying Text
Images may be used alongside text, either displayed left-of-centre or right-of centre. This format is ideal when images are used to illustrate concepts explained in body text, or simply to provide visual interest to content.
Image with Text Left Example
Note that on mobile, the text and images will stack on top of each other in a single column.
Text to the left of an image will wrap under the image after approximately 513 characters, including spaces.
Add a heading, other body text styling, or Primary button, if desired.
Image with Text Right Examples
Text to the right of an image will wrap under the image after approximately 336 characters, including spaces.
Add a heading, other body text styling, or Primary button, if desired.
Caution: Avoid bulleted or numbered lists with this image left/text right paragraph type.
This is an example of text wrapping under the image.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
5.4 Image with Text Banner
Special emphasis may be placed on text and image content in select instances. The image may be placed to the left or right of the text, and the text background colour may be either Ingenium Blue or Gray. Images are scaled according to the length of text and captions are not displayed (alt text is still required as usual). Note that this component is not for use on the Channel.
On mobile, the images are not shown.
Image with Text Banner Example
Text may be formatted with any body text styling.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Text may be formatted with any body text styling.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
5.5 Icons
Icons are visual aids that serve as "landmarks" for the eye as users scan a page. They should be relevant to the concept(s) they are trying to illustrate and easily recognizable at-a-glance.
Icons used across the site are primarily drawn from the FontAwesome library through Drupal. Custom icons may be used on a case-by-case basis, for which content authors must provide icon image files to the web team.
Accessibility note: Icons should never be used alone - a text label or heading should always accompany an icon. Icons do not need alt text if they are considered decorative images.
Examples of icons can be seen across the Ingenium site, most notably on Visitor Information pages and Membership.
Icons, as seen at the top of the museums' Visitor Information pages.
Icons are used on the Membership page to represent membership categories.
5.5.1 Special Icons
If your page requires special icons, please work with a graphic designer (to work with our internal designers, submit a request to Annie Tanguay). The web team can then assist with placing the icons on the site with alt text, as necessary. Existing examples of special icons can be found on the pages for the Soil Lab Garden ("Be a friend to your soil" section) and Digital Innovation Lab ("The Lab's 10 Guiding Principles"). Please contact Reneé Racicot, Web Manager, for assistance.
5.6 Logos
Logos representing organizations and companies are used primarily on the Ingenium website to recognize partners. They are placed in their own section at the bottom of a given page. Please use a combination of a Add text paragraph type for the heading and the Add Partner logo paragraph type for the logo image and logo link.
Accessibility Note: Alt text for logos is simply "[Name of organization] logo"; there is no need to describe what the logo looks like.
Example headings below:
Sponsored by
or
Partner
or
Our Partners
or
In collaboration with
The above headings on Travelling Exhibition pages are usually sentence case.
On permanent/temp Exhibition or Event pages, the heading is an H2, as in example below.
Sample "Our Partners" section with two logos.
5.7 Infographics and accessibility
Infographics are images that combine graphic elements and text to illustrate data and complex ideas. While they can be concise ways to provide information visually, some extra care is needed to ensure they are accessible.
Two approaches can be used for infographics on the web:
- Extracting the key information in the infographic and converting it to plain text and image(s). This may require revising how the information is displayed visually, but ensures the content is as accessible as possible. A long description may have to be provided to give additional context to any imagery used. This may not be possible in all cases. An example is provided below.
- Providing a full long description - essentially a transcript - for the infographic somewhere on the page, or in a separate link near the infographic. This requires describing all the information contained in the infographic in a clear manner, including any visual relationships between information. There is no character limit for long descriptions. Further information and examples can be found on pages from the Diagram Institute, Cooper Hewitt Museum, and last-child.com.
Infographics should not be attached to webpages as PDFs. This is not an accessible alternative unless additional steps have been taken to ensure the PDF is fully accessible.
Infographic converted to plain text and image
On the left is the original infographic, meant for print and physical display in the Soil Lab Garden. When featured on the Soil Lab Garden webpage, the text elements on the infographic were separated from the illustration and converted to plain HTML text, as seen on the right. The illustration, as an image, has alt text and a long description linked below it on the page. The relationships between the text and image were preserved using a numbering system instead of the lines used in the original.
The original infographic was one image with embedded text and illustration.
The adjusted infographic places the HTML text alongside the illustration and uses alt text to identify the parts of the image that correspond with the text. A link to the long description is provided to give additional detail.
Infographic with long description on page
5.8 Hero Image
Hero images can be used to showcase a particular item as main focus on the page, secondary to main image. Ideal for artifacts for example, or an end product of a project. Ensure the image file is of higher resolution than other images used on the page for best quality. Note that the Hero image should only be used on the Channel.
Hero Image Example
A gingerbread and sugar model of the Ariane 5 launch vehicle.
6. Interactive and Social Media
Interactive media components are video (Youtube, Vimeo) and audio players (Soundcloud). Videos require closed captions, and both media types require a transcript; for videos, a descriptive transcript - a text document containing description of visual elements and transcription of audio elements - is preferred. Video player transcripts are automatically included directly below the player, and users can expand to read. Audio player transcripts may be included as in-line text if the audio is a narrated version of the text (see Thriving from Our Roots installation page for an example of this), or as an accordion immediately following the Soundcloud embed on the page.
Social media components include Twitter and Instagram post embeds. Any posts from these platforms shared on an Ingenium webpage must comply with accessibility guidelines, including appropriate alt text.
Video Embed Example
Transcript
| Audio | Visual |
|---|---|
|
Curator Tom Everrett — a white male in his late 30s — is standing beside the Sound Analyser. He is wearing a pair of blue artifact-handling gloves. |
|
|
Text on screen: Tom Everrett, Curator, Communications. |
|
|
Everrett: This here is a Koenig Sound Analyser, made by Rudolph Koenig in the 1880s in Paris. |
|
|
Everrett: What’s so amazing about this machine is that it allowed scientists, for the first time, to do something they couldn’t do before, which was to make something invisible — sound waves — visible, so that you could actually study sound, as it happened, in real time, using your eyes as well as your ears. |
Camera moves to a close-up view of the artifact, and pans slowly upwards from bottom to top. |
|
Everrett: As you rotate this mirror, the flames start to appear as a single line or a single streak across the mirror. |
The camera returns to a shot of Everrett standing next to the Sound Analyser. Everrett turns a handle to rotate the artifact’s four-sided mirror. |
|
Everrett: And depending on which resonator is resonating at that time — which harmonics are in the sound — those particular flames will start to jump and dance on the mirror. |
Everrett stops spinning mirror and points to where different flames will appear on the mirror when flames are lit. |
|
Everrett: And that tells you which one of those resonators, which one of those harmonics, is actually being activated by that particular sound. |
|
|
Everrett: So artists would then draw those sounds out, and draw what was appearing on the mirror, and that was their record. So they could start to study the different harmonics that appear in different sounds. |
|
|
Everrett: Ready? |
A close-up view of the artifact, where flames on the mirror are now lit. The background room is darkened. |
|
Everrett’s colleague, curator David Pantalony, is standing off-screen left with a handheld organ pipe. |
|
|
Pantalony: Go, yeah. |
Everrett rotates the four-sided mirror at an increased speed; his face is illuminated by the bright flames. The organ pipe, played by Pantalony, appears on the left side of the screen. |
|
Text on screen: David Pantalony, Curator, Physical Sciences and Medicine. |
|
|
[The sound of organ pipe being blown to produce a note (G).] |
|
|
Pantalony: Oh, we got it, see? The G. |
Light streaks take on the shape of sound waves across the mirror. |
|
[The sound of the organ pipe blown harder, increasing in pitch.] |
Light streaks continue to react to the sounds produced by the organ pipe. |
|
Pantalony: You see organ pipes are really rich in harmonics. That’s why the whole thing is lighting up. |
|
|
[The sound of the camera operator, off-screen, singing alongside the organ pipe (same note of G), which slowly increases in pitch.] |
The camera zooms in closer on the mirror. |
|
Pantalony: This is the best one ever I’ve tried. |
|
|
[The sound of the camera operator singing in a slightly higher key (B flat), while the organ pipe is being blown (in G).] |
A slow motion view; the shapes of sound waves appear more clearly in the mirror. |
|
[The sound of the organ pipe being blown in G, then increasing in pitch.] |
|
|
[The sound slowly fades away.] |
The screen slowly fades to black. |
|
The Ingenium logo appears, animated against a white background. |
|
|
The Ingenium logo disappears and is replaced with Ingenium’s web URL, IngeniumCanada.org. |
|
|
The Ingenium URL disappears and is replaced by a Canada logo. |
Videos uploaded to Ingenium Youtube and Vimeo channels should include a link in their descriptions to the video transcript, hosted by Ingenium.
Accessibility Notes:
Consult the following list for quick reference on what accessibility features are required for multimedia following Ingenium Web Video Accessibility Guidelines.
- Captions: Required
- Transcripts: Required
- Audio Descriptions: As needed (if visual content provides important information that is not available in audio alone)
Transcript formatting follows Ingenium Production guidelines, which state that videos with visuals-only (no dialogue or sound critical to understanding the video) should have transcripts formatted in paragraphs, while videos with dialogue or critical sounds should have transcripts formatted in tables, with one column for Visual information and one column for Audio information.
An example of a video with visuals-only is featured in the Earth in Focus exhibition: Klein Snow Study Kit (in the exhibition itself, the video is played without audio). Visitors can scan a QR code near the video display to access the transcript, hosted as a standalone Ingenium page.
An example of a video with dialogue is featured on the Sound Artifact research project page. The transcript is formatted as a table on the website, and as a PDF link in the video's description on Youtube. The template for formatting table-style transcripts can be found on Enterprise (internal access only).
Audio Embed Example
At this time, audio files must be embedded using a manual coding process. Please contact Renée Racicot, Web Manager, for assistance.
Twitter Embed Example
Instagram embed example
7. Referenced Content
Referenced Content comprises Manual and Dynamic Snippet components that link to (or 'reference') other webpages, Ingenium or otherwise. These components essentially make sections of image and text link to other pages.
The difference between Manual and Dynamic snippets is primarily in how they are created in the backend and which component should be used in a given situation. Manual snippets come with options for a title, image, and teaser text used to display the linked content. They may be used for external or internal (Ingenium website) links. Dynamic snippets can only link to specific content on the Ingenium site (Channel articles, Events), and only provide a field for the content author to indicate the page link. The component then automatically uses the referenced page's title and main image.
Both Manual and Dynamic snippets should use the "Rectangular" Image Size instead of "Square" to maintain consistency across the website.
Manual Snippet examples
Dynamic Snippet examples
8. Hyperlinks
Internal links (those within the Ingenium site) and external links (those bringing users to a site outside of Ingenium's) should now open in the same tab. This is for a mobile-first approach. It can be difficult for mobile users to navigate between tabs and can create confusion if the user didn't realize the link opened in a new tab.
Having links open in the same tab is also more beneficial for accessibility. Opening links in a new tab can create confusion for those using screen readers (depending on screen reader).
Lastly, we want to give the user the control. Most users now choose to open links in new tabs on their own, but forcing the decision upon them can be frustrating. This approach allows users of different preferences to engage with the website.
Exceptions
The only time a link should open in a new tab is when opening in the same tab would interrupt a process. Some examples of instances where a link should open in a new tab:
- A form that provides a link to an FAQ or supplementary page: the link should open in a new tab so the user does not lose their place in the form.
- A page featuring a video that also includes a link to the transcript: having the link open in a new tab allows the user to have the video playing while reading the transcript.
- A page linking to a checklist or set of instructions that the user must reference in order to complete a task on the current tab or window: opening the link open a new tab or window allows the user to quickly move between instructions and target page.