Hero sizes
Tall (60vh)
The overall height of this hero is 60% of the browser window.
Common uses:
• Concordia.ca home page
• Subsite landing page
Medium (45vh)
The overall height of this hero is 45% of the browser window.
Common uses:
• Top hero on first level landing page
• Secondary hero on a page
Short (35vh)
The overall height of this hero is 35% of the browser window.
Common uses:
• Top hero on first level landing page
• Secondary hero on a page
Mini (19vh)
The overall height of this hero is 19% of the browser window.
Not commonly used
Square
Common uses:
• In a column control with two square heros side by side
• In a column control (check equal height in the column control) beside a flexible hero
Flexible
Common uses:
• With a background colour or graphic pattern
• If there is a lot of text in the hero and text is cut off when viewed on a desktop and/or mobile device
Full height
Reserved for use by UCS web team
Takes up the full height of the browser window
Not commonly used