The primary colour of the current page depends on that page’s family.
You can use the dropdown at the bottom of the screen to switch the primary colour used in examples on this page.
For more information about the Union colour scheme, see the brand guidelines.
Various shades of each colour are available as CSS variables.
These are the components available in the library:
“Button” refers to an element which looks like a button. Semantically, it could be:
type="button"needs to be specified. This is because all MSL pages are wrapped in
<form>tags, and the default action of a
<button>with no specified type is to act as a submit button.
<a class="button">, linking to another page,
<input type="submit">, submitting a form,
<input type="reset">, resetting a form.
Make sure to use the correct semantic markup for the button.
Button text should be short and accurately describe what clicking the button does. For example “Sign up” or “Buy tickets” would be good button text. “Click here” or “Button” is not.
Keep button text short. It will always appear on one line, so on small screens long buttons may hang off the side of the page.
By default, a button will be a primary button, filled in with the primary colour of the current page.
Example: Primary button
You can make a button into a secondary button using the
button-secondary class. This will make it a lighter, less prominent variant.
Example: Secondary button
Primary and secondary buttons work well next to each other, where you have a ‘main’ action you want a user to take, with an alternative path available.
Example: Pairing buttons for a call to action
Make a button bigger using the
button-large class. Make a button smaller using the
Example: Resizing buttons
Details elements hide content from a user. This is useful for:
Do not use a details element for content which every user needs to see. Remember, they hide content, which means that some people may never notice the content exists. Before the details element, first try:
Don’t put details elements inside other details elements.
Keep the summary text short and descriptive, so people can quickly understand what’s hidden and if they need to open it.
The footer is intended as extra navigation, for places which are regularly needed but not headline features of the site. This includes contact information and social media links.
Remember, any content you put in the footer appears on all pages of the site, so make sure the information you’re adding needs to be there.
The footer is separated from page content using the same skyline image as our logo. The skyline and divider match the current page’s primary colour.
Note that the SVG skyline and icons included must be loaded from the same domain as the main page to appear correctly, and may not appear at all in Firefox. This is a security limitation of the
<use> element which we have not applied a workaround for yet.
MSL wraps every page in a
<form> element. This means you don’t need to add your own
<form> in the page content, just rely on the wider one provided by MSL.
There are custom styles to clearly display whether each input is valid or not based on the standard HTML5 form validation attributes (like
maxlength, etc). To avoid showing this validation information while the user is still inputting data, they’re not displayed until the parent
<form> has the
The web browser’s standard validation messages are used to describe exactly what’s wrong with each invalid field. Try to submit the below form to see your browser’s error message style.
The header is the first element on every page and includes our main site navigation.
The first element of the header is a “Skip to main content” link. This appears when it is focussed – usually by someone browsing the page using their keyboard instead of a mouse – and lets the user jump their keyboard focus to the main page content. To support this, the main section of each webpage should have the
The navigation is built mostly around dropdowns. Each navigation item is an
<li> inside an unordered list. There is a
<button class="nav-dropdown-toggle"> which is used to open and close the navigation. It uses the
The button has a
data-path attribute which includes the base path of this site section including a trailing slash. For example, the “About” dropdown has
current class and
aria-current="page" attribute if the user is viewing a page within that section. We cannot do this server-side because no MSL navigation widget lets you create
Immediately following the button is a
<div class="nav-dropdown-container"> containing the dropdown content – usually an unordered list of links, but sometimes things like the search form. It should be linked to the button by the button’s
The basket navigation item uses the MSL Basket Link widget to display the current number of items in the basket. CSS is used to hide most parts of the MSL component except the number of items in the basket, which appear like a notification badge atop the basket icon.
On smaller screens, the page navigation moves into a hamburger menu. Within the hamburger, the first level of navigation is the top-level categories (“About”, “Activities”, etc), and the second level is the pages within that section. Multi-level dropdowns are not supported in any other way or further than these two levels.
The most accurate example of this is the main Union website, where the navigation items are built from the real MSL components. In the code, the header comprises the
<div class="skip-link">, followed by the
Headings are automatically inserted on content pages. They have a large, bold title and use the page’s featured image tinted to match that page’s theme colour. The featured image is also the one used for link previews on social media sites and similar. Some spot and stripe décor is added on top and behind the heading for depth.
The headline appears on the main website homepage and includes key items we want to feature, such as big events or offers.
It is made of 1200x630px images, displayed in a grid pattern, and is based on the markup of the MSL News List widget with the
Example: One headline
Example: Three headlines
Icons are from Font Awesome Free. We don’t load the entire library, just the icons we need in some SVG sprites.
<use> tag (a common way of loading SVG sprites) will only load content from the same domain in most web browsers, so the sprites need to be hosted on the same system as the main site. Additionally, Firefox will only load the content if it’s in the same subdirectory, which means some icons aren’t currently displayed in that browser. This is a known issue.
Insets can be used to draw attention to a piece of information. Keep them extremely brief and use them very rarely, so they maintain their impact.
Notifications are used to show the status of actions in the interface. Most of these are automatically generated in MSL so we don’t have any control over the markup.
Generally, there is an outer
div.msl_notification with an inner
span.<error type>. All styles we define here need to override the MSL system styles.
MSL tends to use
.msl_info for both success and info messages, and
.error for both errors and warnings.
Example: Info notification
Example: Warning notification
Example: Error notification, markup A
Example: Error notification, markup B
Example: Error notification, markup C
Various patterns are available as page décor. Use a Bootstrap-type background colour utility class along with the class for the pattern you’d like on a
<div> or similar, then the element where you’d like the pattern.
Example: Striped background
Example: Spotty background
|Pay date||Start of included days||End of included days|
|28 January 2022||6 December||9 January|
|25 February 2022||10 January||6 February|
|30 March 2022||7 February||6 March|
All text content is set in Gotham. The book weight is used for body text, bold is used for headings or emphasis, and the light weight is also available.
Text should never be underlined. Underlines are only used for links.
BLOCK CAPITALS ARE HARD TO READ AND FEEL LIKE YOU’RE SHOUTING. Write in sentence case instead, making use of italics, bold text, highlights, or the inset component for emphasis.
Use a horizontal rule to add a visual divider to page content. Do not re-create the line with dashes or hyphens.
Each page should only have one level 1 heading. When creating subsections, heading levels should never be skipped – for example, direct subsections of a heading 2 must be titled with heading 3s.
Example: Good practice
Example: Bad practice
If a page doesn’t look right with the correct heading levels, do not change the heading levels. First, consider if you can re-structure your content to improve the balance of the page. If this isn’t possible, use CSS classes to make one level of heading look like another.
Example: Heading 4, with the appearance of a heading 2
You can remove the detail under a heading using the
plain class. Heading 1s never have the detail.
Example: Heading 2, with no detail
Headings should only be used as titles, never to emphasise or enlarge text. If you need to emphasise something, look at the inset component, use bold or italics, or restructure your content to make the information you need to emphasise more naturally-prominent.