Bootstrap Container Pattern

The `Bootstrap Container` pattern is used to create a responsive grid pattern based on Bootstraps 12 column grid. The width of the columns can be adjusted, and also, the display property can also be set to show/hide certain elements for different screen widths (small, medium, large and xlarge)

Avatar List Pattern

The `Avatar List` pattern is used to create a list of avatars, such as members or groups. The images can contain hyperlinks if needed, and the images should animate when hovered to indicate that they are clickable

Buttons

The `Button` component has two main styles, solid and outline. The buttons have an effect variable which can be used to change the color effect of the button when it is hovered over, and also has three sizes, small, medium and large.

Large Header

The large headers can also be manually be set for each page, and can be hard-coded for custom-posts.

# Icon
The icon should be in a proportion of about 9/2, e.g. 700 x 160 px. The majority of the icons use the paint-splash icon. Icons have a maximum-width of 700 px but this can be reduced if the image looks too large. The banner should be 340px high on Desktop, and reduce in size for medium and small screen-sizes.

# Backgrounds
A background-image of 1920w x 340 pixels should be applied to the header

Small Header

The small headers can manually be set for each page, and can be hard-coded for custom-posts.

# Fonts
They consist of a *Required tag H2 600 font weight for the first line, an optional H2 400 font-weight for the second line and an optional tag h6 600 font weight for the description, and have a minimum height: 270px.

# Icons
An optional Icon should be added whenever we have the resources to create one. The Icon should be 60 x 60 pixels and should be of consistant weight with the other icons used throughout the site

# Backgrounds
A color-theme (e.g. bg-a, bg-b) can be applied to the banner. Alternatively a background-image of 1920w x 200 pixels can be applied to the header

See the Invision Header Designs for more detail

Site Colors

Site Colors used across the site. These are the default colors used in the Color Palette that are available for elements such as Banners, Buttons, Typography .etc. They are based on the most common colors used across the site and should be used to maintain a consistance of color on the site.

The two most prominant colors are the Educate Magis Blue and Dark Orange colors, which are the Primary and Secondary colors of the site.

Vertical Call To Action Banners

Vertical CTA Banners are used on pages where we promote or advertise something which is important and needs to visually stand out and be noticeable on the page.

The Image is absolutely positioned to allow it to float outside of the main container, and there are additional settings that allow you to position the content and container. The section should fill the full width of the page. The background can either be a solid color or a Gradient, and there is a fade-in animation on the image.

Vertical Call To Action Banner

An earlier version of A CTA Banner created in 2018. This is currently used in the Staff Formation page. Content can be aligned to the Left or to the Right.

Embed/Quote Block

The Embed/Quote block is used to hold a Video and a Content/Quote beside it.

The section also has a background pattern which gives an effect over the background color, which can easily be changed for the block. Light pastel colors are used with this block type.

The layout stays 50/50 until the screen goes under 992px. It will stack and have a max width of 500px, which is the max-width of the iFrame for the block.

Image/Quote Block

The Image/Quote block has the same style as the Embed/Quote block, and similar pastel-colors are used. It’s layout differs in that it’s not 50/50. A good image size `to use is a square 220x220px image.

It behaves the same on mobile as the embed/media block in that once the screen goes under 992px. It will stack and have a max width of 500px.

FAQ’s Block

The FAQ’s pattern can be used to display multiple types of content but was originally developed for the FAQ’s section on the Registration Page. The icon on the left was designed to be 65px wide, and the header is a H3 level header.

The block uses a Grid Pattern of two rows to keep the Icon on the left, the header on the right in the top row, and the content then fits into the second row. On mobile, the grid changes to block and the elements will appear as three separate rows, with the icon on top.

Typography

There are 6 header levels and 4 paragraph styles to choose from in the theme. This should cover most use cases, however a custom font size can be set for the paragraph block if necessary. The theme uses rem sizes in most cases.

The font used on the site is called Open Sans, and was downloaded from Google Fonts. There are four font-weights available. Bold (700), Semi-Bold (600), Regular (400) and Light (300).

Headers

Paragraphs