Index

• Font
• Link/Button
• Image
• Video
• Additional Style (column, table)

 

---

Font style

 

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Normal

Bold/Italic/Underline/Line-crossed

• Dot List

1. Ordered List

Quote

Alignment option (Left/Centre/Right/Justify)

 

---

Link/Button

 

Normal Link (Same tab): homepage

Normal Link (Open new tab/window): homepage

*All links (except email link) have option of same or new tab.

Red Button: homepage

White Button: homepage

Red Large Button: homepage

White Large Button: homepage

Email link: jccc@jccc.on.ca

Email link with Subject&Boty: jccc@jccc.on.ca

Link on image: 

Image

 

---

Image 

 

Hero Slide (top slider/banner on Homepage)

• Has to work in both 16:9 ratio for mobile/tablet and 10:3 ratio for computer screen. (4:3 for small mobile less than 480px)
• Recommend: 3200 width 

* Note: The homepage slider has a 50px high overlay for the slide counter, so make sure no important information is in the bottom 50px of the image, as it may not be fully visible. And for the reference, since this site is responsive, it is set so the image appearance change on wide computer screen, it will be 10:3 ratio (so wider the screen, top and bottom gets cut as stretches out to match the width)

Main image/Image Slideshow (top image on Event Page)

• 16:9 ratio at 72dpi
• Minimum: 1920px by 1081px

*We can add multiple images to make it slider.

Thumbnail image for Event/News (image shows as list at Visit/What's On or Home/Up Coming Event)

• 16:9 ratio at 72dpi
• Recommended: 1920px by 1080px

Thumbnail image for Film (at the Film line-up)

• 7:10 aspect ratio at 72dpi
• Recommended: 1080px by 1543px

 

---

Video

 

Add link on text to jump to video page (eg. Youtube/Vimeo)

link

Embed the video 

 

 

---

 Additional Style (column, table)

 

Table without header

1	a
2	b
3	c

Table with headers (header option, top/side/both)

header	header Col1	header Col2
Header R1	1	a
Header R2	2	b
Header R3	3	c

 

2 Columns with image on right

*Ratio columns and size of image are changeable. This is responsive, so when viewed in mobile, the image usually comes on top of text, requested otherwise.

2 Columns with image on left